6 Yaygın SVG Hatası (ve Nasıl Onarılır)

Geçenlerde biri bana satır içi SVG'lerde hata ayıklamaya nasıl yaklaştığımı sordu. DOM'un bir parçası olduğu için, herhangi bir satır içi SVG'yi herhangi bir tarayıcı DevTools'ta inceleyebiliriz. Ve bu nedenle, SVG'yi optimize etmek için her türlü olası sorunu veya fırsatı ortaya çıkarma ve kapsam belirleme yeteneğine sahibiz.

Ancak bazen SVG'lerimizi bile göremiyoruz. Bu durumlarda, hata ayıklarken aradığım altı özel şey vardır.

1. viewBox değerlerimiz

The viewBox SVG ile çalışırken ortak bir karışıklık noktasıdır. Satır içi SVG'yi onsuz kullanmak teknik olarak iyidir, ancak en önemli avantajlarından birini kaybederiz: kapsayıcıyla ölçeklendirme. Aynı zamanda, yanlış yapılandırıldığında istenmeyen kırpmalara neden olarak aleyhimize çalışabilir.

Öğeler kırpıldıklarında oradadır - koordinat sisteminin bizim göremediğimiz bir bölümündedirler. Dosyayı bir grafik düzenleme programında açarsak, şöyle görünebilir:

Bunu düzeltmenin en kolay yolu? Eklemek overflow="visible" ister stil sayfamızda, ister satır içi olsun, SVG'ye style özniteliği veya doğrudan bir SVG sunum özniteliği olarak. Ama eğer bir de uygularsak background-color SVG'ye veya etrafında başka öğelere sahipsek, işler biraz garip görünebilir. Bu durumda, en iyi seçenek dosyayı düzenlemek olacaktır. viewBox koordinat sisteminin gizlenmiş kısmını göstermek için:

hakkında birkaç ek şey daha var. viewBox Konu üzerindeyken ele almaya değer:

Nasıl olur viewBox çalışır?

SVG sonsuz bir tuvaldir, ancak ne gördüğümüzü ve onu nasıl gördüğümüzü görünüm alanı ve viewBox.

The Görünüm, sonsuz tuval üzerinde bir pencere çerçevesidir. Boyutları tarafından tanımlanır width ve height nitelikler veya karşılık gelen CSS'de width ve height özellikler. İstediğimiz herhangi bir uzunluk birimini belirtebiliriz, ancak birimsiz sayılar verirsek, bunlar varsayılan olarak pikseldir.

The viewBox dört değerle tanımlanır. İlk ikisi sol üst köşedeki başlangıç ​​noktasıdır (x ve y değerler, negatif sayılara izin verilir). Görüntüyü yeniden çerçevelemek için bunları düzenliyorum. Son ikisi, görünümün içindeki koordinat sisteminin genişliği ve yüksekliğidir - burası, ızgaranın ölçeğini düzenleyebileceğimiz yerdir (bunu şu bölümde ele alacağız) Zoom yapma).

İşte SVG'yi gösteren basitleştirilmiş işaretleme viewBox ve width ve height her ikisi de ayarlanan nitelikler <svg>:

<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>

çerçeveye oturtmak

Yani, bu:

<svg viewBox="0 0 700 700">

…bununla eşleşir:

<svg viewBox="start-x-axis start-y-axis width height">

Gördüğümüz görüntü alanı nerede başlar 0 x ekseninde ve 0 y ekseni üzerinde buluşuyor.

Bunu değiştirerek:

<svg viewBox="0 0 700 700">

…buna:

<svg viewBox="300 200 700 700">

...genişlik ve yükseklik aynı kalır (700 birim), ancak koordinat sisteminin başlangıcı artık 300 x ekseni üzerindeki nokta ve 200 y ekseni üzerinde.

Aşağıdaki videoda kırmızı ekliyorum <circle> merkezi şurada olacak şekilde SVG'ye 300 x ekseni üzerindeki nokta ve 200 y ekseni üzerinde. nasıl değiştirildiğine dikkat edin viewBox aynı değerlere koordinatlar, SVG'nin işlenen boyutu aynı kalırken dairenin yerleşimini çerçevenin sol üst köşesine değiştirir (700×700). Tüm yaptığım, şeyleri "yeniden çerçevelemek" oldu. viewBox.

Zoom yapma

İçindeki son iki değeri değiştirebiliriz. viewBox görüntüyü yakınlaştırmak veya uzaklaştırmak için Değerler ne kadar büyük olursa, görünüme sığdırmak için o kadar fazla SVG birimi eklenir ve bu da daha küçük bir görüntüyle sonuçlanır. 1:1 oranını korumak istiyorsak, viewBox genişlik ve yükseklik, görünüm alanı genişlik ve yükseklik değerlerimizle eşleşmelidir.

Bakalım bu parametreleri değiştirdiğimizde Illustrator'da neler oluyor. çalışma yüzeyi viewport beyaz bir 700px kare ile temsil edilir. Bu alanın dışındaki her şey bizim sonsuz SVG tuvalimizdir ve varsayılan olarak kırpılır.

Aşağıdaki Şekil 1'de mavi bir nokta gösterilmektedir. 900 x ekseni boyunca ve 900 y ekseni boyunca. Son ikisini değiştirirsem viewBox gelen değerler 700 için 900 bunun gibi:

<svg viewBox="300 200 900 900" width="700" height="700">

…sonra, aşağıdaki Şekil 2'de görüldüğü gibi, mavi nokta neredeyse tamamen tekrar görünür hale gelir. ViewBox değerlerini artırdığımız için görüntümüz küçültüldü, ancak SVG'nin gerçek genişlik ve yükseklik boyutları aynı kaldı ve mavi nokta tekrar kırpılmamış alana yaklaştı.

Izgaranın görüntü alanına sığacak şekilde nasıl ölçeklendiğinin kanıtı olarak pembe bir kare vardır: birim küçülür ve aynı görüntü alanı alanına daha fazla ızgara çizgisi sığar. Bu çalışmayı çalışırken görmek için aşağıdaki Kalemde aynı değerlerle oynayabilirsiniz:

2. Eksik width ve height

Satır içi SVG'de hata ayıklarken baktığım diğer bir yaygın şey, işaretlemenin şunları içerip içermediğidir: width or height Öznitellikler. SVG, mutlak konumlandırmaya sahip bir kapsayıcının veya esnek bir kapsayıcının içinde olmadığı sürece (Safari, SVG'yi hesapladığından) bu pek çok durumda önemli değildir. width ile değer 0px yerine auto). Hariç width or height bu durumlarda, görebildiğimiz gibi tam resmi görmemizi engeller. bu CodePen demosunu açma ve Chrome, Safari ve Firefox'ta karşılaştırma (daha büyük görünüm için resimlere dokunun).

Çözüm? Bir sunum özelliği olarak, stil özelliğinde satır içi veya CSS'de bir genişlik veya yükseklik ekleyin. Özellikle ayarlandığında yüksekliği tek başına kullanmaktan kaçının. 100% or auto. Diğer bir geçici çözüm ise doğru ayarla ve sol değerler.

ile oynayabilirsin aşağıdaki Kalem ve farklı seçenekleri birleştirin.

3. İstemeden fill ve stroke renkler

Renk uyguluyor da olabiliriz. <svg> etiketi, ister satır içi stil ister CSS'den geliyor olsun. Sorun değil, ancak işaretleme boyunca başka renk değerleri veya şablondaki renk kümesiyle çelişen stiller olabilir. <svg>, parçaların görünmez olmasına neden olur.

Bu yüzden aramaya eğilimliyim fill ve stroke SVG'nin işaretlemesindeki öznitelikleri kaldırın ve silin. Aşağıdaki video, CSS'de kırmızı ile stillendirdiğim bir SVG'yi göstermektedir. fill. Eksik parçaları ortaya çıkarmak için kaldırdığım işaretlemede SVG'nin parçalarının doğrudan beyazla doldurulduğu birkaç örnek var.

4. Eksik kimlikler

Bu çok bariz görünebilir, ancak bunun ne sıklıkta gündeme geldiğini gördüğüme şaşıracaksınız. Diyelim ki Illustrator'da bir SVG dosyası yaptık ve dosyayı dışa aktarırken işaretlemede güzel eşleşen kimlikler elde edebilmeniz için katmanlarımızı adlandırma konusunda çok titiz davrandık. Diyelim ki bu SVG'yi CSS'de bu kimliklere bağlayarak biçimlendirmeyi planlıyoruz.

Bu, bir şeyler yapmanın güzel bir yolu. Ancak, aynı SVG dosyasının aynı konuma ikinci kez dışa aktarıldığını ve genellikle vektörleri doğrudan kopyalarken/yapıştırırken kimliklerin farklı olduğunu birçok kez gördüm. Belki yeni bir katman eklendi veya var olanlardan birinin adı değiştirildi falan. Durum ne olursa olsun, CSS kuralları artık SVG işaretlemesindeki kimliklerle eşleşmez ve bu da SVG'nin beklediğinizden farklı şekilde oluşturulmasına neden olur.

Büyük SVG dosyalarında bu kimlikleri bulmakta zorlanabiliriz. DevTools'u açmak, grafiğin çalışmayan kısmını incelemek ve bu kimliklerin hala eşleşip eşleşmediğini görmek için iyi bir zaman.

Bu nedenle, dışa aktarılan bir SVG dosyasını bir kod düzenleyicide açmaya ve bir şeyleri değiştirmeden önce orijinaliyle karşılaştırmaya değer olduğunu söyleyebilirim. Illustrator, Figma ve Sketch gibi uygulamalar akıllıdır ancak bu, onları incelemekten sorumlu olmadığımız anlamına gelmez.

5. Kırpma ve maskeleme için kontrol listesi

Bir SVG beklenmedik şekilde kırpılırsa ve viewBox kontroller tamam, genellikle CSS'ye bakarım clip-path or mask görüntüyü etkileyebilecek özellikler. Satır içi işaretlemeye bakmaya devam etmek cazip gelebilir, ancak bir SVG'nin stilinin başka bir yerde olabileceğini hatırlamakta fayda var.

CSS kırpma ve maskeleme bir görüntünün veya öğenin bölümlerini "gizlememize" izin verir. SVG'de, <clipPath> bir görüntünün parçalarını yarım sonuç olmadan kesen bir vektör işlemidir. bu <mask> etiketi saydamlığa, yarı saydamlık efektlerine ve bulanık kenarlara izin veren bir piksel işlemidir.

Bu, kırpma ve maskelemenin söz konusu olduğu hata ayıklama durumları için küçük bir kontrol listesidir:

• Kırpma yolunun (veya maskenin) ve grafiğin birbiriyle örtüştüğünden emin olun. Çakışan kısımlar, görüntülenen kısımlardır.
• Grafiğinizle kesişmeyen karmaşık bir yolunuz varsa, eşleşene kadar dönüşümleri uygulamayı deneyin.
• İç kodu DevTools ile inceleyebilirsiniz. <clipPath> or <mask> işlenmez, bu yüzden kullanın!
• İçindeki işaretlemeyi kopyala <clipPath> ve <mask> ve kapatmadan önce yapıştırın </svg> etiket. Sonra bir ekle fill bu şekillere gidin ve SVG'nin koordinatlarını ve boyutlarını kontrol edin. Hala resmi göremiyorsanız, eklemeyi deneyin. overflow="hidden" için <svg> etiketi.
• Şunu kontrol edin: benzersiz Kimlik için kullanılır <clipPath> or <mask>ve aynı kimliğin kırpılan veya maskelenen şekillere veya şekil grubuna uygulandığını. Uyumsuz bir kimlik, görünümü bozacaktır.
• Şunlar arasındaki işaretlemede yazım hatalarını kontrol edin: <clipPath> or <mask> etiketleri.
• fill, stroke, opacityveya içindeki öğelere uygulanan diğer bazı stiller <clipPath> işe yaramaz — yararlı olan tek kısım, bu öğelerin dolgu bölgesi geometrisidir. Bu yüzden bir <polyline> olarak davranacak <polygon> ve eğer bir <line> herhangi bir kırpma efekti görmezsiniz.
• Uyguladıktan sonra resminizi göremiyorsanız <mask>emin olun fill maskeleme içeriğinin tamamı siyah değildir. Maskeleme öğesinin parlaklığı, son grafiğin opaklığını belirler. Daha parlak kısımları görebileceksiniz ve daha koyu kısımlar görüntünüzün içeriğini gizleyecektir.

Maskelenmiş ve kırpılmış öğelerle oynayabilirsiniz. bu kalem.

6. Ad alanları

SVG'nin XML tabanlı bir biçimlendirme dili olduğunu biliyor muydunuz? Öyle! SVG için ad alanı, xmlns özellik:

<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>

XML'de ad alanı hakkında bilinmesi gereken çok şey var ve MDN'de bu konuda harika bir başlangıç ​​var. Ad alanının, tarayıcıya işaretlemenin SVG'ye özgü olduğunu bildirerek bağlam sağladığını söylemek yeterlidir. Buradaki fikir, ad alanlarının SVG ve XHTML gibi birden fazla XML türü aynı dosyada olduğunda çakışmaları önlemeye yardımcı olmasıdır. Bu, modern tarayıcılarda çok daha az yaygın bir sorundur, ancak eski tarayıcılarda veya Gecko gibi belge türleri ve ad alanlarını tanımlarken katı olan tarayıcılarda SVG oluşturma sorunlarını açıklamaya yardımcı olabilir.

SVG 2 spesifikasyonu isim aralığı gerektirmez HTML sözdizimini kullanırken. Fakat bu çok önemli eski tarayıcılar için destek bir öncelikse - artı, eklemekten hiçbir zarar gelmez. Bu şekilde, ne zaman <html> elementler xmlns öznitelik tanımlanırsa, bu nadir durumlarda çakışmaz.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px"> <!-- etc. --> </svg> </body>
</html>

Bu, arka plan görüntüsü olarak ayarlamak gibi CSS'de satır içi SVG kullanırken de geçerlidir. Aşağıdaki örnekte, başarılı doğrulamanın ardından girişte bir onay işareti simgesi görünür. CSS böyle görünüyor:

textarea:valid { background: white url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"> <circle cx="13" cy="13" r="13" fill="%23abedd8"/> <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/> </svg>') no-repeat 98% 5px;
}

Arka plan özelliğinde SVG içindeki ad alanını kaldırdığımızda, görüntü kaybolur:

Başka bir yaygın ad alanı öneki xlink:href. Desenler, filtreler, animasyonlar veya degradeler gibi SVG'nin diğer bölümlerine atıfta bulunurken bunu çok kullanırız. Tavsiye, onu değiştirmeye başlamaktır. href diğeri SVG 2'den beri kullanımdan kaldırıldığı için, ancak eski tarayıcılarda uyumluluk sorunları olabilir. Bu durumda ikisini de kullanabiliriz. Sadece ad alanını dahil etmeyi unutmayın xmlns:xlink="http://www.w3.org/1999/xlink" hala kullanıyorsanız xlink:href.

SVG becerilerinizin seviyesini yükseltin!

Umarım bu ipuçları, hatalı oluşturulmuş satır içi SVG'lerde sorun giderirken bulursanız size çok zaman kazandırabilir. Bunlar sadece aradığım şeyler. Belki de dikkat ettiğiniz farklı kırmızı bayraklar vardır - öyleyse, yorumlarda bana bildirin!

Sonuç olarak, en azından temel bir anlayışa sahip olmanın ödediğidir. SVG'nin kullanılabileceği çeşitli yollar. CodePen Zorlukları genellikle SVG'yi dahil eder ve iyi uygulamalar sunar. Seviye atlamak için birkaç kaynak daha:

SVG ile ilgili iyilik için takip etmeyi önerdiğim birkaç kişi var:

• SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
• Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. Buradan Erişin.
• Kaynak: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/