SVG Optimize Etme Adımları: SVG Dosyası Nasıl Optimize Edilir?

Vektör grafikler web projelerinde ve dijital tasarımlarda yüksek çözünürlük kalitesi sunar; ancak çizim programlarından dışa aktarılan SVG dosyaları genellikle gereksiz XML açıklamaları, düzenleme meta verileri ve gereğinden fazla ondalık basamak içerir. Bu fazlalıklar dosya boyutunu artırarak sayfa yükleme sürelerini olumsuz etkileyebilir. Vektör dosyalarınızın boyutunu küçültmek için doğru parametreleri kullanarak temizleme ve yuvarlama adımlarını uygulayabilirsiniz.

SVG optimizasyonuna başlamadan önce

SVG işaretleme dilinde yer alan her etiket ve öznitelik toplam dosya boyutuna doğrudan etki eder. Tasarım araçları tarafından eklenen  veya <metadata> blokları tarayıcıda görsel bir değişiklik yapmadan dosyanın bayt hacmini büyütür. Ayrıca koordinat veya boyut değerlerinde yer alan çok uzun ondalık sayılar çoğu zaman insan gözünün fark edemeyeceği kadar küçük detaylar sunar.

İşleme başlamadan önce dosyanızın UTF-8 kodlamasında geçerli bir SVG kök etiketine sahip olduğundan emin olmanız gerekir. Çözülmüş boyutu en fazla 2 MB olan dosyalar doğrudan işlenebilir. Bu sürecin bir güvenlik filtresi olmadığını, dosya içindeki komut dosyalarını ya da harici bağlantıları temizlemediğini unutmamalısınız.

SVG optimize etme adımları

Dosya boyutunu pratik şekilde düşürmek için SVG Optimizasyonu aracını kullanarak şu adımları izleyebilirsiniz:

SVG dosyanızı yükleyin veya geçerli Base64 biçimindeki SVG metnini giriş alanına ekleyin.
Tasarım geçmişi ve telif gibi görsel olmayan notları temizlemek için açıklamaları kaldır seçeneğini işaretleyin.
Yazılım meta verilerini dosyadan ayıklamak için meta verileri kaldır onay kutusunu etkinleştirin.
Sayısal hassasiyet değerini 0 ile 6 arasında bir tam sayı olarak belirleyin. Çoğu web grafiği için varsayılan 2 değeri görsel bozulma oluşturmadan yeterli tasarruf sağlar.
İşlemi çalıştırın. Oluşan optimize edilmiş SVG kodunu kopyalayın veya güncellenen dosyayı indirin.

Vektör grafikleri farklı formatlara aktarmanız veya raster görsellere dönüştürmeniz gerektiğinde SVG - PNG Dönüştürücü aracından da yararlanabilirsiniz.

Sonuçları ve tasarruf oranını yorumlama

İşlem tamamlandığında panel üzerinde orijinal dosya boyutu, optimize edilmiş yeni boyut, bayt cinsinden fark ve yüzde olarak tasarruf oranı görüntülenir. Araç, etiketler arasındaki gereksiz boşlukları ve satır sonlarını temizler. Desteklenen sayısal değerler belirlenen hassasiyete göre yuvarlanırken gereksiz sıfırlar atılır.

Özellikle birden çok yol içeren karmaşık simgelerde ve illüstrasyonlarda boşlukların kaldırılması ile ondalık basamakların azaltılması belirgin bir bayt tasarrufu sağlar. Çıktıyı projenize eklemeden önce görsel öğelerin doğru konumlandığını ve eğrilerin bozulmadığını kontrol etmeniz önerilir.

Uygulamalı optimizasyon örneği

Bir web arayüzü için hazırlanan 18 KB boyutundaki bir simge dosyasında düzenleme geçmişine ait yorumlar ve meta veri etiketleri bulunmaktadır. Kullanıcı, açıklamaları ve meta verileri kaldırma seçeneklerini işaretler. Sayısal hassasiyet değerini 2 olarak belirleyerek işlemi başlatır.

İşlem sonucunda gereksiz XML açıklamaları temizlenir, boşluklar sıkıştırılır ve koordinatlar iki ondalık basamağa yuvarlanır. Dosya boyutu yaklaşık 11 KB seviyesine düşer. Çıktı panelinde güncel UTF-8 SVG metni, Base64 karşılığı ve tek ondalık basamaklı tasarruf yüzdesi net şekilde listelenir.

Sınırlamalar

Araç bir güvenlik temizleyicisi değildir; SVG içindeki komut dosyaları, bağlantılar ve olay işleyicileri güvenlik amacıyla ayıklanmaz.
Yuvarlama işlemi yalnızca desteklenen sayısal değerlere uygulanır; birim içeren değerler ve karmaşık yol tanımları değiştirilmeden korunabilir.
En fazla 2 MB boyutundaki UTF-8 SVG girdileri kabul edilir; harici varlık veya belge türü tanımları içeren dosyalar işlenmez.

Sık yapılan hatalar

Hassasiyet değerini 0 yaparak karmaşık eğrilerde ve küçük simgelerde görsel bozulmaya yol açmak.
Yüklenen SVG dosyasının geçerli bir XML kök etiketi barındırmaması veya bozuk metin içermesi.
Güvenlik kontrolü amacıyla bu aracı kullanıp dosya içindeki bilinmeyen komut dosyalarının silineceğini varsaymak.

Sıkça sorulan sorular

Hangi sayısal değerler yuvarlanır?

viewBox değerleri ile birimsiz genişlik, yükseklik, opaklık, koordinat ve çizgi kalınlığı gibi sayısal öznitelikler belirlenen basamak sayısına göre yuvarlanır.

Sayısal hassasiyet için hangi aralık kullanılabilir?

Hassasiyet değeri 0 ile 6 arasında bir tam sayı olmalıdır. Varsayılan değer 2 olarak uygulanır.

SVG içerisindeki zararlı betikler temizlenir mi?

Hayır. Bu araç dosya boyutu optimizasyonu içindir ve güvenlik temizleyicisi işlevi görmez. Betikler ve olay işleyicileri korunur.