SVG Araçları — Optimizer + SVG'den PNG / JPG / WebP / PDF

SVG, modern web'in logolarını, simgelerini, grafiklerini ve illüstrasyonlarını bir arada tutan formattır ve buna rağmen çoğu yazma iş akışı, dosyayı üretime ulaşana kadar zayıf bir durumda bırakır. Tasarımcılar Figma, Illustrator, Sketch veya Inkscape'ten SVG dışa aktarır ve sonuçta ortaya çıkan dosyalar genellikle olması gerekenden %30–80 daha büyüktür — editöre özel meta veri, gereksiz XML işleme talimatları, gizli katmanlar, üretilen yorumlar, hiçbir şeyin başvurmadığı ID'ler, düzleştirilebilen dönüşüm matrisleri, birleştirilebilen yollar ile dolu. Elle optimizasyon sıkıcıdır. Kanonik çözüm SVGO'dur, on yıldan fazla süredir endüstri standardı SVG optimize edici olan bir Node.js kütüphanesi ve onun kanonik hosted UI'ı Jake Archibald'ın SVGOMG'si olmuştur. Bu araç aynı SVGO motorunun üzerine inşa eder ve dönüştürme tarafını ekler — SVG'den PNG, JPG, WebP ve PDF'ye — ki SVGOMG bunu kasıtlı olarak dışarıda bırakır, böylece tüm SVG teslim iş akışı tek bir sayfada gerçekleşebilir.

Optimizer tarafı gerçek dünya iş akışlarına eşlenen üç preset gönderir. Safe yalnızca meta veri sıyıran eklentileri çalıştırır: yorumları, editör namespace verilerini, XML işleme talimatını, boş öğeleri ve boş öznitelikleri kaldırır ve satır içi `<style>` bloklarını sıkıştırır. Yollarınıza, ID'lerinize veya görsel yapınıza dokunmaz, ki bu SVG'nin daha sonra tekrar düzenleneceği veya dosyanın kararlı tanımlayıcılara bağlı betikli manipülasyon kullandığı durumlarda doğru seçimdir. Default SVGO'nun `preset-default` ayarını çalıştırır, bir önemli üzerine yazma ile — `removeViewBox` devre dışı bırakılmıştır, çünkü `viewBox` özniteliğini düşürmek HTML ve CSS'te duyarlı boyutlandırmayı bozar ve SVGO'nun bunu kaldırma varsayılanı, üretimde birçok mühendisin çarptığı bir tuzaktır. Aggressive varsayılan preseti ekstra optimizasyonlarla katmanlar: `convertStyleToAttrs` daha iyi gzip sıkıştırması için CSS'i XML özniteliklerine taşır, `convertShapeToPath` ve `mergePaths` rect/circle/ellipse öğelerini daraltır ve bitişik yolları birleştirir, `sortAttrs` sıkıştırma için byte düzeyinde tekrarı iyileştirir, `removeDimensions` SVG yerine host'un boyutu kontrol etmesine izin verir, `removeOffCanvasPaths` görünür viewBox dışındaki geometriyi düşürür ve `reusePaths` aynı yol verisini yeniden kullanılabilir tanımlara çoğaltır.

SVGO tamamen tarayıcınızda çalışır. Kütüphane özel bir tarayıcı paketi (`svgo/browser`) gönderir, bu sayfa onu yalnızca Optimize sekmesine geçtiğinizde lazy yükler, böylece Omnvert'in geri kalanı yaklaşık 500 KB indirme maliyetini önden ödemez. Bir kez yüklendiğinde motor bellekteki byte'lara karşı çalışır: hiçbir sunucuya hiçbir şey gönderilmez, hiçbir şey günlüğe kaydedilmez ve tarayıcı DevTools panelinde ağ etkinliğinin yokluğunu doğrulayabilirsiniz. Hassas materyal için — dahili mockup'lar, yayınlanmamış marka, ücretli müşteri varlıkları, NDA kapsamındaki her şey — bu önemlidir. Çoğu çevrimiçi SVG optimize edici dosyanızı bir backend'e yükler ve sonucu döndürür; SVGOMG'nin kendisi tarayıcıda çalışır, ama dönüştürme tarafını eklemek başka bir sekme, başka bir yükleme ve güvenmek için başka bir tedarikçi anlamına gelir. Bu araç bunu tek bir sayfada aynı gizlilik garantileriyle birleştirir.

Dönüştürme tarafı, SVG temiz olduktan sonra tasarımcıların ve mühendislerin gerçekten sorduğu dört soruya yanıt verir. SVG → PNG evrensel raster geri dönüşüdür, bir vektörün gidemeyeceği her yerde kullanılır: eski e-posta istemcileri (Outlook hâlâ inline SVG render etmiyor), eski CMS küçük resimleri, sosyal medya için OG görselleri, uygulama mağazası ekran görüntüleri. SVG → JPG SVG içeriği fotoğraf benzeri olduğunda ve PNG'nin üreteceğinden daha küçük bir dosyaya ihtiyacınız olduğunda doğru seçimdir — JPEG'in kayıplı sıkıştırması, sürekli ton içerikte PNG'nin kayıpsız deflate'sini 5–10× yener ve anlamlı bant genişliği tasarrufu için küçük bir kalite kaybı takas edersiniz. SVG → WebP modern her iki dünyanın en iyisidir: JPEG ucunda kayıplı sıkıştırma, PNG ucunda alfa ile kayıpsız, 2020'den beri her modern tarayıcı tarafından destekleniyor. Bugün çoğu üretim raster çıktısı için WebP doğru varsayılandır. SVG → PDF baskı ve arşivleme formatıdır: temiz, vektör kalitesinde çıktı, herhangi bir zoom seviyesinde hayatta kalır ve tasarım araçlarına, doküman iş akışlarına ve mühendislik dokümantasyonuna girer.

Rasterleştirmenin kapakta nasıl çalıştığı çıktınızın kalitesini doğrudan etkilediği için bir paragraf değer. Tarayıcı SVG kod çözmeyi `Image` ve `<canvas>` API'leri aracılığıyla sergiler: SVG metninin Blob URL'si bir `Image`'e yüklenir ve görsel hedef boyutlarda bir canvas öğesine çizilir. Sonra canvas, `canvas.toBlob` aracılığıyla JPEG, PNG veya WebP olarak yeniden kodlanır. Ayarladığınız boyutlar hem canvas boyutunu hem kodlanmış raster'ı yönlendirir, dolayısıyla yüksek-DPI ekranlarda keskin çıktı için görüntülenen boyutun 2× veya 3× katında render etmelisiniz. Bu sayfadaki Scale kontrolü tam olarak bunu yapar — SVG'yi aynı tutarken canvas boyutlarını çarpar, ki bu Retina ekranlarında matematiği yapmanıza gerek kalmadan keskin kalan bir çıktı üretir. PDF için sayfa seçilen ölçekte canvas'a render eder, PNG'ye kodlar ve `pdf-lib` kullanarak puan cinsinden boyutlandırılmış (baskı birimi, 1 px ≈ 0.75 pt) yeni bir PDF dokümanına PNG'yi gömer. Sonuç, doğru fiziksel boyutlarda yazdırılan ve her PDF görüntüleyicide aynı şekilde render edilen tek sayfalık bir PDF'tir.

Basit tarayıcı boru hattının tam olarak çözemediği SVG ile ilgili incelikler vardır ve bunlar hakkında dürüst olmak, var olmadıklarını iddia etmekten daha kullanışlıdır. İlk olarak, sistem fontları: bir SVG `font-family: "Inter"` bildirdiğinde ve Inter render edici makinede yüklü olmadığında, tarayıcı varsayılan bir fonta geri döner ve rasterleştirilmiş çıktı yazma aracından farklı görünür. Sayfa satır içi font-family bildirimlerini algılar ve dışa aktarmadan önce tasarım aracınızda metni outline'a dönüştürmeyi seçebilmeniz için bir uyarı yüzeye çıkarır. İkinci olarak, harici kaynaklar: SVG'ler bazen mutlak URL'ler aracılığıyla görsellere, geçişlere veya filtrelere atıfta bulunur (https://'ye xlink:href, `<image href="https://…"/>`, CSS'te `url(https://…)`). Tarayıcı bunların render edilmesi için ağ getirmesi ve CORS-izin veren başlıklar gerektirir; bunlar yokken varlık sessizce render olmaz. Sayfa harici referansları algılar ve sizi uyarır. Üçüncü olarak, betikler: SVG içindeki `<script>` öğeleri bazı render ediciler tarafından yürütülür ama `<canvas>` rasterleştirmesi tarafından değil; SVGO bunları varsayılan olarak kaldırır ve mevcut olduklarında bir uyarı yüzeye çıkarırız. Dördüncü olarak, karmaşık filtreler ve clipPath'ler: çoğu modern tarayıcı bunları iyi işler, ama çok eski veya alışılmadık filtre zincirleri motorlar arasında biraz farklı çıktı üretebilir.

Optimizer tarafında SVGO'nun varsayılanları hakkında bilinmeye değer tek bir gerçek vardır. SVGO 4 — 2024'te yayınlandı — hem `width` hem `height` mevcutsa varsayılan olarak `viewBox` özniteliğini sıyırır. Bu statik SVG'ler için matematiksel olarak geçerlidir ama SVG, en boy oranına göre ölçeklemek isteyen bir CSS bağlamına bırakıldığı an duyarlı boyutlandırmayı bozar. Bu sayfadaki her preset bu nedenle `viewBox`'ı yerinde bırakır. Tek seferlik bir kullanım durumu için gerçekten kaldırılmasını istiyorsanız, iş akışı optimize ediciyi burada çalıştırmak ve sonra özniteliği manuel olarak sıyırmaktır. Ters durum da belirtilmeye değer: SVG'nizde yalnızca bir `viewBox` varsa ve `width`/`height` yoksa, tarayıcılar onu konteynerini doldurmak için memnuniyetle ölçeklendirir, ki bu genellikle simge sistemleri ve satır içi illüstrasyonlar için istediğiniz şeydir.

Dönüştürme tarafı için en önemli sayı çıktı boyutudur. SVG'ler vektördür, bu da içsel piksel boyutlarına sahip olmadıkları anlamına gelir — dışa aktarmada seçtiğiniz boyut hem dosya boyutunu hem görsel kaliteyi belirler. Retina ekranda bir başlıkta 200×200'de görüntülenen bir logo için 400×400 (2×) veya 600×600 (3×)'de render edin ve tarayıcının ekranda küçültmesine izin verin; bu, alt-piksel örnekleme nedeniyle görüntülenen boyutlarda render etmekten daha keskindir. 1200×630'daki bir OG görsel için tam olarak o boyutta render edin — OG görselleri yüksek-DPI değildir ve 1200×630 kanonik canvas'tır. 8.5×11 inç'te baskıya yönelik bir PDF için SVG'yi 816×1056 px'e (96 DPI × inç) ayarlayın ve sayfa otomatik olarak doğru fiziksel boyutta bir PDF üretir. Scale kontrolü belirttiğiniz piksel boyutlarını çarpar, ki bu yüksek-DPI raster için doğru kontroldür ama PDF için ilgisizdir çünkü PDF'ler herhangi bir zoom'da vektör eşdeğeridir.

Kalite ayarları dönüştürme tarafındaki ikinci önemli kontroldür. JPEG ve WebP her ikisi de 0'dan 100'e kalite parametresi destekler; burada 100 esasen kayıpsızdır ve 0 tanınmazdır. Raster'a dönüştürülen SVG'ler için doğru sayı genellikle fotoğraflar için olduğundan daha yüksektir çünkü SVG'lerin sıklıkla düşük kalite ayarlarında kötü sıkışan keskin kenarları ve düz renkleri vardır. Bu sayfadaki varsayılanlar (JPEG/WebP için 90) vektör türevi raster için tipik üretim ayarıyla eşleşir. Bir fotoğraf türevi SVG dönüştürüyorsanız (nadir ama mümkün — bazen bir SVG gömülü raster içeren bir `<image>` öğesini sarar), kaliteyi normal bir JPEG gibi 78–82'ye düşürebilirsiniz görsel kayıp olmadan. PNG kayıpsız bir format olduğu için kalite parametresi yoktur; oradaki takas kalite değil boyutlardır ve PNG dönüştürmeyi Scale kontrolüyle eşleştirmek size ihtiyacınız olan kontrolü verir.

Gizlilik açıkça belirtmeye değer çünkü hosted alternatiflerine bu aracı tercih etmenin en büyük tek nedenidir. Buraya bıraktığınız SVG byte'ları standart File API kullanılarak JavaScript belleğine okunur, `DOMParser` ile ayrıştırılır, tarayıcıda çalışan SVGO ile optimize edilir, `Image` ve `drawImage` ile canvas'a render edilir ve `canvas.toBlob` veya `pdf-lib` aracılığıyla geri kodlanır. Bu API'lerin hiçbiri dosya içeriği için dışa giden ağ isteği yapmaz. Tarayıcı DevTools Ağ sekmesi optimizasyon veya dönüştürme sırasında sıfır istek gösterecektir — kendiniz doğrulayabilirsiniz ve sayfa bir kez yüklendikten sonra tüm iş akışını çevrimdışı çalıştırabilirsiniz. Bulut hesabı yok, sunucu tarafı önbelleğe alma yok, yönetilecek tedarikçi riski yok. NDA altında müşteri varlıklarını işleyen ajanslar, kurumsal tasarım ekipleri ve serbest çalışanlar için, bu tedarikçi-risk değerlendirmesi gerektirmeyen tek SVG araç kategorisidir.

Birkaç pratik kalıp kas hafızasına emanet etmeye değer. İlk olarak, bir depoya teslim etmeden önce her SVG'de Default'u çalıştırın — dosyayı hiçbir avantaj olmadan şişiren editör meta verilerini kaldırır ve tasarruflar genellikle ham dışa aktarmalarda %20–40'tır. İkinci olarak, kimsenin tekrar düzenlemeyeceği üretime bağlı SVG'lerde Aggressive'i çalıştırın — bir simge sistemindeki simgeler, bir pazarlama sayfasındaki illüstrasyonlar, hero grafikleri — çünkü ek tasarruflar (bir %10–15 daha) tipik bir sitenin SVG'lerinin değerinde birikir. Üçüncü olarak, raster'a dönüştürürken belirli bir nedeniniz yoksa her zaman 2×'de render edin; dosya boyutu maliyeti küçüktür ve görsel kalite farkı büyüktür. Dördüncü olarak, modern web'de raster çıktısı için WebP'yi JPEG yerine tercih edin — WebP hem kayıplı hem kayıpsız modları artı alfa şeffaflığını destekler, dosya boyutunda JPEG ve PNG'yi yener ve 2020'den beri sevkedilen her tarayıcıda desteklenir. Beşinci olarak, PDF çıktısını web geri dönüşü olarak değil baskı geri dönüşü olarak ele alın — PDF'ler ağırdır, sayfalara gömülmez ve bir SVG öğesinin indekslenebilirliğini kaybeder.

Bu aracın kasıtlı olarak yapmadığı bir avuç şey vardır ve bunları adlandırmak, aracın her şeyi kapsadığını iddia etmekten daha dürüsttür. SVG'den vektör PDF'leri üretmez — dönüştürme yolu yüksek-DPI raster'a render eder ve PDF'e gömer, ki bu en güvenilir yaklaşımdır ama gerçek bir vektör PDF'in sonsuz-zoom özelliğini kaybeder. Özellikle vektör PDF'e ihtiyacınız varsa (mühendislik çizimleri, büyük format baskı), Illustrator veya Inkscape dışa aktarması hâlâ daha iyi bir araçtır. Çok sayfalı SVG'yi işlemez, çünkü SVG spec'e göre tek sayfalı bir formattır; bir çok sayfalı PDF'e birleştirmek için birkaç SVG'niz varsa, her birini buradan geçirin ve PDF Tools ile birleştirin. Animasyonlu SVG (SMIL veya CSS animasyonları)'yi işlemez — raster'a dönüştürürken yalnızca ilk kare yakalanır, ki bu görsel-dışa aktarma araçları için standart davranıştır. Ve bir SVG içindeki gömülü raster'ı optimize etmez — SVG'niz `<image href="data:image/png;base64,…"/>` öğesi içeriyorsa, gömülü PNG dokunulmadan bırakılır; bunu küçültmek istiyorsanız gömülü PNG'yi ayrıca Image Compressor üzerinden çalıştırın.

Bu araç Omnvert'in geri kalan görsel yardımcı programlarıyla doğal olarak eşleşir. Optimize ettikten ve dönüştürdükten sonra, Image Compressor web'e bağlı varlıklarda ek %20 tasarruf için raster çıktıyı AVIF'e yeniden kodlayabilir. Crop aracı sıkıştırmadan önce görsel alanını azaltır, ki bu raster tarafında tasarrufları katlar. [EXIF Remover](/tools/exif-remover) SVG türevi raster için gereksizdir (tarayıcı canvas kodlayıcıları asla EXIF yazmaz), ama aynı iş akışında SVG çıktısını fotoğraflarla harmanlarken kullanışlıdır. [Background Remover](/tools/background-remover) ters yöndür — raster'dan alfa'ya, bir SVG türevi varlığın harici bir fotoğrafla bestelenmesi gerektiğinde kullanışlıdır. Bunların hepsi aynı gizlilik garantileriyle tarayıcıda çalışır, böylece bütün bir SVG-üretime iş akışı tek bir sekmede üçüncü taraf bir hizmete tek bir byte gitmeden gerçekleşebilir.