SVG optimize edici

Bu araç hakkında

SVG (Scalable Vector Graphics) dosyaları şekilleri, yolları ve metni XML işaretlemesiyle tanımlar. Tasarım araçları, CMS dışa aktarımları ve elle kodlanmış simgeler, tarayıcının aynı görüntüyü oluşturmak için ihtiyaç duyduğundan çok daha fazla veri içeren SVG'ler üretir. SVG optimizasyonu, görsel çıktı normal boyutlarda aynı kalırken fazla işaretlemeyi — yorumları, düzenleyici meta verilerini, gereksiz grupları, koordinatlardaki gereksiz hassasiyeti ve kullanılmayan öznitelikleri — kaldırma sürecidir. PNG veya JPEG gibi raster formatların aksine SVG, sıkıştırma sonrasında düzenlenebilir ve çözünürlükten bağımsız kalır. İyi optimize edilmiş bir simge, tek bir görünür piksel kaybetmeden 40 KB'den 6 KB'ye düşebilir. Bu, her sayfa görüntülemesinde yüklenen logolar, arayüz simgeleri, illüstrasyonlar ve favicon'lar için optimizasyonu zorunlu kılar. Daha küçük dosyalar daha hızlı sayfa yüklemesi, mobil ağlarda daha düşük bant genişliği ve daha iyi Core Web Vitals puanları anlamına gelir. Arama motorları hızlı sayfaları ödüllendirir; kullanıcılar simgeler geç yüklendiğinde veya oluşturmayı engellediğinde fark eder. Optimize edilmiş SVG'ler, şişkin işaretleme ayrıştırıcıları bozabileceği veya paket boyutunu şişirebileceği HTML, React bileşenleri ve e-posta şablonlarına daha temiz gömülür. Üretim web siteleri CSS arka planlarında, satır içi <svg> etiketlerinde veya img öğelerinde SVG simgelerine referans verir. Bu dosyalardaki her kilobayt, özellikle katlanmanın üstünde birden fazla simge göründüğünde kritik oluşturma yoluna katkıda bulunur. Boşlukları kaldırmak, dönüşümleri birleştirmek ve doctype bildirimlerini çıkarmak, CSS veya JavaScript'e dokunmadan aktarım boyutunu azaltır. SVG favicon'ları link rel="icon" type="image/svg+xml" ile sunarsanız tarayıcılar agresif önbellekler — yalın bir dosya yeniden markalandığınızda daha hızlı güncellenir. React projeleri genellikle SVG'leri bileşen veya URL olarak içe aktarır. Şişkin kaynak dosyalar, yükleyiciler bunları dize olarak satır içi yaptığında JavaScript paketi ayrıştırma süresini artırır. Bir simgeyi bileşen kütüphanenize eklemeden önce tree-shaking ve code splitting etkili kalsın diye bir optimizatörden geçirin. Optimize işaretlemeyi .svg dosyasına veya SVGR hattına yapıştırdığınızda gerekli viewBox değerlerinin kaldığını doğrulayın — React uygulamaları duyarlı ölçekleme için viewBox'a güvenir. Modern tarayıcılar belge head'inden bağlanan SVG favicon'larını destekler. Dosya küçük ve geçerliyse Retina sekmelerinde ve sabitlenmiş kısayollarda net ölçeklenirler. Favicon SVG'leri kare olmalı, basit palet kullanmalı ve güvenlik nedeniyle harici referanslar veya betiklerden kaçınmalıdır. Optimize ettikten sonra eski Windows kabuklarını veya raster format bekleyen sosyal tarayıcıları desteklemeniz gerektiğinde ICO veya PNG'ye dönüştürün. Optimize bir SVG favicon, tüm favicon paketi iş akışı için mükemmel bir ana dosyadır. Tasarımcılar sık sık gömülü raster görüntüler, yollarda aşırı ondalık hassasiyet, yinelenen üst üste binen şekiller ve basitleştirilmiş öznitelikler olabilecek stil bloklarıyla SVG dışa aktarır. Illustrator bazen adlandırılmış katmanları group öğeleri olarak ekler; Figma dışa aktarımları xmlns öznitelikleri ve altı ondalık basamaklı kesirli koordinatlar içerir. viewBox olmadan unutulan width ve height duyarlı düzenleri bozar. Etkin bırakılan gizli katmanlar ve kırpma maskeleri görünmez geometri dışa aktarır. Figma'dan Kopyala olarak SVG kullanın veya simgeler kötü dönüştürülen konturlar kullanıyorsa Outline stroke ile dışa aktarın. Figma dosyaları genellikle her grupta fill-rule ve dönüşüm matrisleri içerir; optimizasyon güvenli olduğunda bitişik yolları birleştirir. Illustrator'da Minify veya Responsive SVG dışa aktarımı seçin, gereksiz font gömme devre dışı bırakın ve dışa aktarmadan önce görünümleri genişletin. Dışa aktardıktan sonra işaretlemeyi bu tarayıcı tabanlı optimizatöre yapıştırın. İşlem yerel olarak gerçekleşir — marka varlıklarınız asla bir sunucuya yüklenmez. Temizlenmiş dosyayı indirin veya sonucu doğrudan deponuza, CMS'inize veya favicon oluşturucu hattınıza kopyalayın. Üretim lansmanı için çok boyutlu paketlere ihtiyaç duyduğunuzda çıktıyı SVG'den ICO Dönüştürücümüz, SVG'den PNG Dönüştürücümüz veya Favicon Oluşturucumuz ile eşleştirin.

SSS