SVG Dosya Boyutu Nasıl Küçültülür?

SVG vektörel bir format; teorik olarak piksel boyutundan bağımsızdır, her çözünürlükte netliğini korur ve bunun bir dosya boyutu sorunuyla ilişkisi olmadığı izlenimi verir. Ama Illustrator'dan, Figma'dan ya da Inkscape'ten çıkan bir SVG dosyasını kontrol ettiğinizde görüntü içeriği değil, XML kütlesi beklenmedik biçimde büyük olabilir. Aynı içeriğin PNG versiyonuyla karşılaştırıldığında SVG'nin daha büyük çıkması seyrek değildir; özellikle karmaşık illüstrasyonlarda ve olduğu gibi export edilmiş logolarda bu fark belirgin hale gelir.

SVG bir resim dosyası değil, metin tabanlı bir XML belgesidir. İçindeki her karakter, her attribute, her yorum satırı dosya boyutuna katkıda bulunur. Tasarım araçları bu dosyaları üretirken önceliği editör uyumluluğuna ve geri düzenlenebilirliğe verir; boyut optimizasyonuna değil. Dolayısıyla tasarım ortamından çıkan SVG ile tarayıcıya gönderilecek SVG arasında önemli bir fark olması beklenen, istisnai olmayan bir durumdur.

Bu farkı kapatmanın birkaç farklı yolu vardır: export ayarlarından başlamak, otomatik temizleme araçları kullanmak, manuel müdahale yapmak ve dosyanın HTML'e nasıl dahil edildiğini gözden geçirmek. Her adım birden uygulanmak zorunda değildir; projenin ölçeğine ve dosyanın içeriğine göre hangi müdahalenin anlamlı olduğu değişir.

Tasarım araçlarının dosyaya neler eklediği

Her araç SVG dosyasına kendi parmak izini bırakır. Adobe Illustrator kendi işaretleme namespace'lerini, ai: prefix'li editöre özgü attribute'ları ve zaman zaman çalışma alanının dışında kalmış ama path verisi olarak dosyada duran öğeleri ekler. Inkscape, sodipodi: ve inkscape: prefix'li çok sayıda attribute üretir; bu verilerin tamamı tarayıcı tarafından yok sayılır ama dosyada yer kaplar. Figma görece daha temiz export yapar; ancak gölge, bulanıklık veya çok katmanlı efektler <filter> tanımlarına dönüştüğünde dosya boyutu beklenmedik biçimde büyüyebilir.

Araçların neredeyse tamamı <metadata> bloğu ekler. Bu blok dosyanın ne zaman oluşturulduğunu, hangi araçla üretildiğini ve bazen lisans bilgisini içerir. Tarayıcı bu bilgiyle hiçbir şey yapmaz. Yorum satırları da benzer bir kategoridedir: bazı araçlar dosyanın başına otomatik yorum bloğu ekler ve bu satırlar ekranda görünmez ama dosyanın karakter sayısını artırır.

<defs> bölümü içinde tanımlanan ancak hiçbir yerde referans verilmeyen gradyan, filtre veya clip-path tanımları da yaygın bir şişme kaynağıdır. Tasarım sürecinde deneme amaçlı oluşturulan, sonra kullanılmayan öğelerin tanımları <defs> içinde kalmaya devam edebilir. Karmaşık bir filtre tanımı tek başına birkaç kilobaytlık yer tutabilir; birden fazla kullanılmayan tanım biriktiğinde bu miktar hızla artar.

SVG'nin logo, ikon ve arayüz bileşenleri için neden tercih edildiğini anlamak bu optimizasyon kararını netleştirir: format içeriğe uygun seçilmişse temizlik maliyeti karşılanmaya değer; yanlış içerik için seçilmişse ne kadar optimize edilirse edilsin dosya verimli olmaz.

SVGO ile otomatik temizleme

SVGO (SVG Optimizer), Node.js tabanlı açık kaynaklı bir araçtır. Komut satırından, Node.js API'si üzerinden ya da web arayüzü olan SVGOMG üzerinden çalıştırılabilir. Temel prensibi şudur: dosyayı parse eder, gereksiz olduğunu belirlediği öğeleri kaldırır ve dosyayı daha küçük boyutla yeniden yazar.

npx svgo logo.svg -o logo-optimize.svg

Varsayılan preset çalıştırıldığında şu işlemler otomatik olarak gerçekleşir: yorum satırları silinir, kullanılmayan namespace tanımları temizlenir, boş <g> grupları kaldırılır, path koordinatlarındaki fazla ondalık basamak azaltılır ve gereksiz sıfırlar atılır. Basit bir logoda bu işlemler pratikte yüzde elli ile seksen arasında boyut azalması üretebilir. Karmaşık bir illüstrasyonda kazanım daha sınırlı kalır çünkü asıl ağırlık anlamlı path verisinden gelir ve bu verinin büyük bölümü kaldırılamaz.

Dikkat edilmesi gereken bir nokta var: bazı plugin'ler id attribute'larını kısaltır, CSS sınıf isimlerini yeniden adlandırır veya path'leri birleştirir. SVG animasyon içeriyorsa ya da JavaScript getElementById gibi bir yöntemle dosya içindeki belirli öğeleri hedefliyorsa bu dönüşümler beklenmedik kırılmalara neden olabilir. Bu tür dosyalar için varsayılan preset yerine yalnızca güvenli plugin'leri etkinleştiren özel bir konfigürasyon kullanmak daha sağlıklıdır. SVGO'nun konfigürasyon dosyasında hangi plugin'lerin aktif olacağı açıkça tanımlanabilir; böylece her proje için farklı bir optimizasyon profili oluşturulabilir.

Manuel müdahalede güvenli adımlar

Otomatik araç çalıştırmak her zaman pratik olmayabilir. Tek bir dosya için kurulum gerektiren durumlar, araç erişiminin kısıtlı olduğu ortamlar ya da yalnızca belirli öğelere müdahale edilmesi gereken durumlar manuel temizliği anlamlı kılar. SVG metin tabanlı bir format olduğundan herhangi bir metin editöründe açılabilir ve düzenlenebilir.

Kaldırılması genellikle güvenli olan öğeler şunlardır: dekoratif ikonlarda zorunlu olmayan <title> ve <desc> etiketleri, <metadata> bloğunun tamamı, yorum satırları ve data-* ile başlayan editöre özgü attribute'lar. xmlns:xlink namespace tanımı modern tarayıcılarda artık gerekmiyorsa kaldırılabilir; ancak eski tarayıcı desteği hâlâ gerekiyorsa bu namespace dokunulmamalıdır.

Path koordinatlarındaki ondalık hassasiyeti azaltmak önemli bir kazanım kaynağıdır. Illustrator 6 ondalık basamaka kadar koordinat üretebilir; çoğu kullanım için 1 ya da 2 basamak yeterlidir. Bir d attribute'undaki M 123.456789 45.678901 değerini M 123.5 45.7 olarak kısaltmak görsel sonucu pratikte değiştirmez ama metin uzunluğunu belirgin biçimde azaltır. Bu işlemi onlarca path içeren bir dosyada elle yapmak zahmetli olsa da SVGO'nun convertPathData plugin'i bunu otomatik olarak yönetir.

Katman yapısı ve gereksiz gruplama da kontrol edilmesi gereken bir alandır. Tasarım araçları her katmanı bir <g> öğesine çevirir. Görsel sonuca katkısı olmayan, yalnızca organizasyon amacıyla oluşturulan iç içe gruplar kaldırılabilir. Boyut küçültmenin temel mantığı burada da geçerlidir: görsel kaliteyi etkilemeyen her veri kaldırılabilir veridir.

Figma ve tasarım araçlarından temiz export

Optimizasyon yalnızca sonradan yapılan bir müdahale olmak zorunda değildir. Export aşamasında doğru ayarlar seçilirse oluşan dosya baştan daha temiz olur ve sonraki temizlik adımları daha az iş üretir.

Figma'da SVG export yapılırken "Include 'id' attribute" seçeneği kapatılabilir; bu, her katmana otomatik atanan uzun id değerlerini dosyadan dışarıda bırakır. "Outline text" aktifse yazılar path'e dönüştürülür ve harici font bağımlılığı ortadan kalkar, ancak bu dönüşüm dosya boyutunu artırabilir. Metin çok sayıda karakter içeriyorsa font'u referans olarak bırakmak ve font'u ayrıca yönetmek daha verimli olabilir.

Illustrator'da "Save as SVG" yerine "Export as SVG" tercih edilmeli ve açılan pencerede "Minify" seçeneği aktif edilmelidir. Styling seçeneği "Presentation Attributes" olarak ayarlandığında inline stil bloğu yerine her öğeye attribute yazılır; bu bazı durumda daha temiz bir çıktı verir. "Responsive" seçeneği işaretlenirse sabit width ve height attribute'ları çıktıya eklenmez, viewBox korunur ve dosya her boyuta uyum sağlayabilir hale gelir.

Inkscape'te "Plain SVG" formatıyla export yapmak, Inkscape'e özgü sodipodi: ve inkscape: namespace'lerini çıktıya dahil etmez. Bu seçenek tek başına dosya boyutunda kayda değer bir azalma sağlar ve SVGO ile birleştirildiğinde sonuç oldukça temiz bir dosya üretir.

Inline SVG ile harici SVG arasındaki boyut farkı

SVG dosyasını HTML'e dahil etme biçimi de efektif boyutu etkiler. <img src="logo.svg"> olarak kullanılan bir SVG harici kaynak olarak istenir; tarayıcı HTTP isteği yapar, dosya önbelleğe alınabilir ve başka sayfalarda da önbellekten sunulur. Inline SVG ise doğrudan HTML belgesine eklenir; ek HTTP isteği gerekmez ama her sayfada HTML'in boyutunu artırır ve önbelleğe ayrıca giremez.

Tek bir alanda kullanılan bir logoda harici referans çoğu durumda daha verimlidir: dosya bir kez indirilir, önbelleğe alınır ve sonraki sayfa görüntülemelerinde tekrar yüklenmez. Buna karşılık aynı ikon seti onlarca farklı yerde kullanılıyorsa ve ikonların CSS fill rengiyle değiştirilmesi gerekiyorsa inline SVG tercih edilebilir; ancak bu seçim sayfa boyutunu doğrudan etkiler.

Görsel SEO açısından harici SVG'nin alt attribute'u taşıyan bir <img> etiketi üzerinden sunulması tercih edilir; inline SVG'nin erişilebilirlik ve SEO işaretlemesi daha dikkatli yönetim gerektirir. Her iki yöntemin de kendi trade-off'ları vardır ve proje bağlamına göre tercih değişir.

Dosya boyutunu daha da düşürmek için gzip veya Brotli sıkıştırması ayrı bir kazanım kaynağıdır. SVG metin tabanlı olduğundan sıkıştırmaya son derece elverişlidir. Düzgün optimize edilmiş bir SVG, sunucu sıkıştırmasıyla birlikte kullanıldığında ikili formatlara kıyasla ağ üzerindeki etkin boyutu çok küçük kalabilir. Sıkıştırma mantığını raster formatların ötesinde düşünmek bu noktada işe yarar: SVG'nin metin yapısı sıkıştırmayı fotoğraflardan çok daha verimli kılar.

SVG dosya boyutu büyük ölçüde iş akışının bir sonucudur. Tasarım araçları editör öncelikli çıktı üretir ve bu çıktı web'e doğrudan uygun değildir. Bu boşluğu kapatmak için önce export aşamasında daha temiz başlamak, ardından SVGO ile otomatik temizlik yaptırmak ve gerektiğinde manuel müdahale eklemek yeterlidir.

Hangi adımın ne kadar kazanım sağlayacağı dosyanın içeriğine bağlıdır. Düz geometriden oluşan bir logoda SVGO tek başına dramatis bir fark yaratabilir. Onlarca katman, filtre ve gradyan içeren karmaşık bir illüstrasyonda ise asıl ağırlık path verisinden geldiğinden optimizasyon kazancı sınırlı kalır; bu durumda formatı yeniden değerlendirmek — söz konusu içerik için SVG gerçekten en uygun seçim mi — daha verimli bir yol olabilir. Format seçimi her zaman içeriğin doğasıyla başlar; optimizasyon ise bu seçimin ardından gelir.

Ölçek de belirleyicidir. Tek bir logo dosyası için saatler harcamak ile on binlerce SVG içeren bir sistemi otomatik pipeline'a bağlamak farklı problemlerdir. Küçük projeler için SVGOMG web arayüzü pratik ve kurulum gerektirmeyen bir başlangıç noktasıdır. Büyük sistemlerde SVGO'yu derleme sürecine entegre etmek, her dosyayı ayrıca işleme gereksinimini ortadan kaldırır ve optimizasyonu operasyonel bir zorunluluk olmaktan çıkarır.