Hızlı ve gizlilik odaklı SVG optimize edici
Ölçeklenebilir Vektör Grafikleri (SVG'ler), web üzerindeki net ve çözünürlükten bağımsız ikonlar ve illüstrasyonlar için standarttır. Ancak bir tasarım aracından SVG dışa aktardığınızda, elde edilen dosya web ortamı için nadiren optimize edilmiştir. Bu SVG küçültme aracı, görsel kaliteden ödün vermeden vektör grafiklerinizi anında temizlemenizi, gereksiz kodları çıkarmanızı ve dosya boyutunu küçültmenizi sağlar.
Bu araç tamamen tarayıcınızda çalıştığı için grafikleriniz hiçbir sunucuya yüklenmez. Özel logolar, henüz yayınlanmamış ürün tasarımları veya gizli şemalar içeren SVG dosyalarını güvenle sıkıştırabilirsiniz. İşlem anında gerçekleşir; dosya boyutundaki kazancınızı gerçek zamanlı gösterir ve grafiklerinizin bozulmadığından emin olmanız için görsel bir öncesi-sonrası karşılaştırması sunar.
SVG dosyalarını neden sıkıştırmalısınız?
Piksel verilerini depolayan raster görsellerin (JPEG veya PNG gibi) aksine, SVG'ler temel olarak şekillerin nasıl çizileceğine dair matematiksel talimatlar içeren XML metin dosyalarıdır. Vektör editörleri bu dosyaları oluştururken, genellikle tarayıcıların görseli işlemek için ihtiyaç duymadığı büyük miktarda gereksiz veri ekler.
SVG dosya boyutunu artıran yaygın nedenler şunlardır:
- Editör meta verileri: Dosyayı oluşturan yazılıma özgü, yalnızca düzenleme amacıyla kullanılan etiketler ve nitelikler.
- Yorumlar ve boş öğeler: Geliştirici notları, boş gruplar (
<g>) ve son görsel çıktıya hiçbir katkısı olmayan gizli katmanlar. - Aşırı hassasiyet: Gereksiz yer kaplayan, altı veya daha fazla ondalık basamağa sahip yol koordinatları (örn.
14.123456). - Varsayılan nitelikler: Tarayıcının varsayılan davranışıyla eşleşen ve açıkça belirtilmesine gerek olmayan stiller ve nitelikler.
Bir SVG küçültücü kullanarak bu gizli metinlerden kurtulabilirsiniz. SVG dosya boyutunu küçülttüğünüzde web sayfalarınız daha hızlı yüklenir, daha az bant genişliği harcar; böylece genel site performansınız ve SEO sıralamanız artar.
Çevrimiçi SVG nasıl küçültülür
Bu araç, optimizasyon süreci üzerinde ince ayar yapabilmeniz için özelleştirilebilir çeşitli seçenekler sunar. Son grafiği nasıl kullanmayı planladığınıza bağlı olarak, dosya boyutu ile kod okunabilirliği arasındaki mükemmel dengeyi kurmak için bu ayarları değiştirebilirsiniz.
Ondalık hassasiyeti
Vektör yolları koordinatlar kullanılarak çizilir. Tasarım yazılımları genellikle bu koordinatları aşırı hassasiyetle dışa aktarır ve bu da uzun sayı dizilerine neden olur. Ondalık hassasiyetini (ondalık basamak sayısını) düşürerek dosyanızın karakter sayısını önemli ölçüde azaltabilirsiniz. Web ikonları için genellikle 1 veya 2 hassasiyeti mükemmeldir. Görsel önizlemede eğrilerin tırtıklı göründüğünü veya şekillerin kaydığını fark ederseniz, görüntü tekrar doğru görünene kadar hassasiyet kaydırıcısını artırmanız yeterlidir.
Çok geçişli optimizasyon
Optimizasyon genellikle katmanlı bir süreçtir. Gereksiz bir öğeyi kaldırmak, bir üst öğenin boş kalmasına neden olabilir ve bu sayede o da kaldırılabilir. "Çok geçişli" ayarını etkinleştirmek, optimize ediciye dosya boyutu daha fazla küçültülemeyecek duruma gelene kadar temizlik işlemlerini tekrar tekrar çalıştırmasını söyler. Bu, mümkün olan en küçük çıktıyı garanti eder.
Boyutları kaldır
Varsayılan olarak birçok SVG, sabit width ve height nitelikleriyle (örn. width="500px") dışa aktarılır. Bu, görüntüyü belirli bir boyuta kilitlerken duyarlı web tasarımını zorlaştırır. "Boyutları kaldır" seçeneğini işaretlemek, viewBox değerini korurken bu nitelikleri temizler. Bu sayede SVG, içinde bulunduğu kapsayıcının CSS'ine göre akıcı bir şekilde ölçeklenerek modern web tasarımlarında kullanımını çok daha kolay hale getirir.
Güzel biçimlendir
Amacınız mutlak minimum dosya boyutuysa, bu seçeneği işaretsiz bırakın. Araç, tek ve yoğun bir kod satırı çıktısı verecektir. Ancak, manuel olarak düzenlemeyi, animasyon eklemeyi veya doğrudan bir HTML belgesine gömmeyi planladığınız bir SVG'yi temizliyorsanız, "Güzel biçimlendir" seçeneğini işaretlemek çıktıyı düzenli girintiler ve satır sonlarıyla biçimlendirecektir.
Vektör grafikleri için en iyi uygulamalar
SVG'lerinizi optimize etmek, hızlı ve erişilebilir bir web sitesi oluşturmanın sadece bir adımıdır. Vektör grafikleriyle çalışırken, bunların nasıl kullanılacağını göz önünde bulundurun. SVG'yi doğrudan HTML içine gömüyorsanız, HTML dosya boyutunu küçük tutmak için SVG küçültme (minify) işlemi kritik önem taşır. Maksimum performans için tüm sayfanızı bir HTML Sıkıştırma veya CSS Sıkıştırma aracından geçirmek isteyebilirsiniz.
Optimizasyon sonrasında görsel önizlemeyi mutlaka kontrol edin. Çoğu SVG sorunsuz bir şekilde sıkıştırılsa da karmaşık renk geçişleri veya hassas kırpma yolları içeren detaylı çizimler, orijinal görünümünü korumak için daha yüksek ondalık hassasiyet (float precision) gerektirebilir. Yerleşik öncesi ve sonrası görüntüleyici, küçültülmüş dosyanızı indirmeden önce istenmeyen değişiklikleri fark etmenizi kolaylaştırır.
Son olarak, SVG'ler logolar, ikonlar ve düz çizimler için mükemmel olsa da karmaşık fotoğraflar için uygun değildir. Ağırlıklı olarak gömülü raster görsellerden (base64 kodlu JPEG'ler gibi) oluşan bir SVG'niz varsa, optimizasyonun pek bir etkisi olmayacaktır. Bu gibi durumlarda, bir SVG'den PNG'ye dönüştürücü kullanarak grafiği tamamen dönüştürmek daha iyi bir seçenek olabilir.