Satır içi SVG veya img: Doğru gömme yöntemini seçin

Tamamlanmış bir grafiği görüntülemek istediğinizde SVG'yi bir <img> öğesinde kullanın. Sayfanın tek tek şekilleri CSS veya JavaScript ile değiştirmesi gerekiyorsa SVG'yi satır içi olarak yerleştirin. Her iki yaklaşım da aynı vektör çizimini farklı boyutlarda gösterebilir; satır içine almak geometrisini iyileştirmez.

Bir logo tarayıcı sekmesinde doğru görünüp web sitenizin renk kuralını yok saydığında bu ayrım önem kazanır. Dosyada sorun olmayabilir. Kuralın dosyanın içine ulaşabileceği bir yol olmayabilir. Aşağıda aynı dağ illüstrasyonu iki biçimde de yer alıyor; böylece görsel hazırlama sürecinizi değiştirmeden önce farkı kontrol edebilirsiniz.

İhtiyacınız olan davranışı seçin

Harici bir SVG, <img> ile görüntülendiğinde vektör dosyası olarak kalır. Sınır, sayfa ile dosyanın iç öğeleri arasındadır. Sayfanın CSS'i görsel öğesini yeniden boyutlandırabilir, döndürebilir veya saydamlaştırabilir; ancak .logo path gibi bir seçici, src kaynağının içindeki yollara ulaşamaz. Satır içi şekiller sayfanın belge ağacının parçası olur. MDN'nin SVG gömme kılavuzu bu iki yaklaşımı açıklar.

Dosyanın içeriğini hâlâ kontrol ediyorsanız SVG dosyasının ne olduğunu öğrenerek başlayın. .svg uzantısı tek başına görünen her ayrıntının bir yol olduğu anlamına gelmez. Bir mağazaya teslim edecekseniz dosya içeriğini doğruladıktan sonra Shopify özel SVG simgesi kılavuzunu izleyin.

Aynı çizimi iki biçimde de test edin

Bu gösterim için iki dağ yolunu ve güneşi temsil eden bir daireyi elle kodladık. Çizimi ayrı bir dosyadan yükledik ve aynı şekilleri HTML'ye yapıştırdık. Bu bir gömme testidir; PerfectVector dönüştürme sonucu değildir.

Chromium tarayıcı testimizde her iki sürüm de başlangıçta 360 × 240 CSS pikseli alan kaplıyor ve kehribar renkli bir güneş gösteriyordu. Ardından .sun öğesini hedefleyen bir sayfa kuralını etkinleştirdik. Satır içi güneş mercan rengine döndü; harici görseldeki güneş kehribar renginde kaldı. İki kutuyu da 180 × 120 boyutuna küçültmek, bu farkı değiştirmeden görüntüleme boyutlarını değiştirdi.

1. Ayrı SVG dosyasını kaydedin

Bu eksiksiz kaynak koduyla artwork.svg dosyasını oluşturun. viewBox, çizimin koordinat uzayını tanımlar. Genişlik ve yükseklik, açıkça belirtilmiş başlangıç boyutlarını verir.

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="160" viewBox="0 0 240 160">
  <path d="M34 120 104 26 174 120Z" fill="#233b63" />
  <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
  <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
</svg>

2. Görseli ve satır içi kopyayı ekleyin

Aşağıdakini artwork.svg dosyasının yanına index.html olarak kaydedip bir tarayıcıda açın. İki grafik aynı geometriye ve boyama özniteliklerine sahiptir. Satır içi sürümün yardımcı teknolojiler için bir adı da vardır.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG embedding test</title>
<style>
  .artwork {
    display: block;
    width: 360px;
    max-width: 100%;
    height: auto;
  }
  .theme .sun { fill: #d94862; }
</style>
<body class="theme">
  <h1>External image</h1>
  <img class="artwork" src="artwork.svg"
       width="240" height="160"
       alt="Mountain and sun illustration">
 
  <h2>Inline SVG</h2>
  <svg class="artwork" xmlns="http://www.w3.org/2000/svg"
       width="240" height="160" viewBox="0 0 240 160"
       role="img" aria-labelledby="mountain-title">
    <title id="mountain-title">Mountain and sun illustration</title>
    <path d="M34 120 104 26 174 120Z" fill="#233b63" />
    <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
    <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
  </svg>
</body>
</html>

Ekran görüntüsünde aynı şekillerin etrafında biçimlendirilmiş bir karşılaştırma düzeni kullanılmıştır. Yukarıdaki daha küçük örnek, davranışı kolayca yeniden üretmenizi sağlar.

3. Her seferinde tek bir değişkeni değiştirin

Body öğesinden class="theme" ifadesini kaldırıp sayfayı yeniden yükleyin. Artık iki güneş de kehribar renginde olmalıdır. Sınıfı geri eklediğinizde yalnızca satır içi güneş mercan rengine dönmelidir. .artwork içindeki width: 360px değerini width: 180px olarak değiştirin; kapsayıcıda yeterli alan varsa her iki grafik de 180 × 120 boyutuna küçülmelidir.

Harici görselin güneş rengini kalıcı olarak değiştirmek istiyorsanız artwork.svg içindeki fill değerini düzenleyin. Sayfanın durumuna tepki vermesini istiyorsanız satır içi kodu veya bu amaçla seçilmiş başka bir sunum yöntemini kullanın. SVG renklerini değiştirme kılavuzumuz, dosyanın kendisini düzenlemeyi ele alır.

.sun adı bu örnek için eklenmiştir. Dönüştürülmüş veya dışa aktarılmış bir dosyada, anlamlı her parça için kullanışlı bir sınıf bulunmayabilir. Görünen bir nesnenin tek bir seçilebilir yol olduğunu varsaymak yerine kontrol etmek istediğiniz şekilleri inceleyip adlandırın.

Boyutları ve erişilebilir adları açıkça belirtin

Çizimi HTML'ye taşırken viewBox değerini koruyun. Genişlik ve yükseklik özniteliklerini makul bir başlangıç değeri olarak ayarlayın, ardından duyarlı CSS uygulayın. Bu 3:2 oranlı illüstrasyonda width: 180px; height: auto oranları korur. viewBox içindeki büyük bir boş kenar payı, her iki yöntemde de çizim alanının parçası olarak kalır; gömme yöntemini değiştirmek onu kaldırmaz.

Yerleşim kutusu farklı bir orana sahipse preserveAspectRatio sığdırma kılavuzu, çizimin tamamını sığdırmayı, kırpmayı ve biçimini bozmayı karşılaştırır.

Anlam taşıyan harici bir görsel için HTML <img> öğesine alt yazın. Anlam taşıyan satır içi bir görsel için örnekte role="img" ve <title> öğesine işaret eden aria-labelledby kullanılır. Satır içi SVG, HTML görselinin alt özniteliğini kullanmaz. Bu adlandırma seçenekleri MDN'nin SVG in HTML kılavuzunda belgelenmiştir.

Satır içi örneği tekrarlarsanız her title kimliğine benzersiz bir değer verin ve eşleşen aria-labelledby değerini güncelleyin. Aynı özen, renk geçişleri, maskeler veya kırpma yollarında kullanılan kimlikler için de geçerlidir. Aynı bilgiyi veren görünür metnin yanındaki dekoratif çizimler için <img> üzerinde boş bir alt kullanın veya satır içi SVG'yi aria-hidden="true" ile yardımcı teknolojilerden gizleyin. Amacının hâlâ adlandırıldığından emin olmak için bağlantıyı veya düğmeyi tümüyle, kullanıldığı bağlamda test edin.

Çok sayıda yeniden kullanılabilir simge için SVG symbol sprite, tanımları ve örneklerini ayrı tutan bir yaklaşım sunar. Her sayfaya büyük bir kopya kümesi yapıştırmadan önce bu yeniden kullanıma ihtiyacınız olup olmadığına karar verin.

Performansı ölçerek değerlendirin

Satır içi kod, çizimi ayrı bir görsel kaynağı olarak getirmek yerine şekilleri belgeye yerleştirir. Aynı zamanda belgedeki kod miktarını artırır. Harici bir dosya, URL'sine, yanıt başlıklarına ve önbellek durumuna bağlı olarak tarayıcı önbelleğinden yeniden kullanılabilir. MDN'nin HTTP önbellekleme kılavuzu bu koşulları açıklar.

Bu iki bilgi, hangi sürümün sayfanızı daha hızlı yapacağını tek başına belirlemez. Gerçek sayfayı, gerçek kopya sayısı ve SVG karmaşıklığıyla ilk ziyarette ve tekrar ziyarette karşılaştırın. Buradaki gösterim, boyama özelliklerine erişimi ve boyutlandırmayı test eder; yükleme hızı kıyaslaması değildir.

Harici görsel modunda CSS dışındaki konularda da kısıtlamalar vardır. MDN, görsel olarak kullanılan SVG'de JavaScript'in devre dışı olduğunu ve harici kaynakların kısıtlandığını belgeler. Eksik bir özelliği çalıştırmak için tanımadığınız bir SVG'yi doğrudan satır içine taşımayın. Güvenilmeyen kodu sayfaya eklemeden önce inceleyip zararlı içerikten arındırın.

Başlangıç çiziminiz yalnızca PNG ise

Kaynakta ihtiyacınız olan şekiller yoksa vektörleştirme, gömme yöntemini seçmeden önce yapılmalıdır. Uygun bir raster logo veya illüstrasyon için PerfectVector ile PNG'yi SVG'ye dönüştürün, sonucu kaynakla karşılaştırarak inceleyin ve kabul ettiğiniz SVG'yi çiziminizin ana dosyası olarak saklayın. Sınıf eklemeden veya web için bir kopya hazırlamadan önce silüeti, delikleri ve küçük renk bölgelerini kontrol edin.

PerfectVector vektör çizimini sağlar. Hangi parçaların CSS'e tepki vereceğini seçmek, anlamlı adlar eklemek ve son sayfayı test etmek yine size aittir. Bir görseli dönüştürmek, anlamlı sınıf adları içeren bir bileşeni otomatik olarak üretmez. Mevcut bir SVG zaten kullanılabilir yollar içeriyorsa görüntülenmiş bir kopyayı vektörleştirmek yerine bu yollarla çalışın.

Ayrıca gömülü raster görsel içeren SVG olup olmadığını kontrol edin. Böyle bir dosyayı satır içine yapıştırmak <image> öğesini erişilebilir hâle getirir; öğenin içindeki pikselleri ayrı ayrı renklendirilebilir şekillere dönüştürmez. Fotoğraf görünümünü koruması gereken bir fotoğraf için uygun bir raster sunum biçimini kullanmaya devam edin.

Son sayfayı kontrol edin

• Sayfa CSS'ini test etmeden önce bağımsız çizimin doğru göründüğünü doğrulayın.
• Tamamlanmış bir görseli göstermek için <img>, öğelerini doğrudan kontrol etmek için satır içi SVG seçin.
• Desteklenen en dar yerleşimde ekranda görüntülenen boyutu ve oranları doğrulayın.
• Yeniden renklendirmek istediğiniz şekli özellikle test edin; geniş kapsamlı bir path kuralına güvenmeyin.
• Görsel adlarını, yinelenen kimlikleri ve çevreleyen bağlantıyı veya düğmeyi kontrol edin.
• Kararı etkiliyorsa yükleme davranışını ölçün; bu örnekten bir hız sonucu çıkarmayın.

Sık sorulan sorular

img etiketi kullandığımda SVG bitmap'e dönüşür mü? Hayır. img ile yüklenen SVG, vektör geometrisini işlemeye devam edebilir. Görsel öğesi, onu barındıran sayfanın SVG içindeki şekilleri doğrudan seçmesini engeller; bu şekilleri PNG'ye dönüştürmez.

currentColor neden sayfamın metin rengini takip etmiyor? Harici bir SVG görselinin kendi biçimlendirme bağlamı vardır. Sayfanın rengi, o dosyanın içinde kullanılan currentColor değerine otomatik olarak dönüşmez. Boyama renginin sayfadan devralınmasını istiyorsanız satır içi SVG kullanın ve ilgili fill veya stroke değerini currentColor kullanacak şekilde yazın.

Mevcut SVG'mi satır içine yerleştirmeden önce dönüştürmeli miyim? İstediğiniz vektör şekillerini zaten içeriyorsa dönüştürme gerekmez. Kodunu inceleyin, gerekli referansları koruyun, uygun adlandırmalar ekleyin ve sayfa içinde test edin. Raster görüntüden vektöre dönüştürme, yalnızca raster bir kaynaktan şekiller elde etmeniz gerektiğinde söz konusu olur.

Kaynaklar

1. MDN — Including vector graphics in HTML — Harici görsel ve satır içi gömme davranışı.
2. MDN — SVG in HTML introduction — Satır içi kod, viewBox ve erişilebilir adlandırma.
3. MDN — HTTP caching — Önbellekten yeniden kullanım, yanıt politikasına ve kaynak kimliğine bağlıdır.
4. MDN — SVG as an image — Görsel bağlamlarında betik ve kaynak kısıtlamaları.

Çizimin kullanım amacına uygun gömme yöntemini seçin, ardından sayfanın gerçek stilleriyle test edin. Tek kaynağınız uygun bir PNG ise önce vektör şekillerini elde edin, sonucu inceleyin ve kabul ettiğiniz çizimi o gömme yöntemine hazırlayın.