SVG symbol sprite: Kimlik, viewBox ve renk yönetimi

Bir SVG symbol sprite, adlandırılmış simge tanımlarını tek bir SVG dosyasında saklar. Görünür her simge, ihtiyaç duyduğu tanıma başvurmak için bir <use> öğesi kullanır. Bu paketleme ancak parça kimliği, koordinat sistemi ve boyama kuralları ayrı dosyalardan taşınırken korunursa çalışır.

Tüm bir klasörü birleştirmeden önce iki simgeyle başlayın. Bu örnekte yaprak kare bir koordinat alanı, sağ ok ise geniş bir alan kullanıyor. Yaprak, yolu çoğaltılmadan iki renkte görünecek. Ok da yaprağın tuvaline zorla sığdırılmak yerine oranlarını koruyacak.

Kaynak simgelerinizin şekilleri, iç boşlukları veya görsel ağırlıkları hâlâ tutarlı değilse önce SVG arayüz kiti hazırlama iş akışını tamamlayın. Sprite, çizimleri düzenler; onları onarmaz.

İki adlandırılmış symbol tanımı oluşturun

Bu özgün örneği sprite.svg adıyla kaydedin:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="pv-leaf" viewBox="0 0 24 24">
    <path fill="currentColor"
      d="M5 19C2 10 9 4 20 4C20 15 14 22 5 19Z"/>
  </symbol>
  <symbol id="pv-arrow" viewBox="0 0 32 16">
    <path fill="currentColor"
      d="M2 5H21V1L30 8L21 15V11H2Z"/>
  </symbol>
</svg>

Yaprağın adı pv-leaf, okun adı pv-arrow. Sayfanın isteyeceği tanımlayıcılar bunlardır. MDN, symbol öğesini use aracılığıyla örneği oluşturulan, yeniden kullanılabilir bir grafik tanımı olarak açıklar. Yalnızca symbol öğeleri içeren bir dosya, tanımlar doğrudan görüntülenmediği için tek başına açıldığında boş görünebilir.

viewBox değerini, tarif ettiği çizimle birlikte koruyun. Burada yaprak 0 0 24 24, ok ise 0 0 32 16 kullanır. Bu sayılar zorunlu bir görüntüleme boyutunu değil, koordinat sınırlarını tanımlar. Okun geometrisini ayarlamadan sınırlarını 24'e 24 yapmak normalleştirme değildir. Koordinatlarla görüntü alanı arasındaki eşleme için MDN'nin viewBox referansına bakın.

Mevcut bir simge ailesinde, üzerinde uzlaşılmış ızgarayı koruyun. Buradaki farklı şekiller başka bir noktayı gösteriyor: paketleme, önceden onayladığınız koordinat sistemini korumalıdır. Bir okun çizginin veya eğrinin ucunu takip etmesi gerekiyorsa bağlantı noktasını ve yönünü tanımlamak için özel ok uçlarını hizalayan SVG işaretçilerini kullanın.

Bir sayfadan sprite'a başvurun

sprite.svg, HTML sayfanız ve icons.css dosyasını sunulan aynı dizine koyun. Yerel dosya kısıtlamasının veya farklı bir sunucunun basit bir referans hatasını gizlememesi için aynı kökenden sunulan bir HTTP önizlemesiyle başlayın.

Bu kuralları icons.css dosyasına ekleyin ve sayfadan bu stil sayfasını yükleyin:

.icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
}
.icon-wide {
  width: 3rem;
}
.garden-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #167d8d;
}

Ardından HTML gövdesine şu örnekleri ekleyin:

<button class="garden-button" type="button">
  <svg class="icon" aria-hidden="true" focusable="false">
    <use href="./sprite.svg#pv-leaf"></use>
  </svg>
  Garden
</button>
 
<svg class="icon icon-wide" role="img" aria-label="Right direction"
  style="color: #233b63">
  <use href="./sprite.svg#pv-arrow"></use>
</svg>

# işaretinden önceki bölüm dosyayı bulur; sonraki bölüm symbol öğesini seçer. Güncel özniteliğin adı hreftir. MDN'nin use referansı, dış referansları belgeler ve tarayıcıların farklı kökenlerden yüklemeyi reddedebileceği konusunda uyarır. Çalışan bir sprite'ı CDN'e taşımanın başka değişiklik gerektirmeyeceğini varsaymayın; gerçek sunum konumunu test edin.

Tarayıcının varsayılan kök yazı tipi boyutunda bu kurallar yaprağa 24'e 24 CSS piksellik, oka ise 48'e 24 piksellik bir kutu verir. Boyutlar rem kullandığı için kök yazı tipi boyutunun değişmesi onları da değiştirir. Simgeleri büyütülmüş önizlemenin yanı sıra gerçek bileşenin içinde de karşılaştırın: doğru boyutlu bir kutunun içindeki çizim yine de fazla iç boşluk barındırabilir.

Yukarıdaki düğme, simgenin sunumunu ve adlandırılmasını gösterir. Üründe kullanırken uygulamanın kendi eylem işleyicisini ekleyin.

Dosyaları birleştirmeden önce boyama kuralını seçin

Örnekteki iki yol da açıkça fill="currentColor" kullanır. Böylece tanımı kullanan örnek, çevresindeki CSS color değerini alabilir: düğme turkuazı, ok ise laciverti sağlar. color referansı, currentColor değerinin dolgularda ve konturlarda kullanılan değeri nasıl sağlayabildiğini açıklar.

Yaprağın ikinci görünümü için aynı pv-leaf referansını kullanın ve örneğin color değerini mercan rengine değiştirin. Sırf başka bir tema rengi oluşturmak için yolu çoğaltmayın.

Çok renkli bir logodaki her dolguyu currentColor ile değiştirmeyin. Bu işlem paleti doğası gereği ortadan kaldırır. Dosyanın rengi sprite olarak paketlenmeden önce de değişiyorsa daha önce ortaya çıkan bu sorunu ayırmak için SVG renk sorunlarını giderme rehberini kullanın.

Ayrıca sprite API'nizi, referans verilen yolların içine erişen rastgele sayfa seçicilerine dayandırmaktan kaçının. MDN, use içinde kopyalanan içeriğin stillendirme sınırlamalarını belirtir. Amaçlanan boyama davranışını kaynak çizime yerleştirin ve onu kullanan bileşeni test edin.

Çizimin içindeki yinelenen kimlikleri önleyin

Benzersiz symbol adları gereklidir, ancak dışa aktarılmış bir SVG kendi içinde başka kimlikler de barındırabilir: degradeler, maskeler, kırpma yolları veya referans verilen diğer tanımlar. MDN, her SVG id değerinin kendi düğüm ağacı içinde benzersiz olmasını gerektirir. Önceden ayrı olan iki dosya birleştirildiğinde bu kuralı ihlal edebilir.

Örneğin dışa aktarılmış bir yaprağın ve rozetin ikisinin de paint0 adlı bir degrade içerdiğini düşünün. Yaprağın degrade kimliğine ve onunla eşleşen referansa birlikte önek ekleyin:

Parça referansı hâlâ amaçlanan tanımı göstermelidir. MDN'nin fill örnekleri, degrade kimliğiyle url(#...) arasındaki bu ilişkiyi gösterir. Her iki referansı da yaprağın degradesine yöneltmek yerine rozete kendi önekini verin.

İki yoldan oluşan örneğimizin iç içe tanımları yok; bu nedenle ilk kontrol için kullanışlıdır. Gerçek bir dışa aktarımda, dosyaları birleştirmeden önce tüm kimliklerin ve yerel referansların envanterini çıkarın. Herhangi bir iyileştirici veya üretici çalıştıktan sonra sunulan sprite üzerinde bu envanteri yeniden çıkarın. Yalnızca dıştaki symbol öğesini yeniden adlandırmak, yinelenen iç kimlikleri çözmez.

Görünür her örneği kendi bağlamında adlandırın

Görünür “Garden” sözcüğünün yanındaki yaprak, düğmenin zaten verdiği bilgiyi tekrarlar. SVG'si aria-hidden="true" kullanır ve düğmenin adını metnin sağlamasına izin verir. Bu özniteliği etkileşimli düğmede değil, dekoratif SVG'de tutun. MDN'nin aria-hidden rehberi, dekoratif içeriği ele alır ve odaklanabilir öğeleri gizlememeniz konusunda uyarır.

Tek başına duran okun rolü farklıdır: yakınında metin olmadan yön bildirir. Dış SVG'si, MDN'nin gömülü bir SVG görselini adlandırma rehberine uygun olarak role="img" ve aria-label="Right direction" kullanır.

Etikete kullanım noktasında karar verin. Yeniden kullanılabilir bir yaprak, farklı arayüzlerde “Garden” (bahçe) veya “bitki bazlı” anlamına gelebilir veya yalnızca dekoratif olabilir. Son bileşenin erişilebilir adını tarayıcının erişilebilirlik inceleme araçlarıyla ve hedeflediğiniz yardımcı teknolojiyle test edin; yeniden kullanılabilir bir symbol tek başına bu bağlamı oluşturmaz.

Yalnızca kaynak dosyaları değil, sunulan sprite'ı da denetleyin

Bu özgün örneği aynı kökenden sunulan bir tarayıcı test düzeneğinde kontrol ettik. Yaprak turkuaz ve mercan renginde görüntülendi, geniş ok şeklini korudu ve bilerek eksik bırakılan bir parça referansı boş bir simge kutusu oluşturdu. Tarayıcının erişilebilirlik ağacında Garden düğmesi ve adlandırılmış ok yer aldı. Bu, bu test düzeneğinin kontrolüdür; farklı tarayıcılar veya ekran okuyucular için bir sertifikasyon değildir.

Paketlemeden sonra aynı küçük kontrol listesini uygulayın:

1. Dosya: sayfanın amaçlanan sprite'ı son URL'den yüklediğini doğrulayın.
2. Parça: büyük ve küçük harfler dâhil, her href parçasını sunulan symbol kimliğiyle karşılaştırın.
3. Sınırlar: kırpılma, iç boşluk ve en-boy oranı açısından küçük bileşenle büyütülmüş çizimi karşılaştırın.
4. Boyama: tek renkli bir simgeyi iki tema renginde görüntüleyin ve sabit renkli çizimleri ayrı inceleyin.
5. İç referanslar: önek eklenen boyama, maske ve kırpma referanslarının iyileştirme sonrasında hâlâ çözümlendiğini kontrol edin.
6. Anlam: etkileşimli her bileşenin adını ve anlam taşıyan bağımsız her görselin etiketini inceleyin.

Dosya yükleniyor ancak tek bir örnek boş kalıyorsa geometriyi değiştirmeden önce parça referansını kontrol edin. Aynı çizim sıradan bir SVG olarak da boşsa daha kapsamlı boş SVG kontrollerini izleyin. Büyütüldüğünde pikselli görünüyorsa sorunun sprite'tan kaynaklandığını varsaymadan önce gömülü raster görsel olup olmadığını inceleyin.

Tek kaynak bir PNG simge olduğunda

Basit bir simgenin yalnızca PNG sürümü kaldıysa paketlemeden önce PerfectVector ile bu PNG'yi SVG'ye dönüştürün. Ortaya çıkan silueti, boşlukları ve renk bölgelerini kaynakla karşılaştırarak inceleyin; ardından koordinat sınırlarını ve boyama kuralını onaylayın. Son olarak onaylanan çizime kararlı kimlikler verin ve sprite'a ekleyin. Dönüştürme, vektör çizimi sağlar; symbol adlarınızı, bileşenlerin anlamını veya sunum mimarisini seçmez.

Temiz bir özgün SVG varsa onu kullanın. Yeniden vektörleştirmek, bozuk bir parça referansını çözmeden bir şekil çıkarma adımı daha ekler. Kalan sorun paketlemede değil çizimdeyse SVG düzenleme ve hazırlama rehberlerine göz atın.

Sık sorulan sorular

SVG sprite'ımı doğrudan açtığımda neden boş görünüyor? Yalnızca symbol tanımları içeren bir sprite bu symbol öğelerini doğrudan görüntülemez. Boş belgeyi hasarlı çizim olarak değerlendirmeden önce doğru dosya yolu ve parça kimliğiyle bir SVG use örneği üzerinden test edin.

Her symbol aynı viewBox değerine mi ihtiyaç duyar? Hayır. Paketlerken onaylanmış her koordinat sistemini koruyun. Aynı tasarım sistemi ızgarasını paylaşan simgeler eşleşen sınırlar kullanabilir, ancak geniş bir symbol yalnızca viewBox sayıları değiştirilerek kare bir simgeye dönüşmez.

Sayfanın rengini değiştirmek neden simgemin rengini değiştirmiyor? Kaynağın boyama kuralını kontrol edin. Sabit bir dolgu, currentColor ile oluşturulmuş bir yoldan farklıdır. Bilinçli olarak çok renkli hazırlanmış çizimleri koruyun ve hangi dolguların veya konturların örneğin rengini devralacağını açıkça seçin.

Sprite'ı başka bir alan adına koyabilir miyim? Dış bir use referansının farklı kökenler arasında çalışacağını varsaymayın. Aynı kökenden sunulan bir test düzeneğiyle başlayın, ardından sunumu değiştirmeden önce gerçek sunucuyu ve hedef tarayıcıları test edin. Yerelde çalışan bir örnek, farklı köken desteğini kanıtlamaz.

Kaynaklar

1. MDN — symbol — yeniden kullanılabilir tanımlar ve dolaylı görüntüleme.
2. MDN — use — dış parçalar, stillendirme sınırları ve köken kısıtlamaları.
3. MDN — viewBox — koordinat sınırlarıyla görüntü alanı arasındaki ilişki.
4. MDN — color — SVG boyaması için girdi olarak currentColor.
5. MDN — id — belge ağacı içinde tanımlayıcıların benzersizliği.
6. MDN — fill — degrade URL'leri gibi boyama sunucusu referansları.
7. MDN — aria-hidden — dekoratif içerik ve odaklanabilir öğelerle ilgili uyarılar.
8. MDN — img role — anlam taşıyan bir görsel için etiketlenmiş dış SVG.

Onaylanmış iki simgeyle başlayın ve adlarını, sınırlarını ve renklerini gerçek bileşende test edin. Kaynaklardan biri yalnızca uygun bir raster görsel olarak mevcutsa SVG yollarını elde edin, çizimi inceleyin, ardından kabul ettiğiniz sonucu sprite'ınıza ekleyin.