Blog · Üretim SVG’si
Daha küçük SVG, yalnızca aynı görsel olarak kalıyorsa yararlıdır.
Optimizasyonu körlemesine metin silme değil; geometri, stil, referans, erişilebilirlik ve güven sınırlarının sınanmış dönüşümü olarak ele alın.
Bir şey silmeden önce nelerin korunması gerektiğini belirleyin.
SVG; görünür geometri, yeniden kullanılan tanımlar, CSS bağlantı noktaları, metin alternatifleri, bağlantılar, animasyon, meta veri ve editöre özgü durum taşıyabilir. Bunların bir bölümü teslim varlığı için gereksizdir; bir bölümü ise varlığın çalışma nedenidir. Optimizasyon; görünüm, duyarlı boyutlandırma, etkileşim, erişilebilirlik ve desteklenen gömme yöntemleri için bir sözleşmeyle başlar.
Yalnız kaynak bayt sayısını ölçmeyin. Ağ sıkıştırması yinelenen metinden yararlanırken görüntüleme maliyetini öğe sayısı, path karmaşıklığı, filtreler, maskeler ve boya etkileri belirler. Her şekli tek ve dev bir path içinde birleştirmek etiket sayısını azaltabilir; buna karşılık düzenlemeyi, erişilebilirliği, etkileşim sınamasını veya parça parça görüntülemeyi kötüleştirebilir.
Referanslar ve kimlikler bir bağımlılık grafiği kurar.
Gradyanlar, kırpma yolları, maskeler, filtreler, işaretçiler, semboller ve use öğeleri çoğunlukla parça adresleriyle kimliklere başvurur. CSS seçicileri, aria-labelledby, aria-describedby ve bağlantılar da aynı kimliklere bağlı olabilir. Bir kimliği güvenli biçimde yeniden adlandırmak veya kaldırmak, style öğeleriyle niteliklerin içindeki başvurular dâhil bütün referansların güncellenmesini gerektirir.
Satır içi SVG’ler aynı HTML belgesini paylaşır ve kopyalanan bileşenler gradient ya da clip gibi genel kimlikleri yeniden kullandığında çakışabilir. Her varlığa özgü kimlik öneki, bir ikonun başka ikonun tanımını çözmesini engeller. Harici SVG dosyaları ayrı belge kapsamına sahiptir; doğru strateji dosyanın nasıl gömüleceğine bağlıdır.
- Tanımları silmeden önce URL parçalarını izleyin
- CSS, betik, bağlantı veya erişilebilirlik ilişkilerinin kullandığı kimlikleri koruyun
- Bir tanımı yalnız bütün belge denetlendikten sonra kullanılmıyor sayın
Stilleri yalnız kalıtım eşdeğer kalıyorsa birleştirin.
Sunum nitelikleri ve CSS özellikleri kademeye ve kalıtıma katılır. Birkaç alt öğedeki fill değerini gruba taşımak doğru olabilir; ancak hiçbir alt öğe değeri geçersiz kılmıyorsa ve başvurulan hiçbir örnek farklı bir kalıtılmış değere bağlı değilse. currentColor özellikle ikonlarda yararlıdır; çevredeki arayüzün SVG’yi yeniden yazmadan rengi sağlamasına izin verir.
Her stili satır içi niteliklere çevirmek tekrarı artırabilir ve tema sınıflarını etkisiz bırakabilir. Her niteliği style bloğuna taşımak ise yalıtılmış yeniden kullanımı zorlaştırabilir. Teslim bağlamına uygun temsili seçin; ardından kalıtılan fill, stroke, opacity, vektör etkileri, işaretçiler ve özel özellikleri sınayın.
Erişilebilirlik, görselin anlamına ve gömülme biçimine bağlıdır.
Dekoratif bir SVG, gereksiz gürültü oluşturmaması için yardımcı teknolojilerden gizlenmelidir. Anlamlı bir satır içi görselin erişilebilir adı olmalıdır; bu ad çoğunlukla aria-labelledby ile ilişkilendirilmiş title veya doğrudan aria-label ile sağlanır, desc ise daha uzun açıklama taşıyabilir. Karmaşık diyagramlar ayrıca görünür çevre metnine ihtiyaç duyar; gizli bir açıklama bütün ilişkilerin ve verinin yerini tutamaz.
SVG bir HTML img öğesiyle yükleniyorsa web sayfasındaki temel alternatif img öğesinin alt metnidir. Satır içi SVG kendi anlamsal yapısını açar; rol, etiket ve odaklanabilir etkileşimli öğeler kullanabilir. Boş title veya desc öğelerini korumayın: yararlı alternatifler yerine adsız nesneler oluşturabilirler.
- Dekoratif görsel: erişilebilirlik ağacından çıkarın
- Anlamlı görsel: kısa ve açık bir erişilebilir ad sağlayın
- Karmaşık bilgi: eşdeğer görünür açıklama sağlayın
Güvenilmeyen SVG’yi etkin içerik olarak değerlendirin.
SVG, XML tabanlı bir grafik biçimidir; ancak betikler, olay nitelikleri, foreignObject içeriği, bağlantılar, stiller ve harici kaynak referansları da taşıyabilir. Tarayıcı kısıtları SVG’nin görsel olarak, satır içinde veya object ya da iframe belgesi olarak kullanılmasına göre değişir. Görsel önizlemede zararsız görünen bir dosya, başka gömme bağlamında ek yetenekler kazanabilir.
Güvenilmeyen SVG’yi birkaç metin değiştirme işlemiyle temizlemeyin. Bakımı yapılan bir temizleyiciyle ayrıştırın ve kullanım amacına uygun açık bir izin listesi uygulayın. Betikleri ve olay işleyicilerini kaldırın; adres taşıyan nitelikleri sınırlandırın; foreignObject ile harici kaynaklara izin verilip verilmeyeceğini belirleyin; sonucu beklenen içerik türü ve güvenlik politikasıyla sunun.
Sonucu hem görsel hem belge olarak doğrulayın.
Önce ve sonra görüntülerini birden fazla boyutta ve arka planda karşılaştırın. viewBox sınırlarını, ince konturları, birleşimleri, kırpmayı, maskeleri, filtreleri, gradyanları, işaretçileri, metni ve saydam kenarları denetleyin. Nominal viewBox dışındaki geometri, kontur veya filtre etkileriyle hâlâ görünür sonuca katılabilir; otomatik kırpma görünen pikselleri silebilir.
Ardından referansları, erişilebilir adları, gerekiyorsa klavye davranışını ve yasak etkin içeriğin bulunmadığını doğrulayın. Kaynak varlığı ve optimizasyon ayarlarını yeniden üretilebilir biçimde saklayın. Neyi kaldırdığını açıklayamayan veya oluşan sözleşmeyi kanıtlayamayan optimizasyona güvenmek zordur.
- Hedef boyutlarda ve yüksek yakınlaştırmada görüntüleyin
- Açık, koyu ve saydam arka planlarda sınayın
- Parça referanslarını ve kimlik benzersizliğini denetleyin
- Gerçek gömme biçimi için erişilebilirlik ve güvenlik kontrolleri çalıştırın