Ücretsiz SVG Optimizasyon

SVG optimizasyonu, SVG dosyasının XML kodundaki yorumları, editör verilerini, gereksiz öznitelikleri ve fazla ondalık basamakları temizleyerek görünümü koruyan daha küçük bir dosya üretme işlemidir. Bu araçla SVG dosyanızı yükleyebilir veya kodunu yapıştırabilir, optimize edilmiş çıktıyı önizleyip önceki ve sonraki boyutu gördükten sonra indirebilirsiniz. Küçülme oranı dosyanın içeriğine bağlıdır. Optimize edilmiş bir dosya da kendiliğinden güvenli hale gelmez.

İbrahim Özkan · Dijital Pazarlama Uzmanı

Bu sayfada önce aracı nasıl kullanacağınızı, ardından SVG kodunda neyin güvenle silinebileceğini ve neyin korunması gerektiğini bulacaksınız. Sayfa için hazırlanan ölçümlü bir test de küçülmenin ve olası bozulmaların gerçek bir dosyada nasıl göründüğünü gösteriyor.

SVG Dosyanızı Optimize Edin

SVG dosyanızı optimize etmek için dosyayı yükleme alanına bırakın; araç dosyayı hemen optimize eder. Kodu yapıştırıyorsanız Optimize et düğmesine basın. Araç optimize edilmiş çıktının küçük bir önizlemesini, önceki ve sonraki dosya boyutunu ve küçülme oranını gösterir. Sonucu kontrol ettikten sonra yeni SVG dosyasını indirebilir ya da kodunu kopyalayabilirsiniz.

1. Optimizasyon düzeyini seçin. Güvenli (önerilen) düzey viewBox'ı, kimlikleri (id) ve title öğesini korur. Düzeyi sonradan değiştirirseniz listedeki dosyalar yeniden işlenir.
2. SVG dosyalarınızı yükleme alanına bırakın. Birden çok dosya seçebilirsiniz. Kodla çalışıyorsanız “Ya da SVG kodunu yapıştırın” bölümünü açıp kodu metin kutusuna yapıştırın.
3. Dosyalar bırakıldığı anda işlenir. Kod yapıştırdıysanız Optimize et düğmesine basın.
4. Gör bağlantısıyla çıktıyı yeni sekmede açın. Logonun, renklerin ve kenarların orijinal dosyayla aynı göründüğünü kontrol edin.
5. Boyut farkını inceledikten sonra İndir ya da Kodu kopyala düğmesini kullanın. Birden çok dosyayı Hepsini indir (ZIP) ile tek arşivde alabilirsiniz.

SVG Optimizasyonu Nedir?

SVG optimizasyonu, vektör görseli tanımlayan XML kodunu çizime katkısı olmayan fazlalıklardan arındırıp daha kısa ve geçerli bir SVG üretme işlemidir. İşlem doğrudan metin olarak yazılmış kodu sadeleştirir.

SVG dosyası bir metin dosyasıdır. Şekiller path, rect veya circle gibi öğelerle, renkler ve konumlar da özniteliklerle tanımlanır. Tasarım programları dışa aktarım sırasında bu çizim koduna katman adları, pencere ayarları, yazar bilgisi ve altı basamaklı koordinatlar gibi tarayıcının çizim için kullanmadığı veriler ekler. Optimizasyon araçları bu verileri ayıklar ve kalan kodu daha kısa yazar.

Bu alanda en yaygın kullanılan açık kaynak araçlardan biri SVGO'dur. SVGO'nun varsayılan ayar seti yorumları, editör ad alanlarını, metadata'yı, kullanılmayan tanımları ve boş kapsayıcıları siler. Aynı set path verisini kısaltır, renk kodlarını kısa yazıma çevirir ve kullanılmayan kimlikleri temizler.

SVG yalnızca tasarım dosyası olarak kullanılmaz. Google Search, img etiketinin src özniteliğinde kullanılan SVG görselleri destekler. Logo ve ikonlarınızı SVG olarak yayınlıyorsanız bu dosyalar sayfa ağırlığının bir parçasıdır. Optimizasyon da teknik SEO kontrollerinde sayfa kaynaklarını hafifletmenin küçük ama somut bir adımı olarak görülebilir.

SVG Dosyası Nasıl Küçültülür?

SVG dosyası, editör verileri ve yorumlar silinerek, path koordinatları makul bir ondalık hassasiyete yuvarlanarak ve gereksiz grup ile öznitelikler sadeleştirilerek küçültülür. Ardından çıktının geçerli XML olarak açıldığı ve orijinalle aynı göründüğü kontrol edilir. Sunucunuzda gzip veya Brotli sıkıştırması açıksa tarayıcıya aktarılan boyut ayrıca düşer.

Küçülmenin büyük kısmı genellikle iki yerden gelir. Birincisi editörün eklediği ve çizimde kullanılmayan veridir. İkincisi path koordinatlarındaki fazla ondalık basamaklardır. SVGO'nun convertPathData eklentisi path komutlarını göreli veya mutlak yazımdan hangisi kısaysa ona çevirir, gereksiz komutları siler ve sayıları varsayılan olarak üç ondalık basamağa yuvarlar.

Dosya boyutunu düşürmenin ikinci katmanı sunucudadır. SVG metin tabanlı olduğu için HTTP sıkıştırmasından fayda görür. MDN, zaten sıkıştırılmış görsel, ses ve video dosyaları dışındaki tüm dosyalar için sıkıştırmanın açılmasını önerir. Kod optimizasyonu ile sunucu sıkıştırması birbirinin yerine geçmez. İkisi birlikte kullanıldığında en düşük aktarım boyutu elde edilir.

Örnek testte dosya ne kadar küçüldü?

Bu sayfa için hazırlanan 6.568 baytlık test logosu, SVGO 4.1.0 varsayılan ayarlarıyla 2.314 bayta indi ve yaklaşık yüzde 64,8 küçüldü. Çıktı geçerli XML olarak açıldı, viewBox ve title korundu, görünümde gözle fark edilen bir değişiklik olmadı. Bu oran bir garanti sayılmaz ve yalnızca bu test dosyasını tanımlar.

Test dosyası, Inkscape dışa aktarımına benzeyecek şekilde hazırlanan 256×256 piksellik bir logodur. Dosyada editör ayarları, RDF metadata'sı, kullanılmayan bir gradient, boş bir grup, gizli bir yardımcı öğe ve altı ondalık basamaklı koordinatlar vardı. Optimizasyondan sonra iki dosya Chromium tarayıcıda 256 ve 1024 piksel boyutlarında çizdirildi ve pikseller tek tek karşılaştırıldı. Ölçümler 27 Ekim 2026 tarihinde yapıldı.

Tablodaki en dikkat çekici satır gzip satırıdır. Sunucu sıkıştırması tek başına orijinal dosyayı 2.264 bayta indiriyor. Optimize edilen dosya sıkıştırıldığında ise 1.002 bayta düşüyor. Piksel farkları yalnızca yuvarlanan koordinatların kenar yumuşatmasını etkilediği birkaç sınır pikselinde görüldü. Gzip ölçümü gzip programının en yüksek sıkıştırma düzeyiyle yapıldı. Sunucunuzdaki ayar farklıysa sonuç da biraz değişir.

SVG Kodunda Hangi Alanlar Temizlenebilir?

SVG kodunda yorumlar, XML bildirimi, editör ayarları ve ad alanları, metadata, kullanılmayan tanımlar, boş gruplar, gizli öğeler ve fazla ondalık basamaklar genellikle güvenle temizlenebilir. viewBox, başka öğelerin başvurduğu kimlikler, title ve gradient, mask, clipPath tanımları ise korunmalıdır. Bir alanın silinip silinemeyeceği SVG'nin sitede nasıl kullanıldığına da bağlıdır.

Tablodaki ilk beş satır çizimin sonucunu değiştirmeyen verilerdir. Son dört satır ise çizimin nasıl ölçekleneceğini, renklerin hangi tanıma bağlanacağını ve görselin nasıl tanımlanacağını belirler. Optimizasyon ayarlarını seçerken bu iki grubu ayrı düşünmek hatalı bir silmeyi önler.

Kimlik adları neden ayrıca kontrol edilmeli?

Kimlik adları ayrıca kontrol edilmelidir, çünkü optimizasyon aracı yalnızca SVG içinde tanıdığı başvuruları korur ve diğer bağlantıları kullanılmıyor sanıp silebilir. Sayfanızdaki CSS veya JavaScript kodu #logo-yildiz gibi bir kimliği hedefliyorsa kısaltılan kimlik bu bağlantıyı koparır.

Bu sayfadaki akış şemasını optimize ederken aynı durum gözlendi. Şemadaki title ve desc öğeleri aria-labelledby özniteliğiyle kimlik üzerinden bağlıydı. SVGO'nun varsayılan ayarı bu iki kimliği kullanılmıyor kabul edip sildi ve erişilebilir ad bağlantısı boşta kaldı. Sorun, kimlikleri cleanupIds eklentisinin preserve ayarıyla korumaya almakla çözüldü.

Aynı sayfaya birden fazla SVG'yi satır içi olarak eklediğinizde de dikkatli olun. SVGO belgeleri, kimlikler tahmin edilebilir biçimde kısaltıldığı için ayrı ayrı optimize edilen dosyalarda aynı kimliklerin oluşabileceğini belirtir. Bu durumda bir SVG'nin gradient'i diğerine uygulanabilir. Belgeler bu sorun için prefixIds eklentisini önerir. Araçtaki Güvenli düzey kimliklere dokunmaz. Güçlü düzey ise kullanılmayan kimlikleri siler ve kalanları kısaltır.

SVG Optimizasyonu Görünümü Bozar mı?

Uygun ayarlarla yapılan SVG optimizasyonu görünümü genellikle bozmaz. viewBox'ın silinmesi, kimliklerin bağlantıları koparacak şekilde değiştirilmesi veya koordinatların aşırı yuvarlanması ise görünümü ve davranışı bozabilir. Bu yüzden çıktıyı orijinalle hem aynı boyutta hem de farklı boyutlarda karşılaştırmanız gerekir.

viewBox, SVG'nin kullanıcı koordinat sistemindeki görünür alanını tanımlar ve dört değerden oluşur. Bunlar başlangıç noktasının x ve y değerleri ile genişlik ve yüksekliktir. Tarayıcı SVG'yi farklı bir kutuya sığdırırken bu alanı ölçek referansı olarak kullanır. viewBox silindiğinde SVG belirlenen genişlik ve yükseklikte kalır.

SVGO'nun removeViewBox eklentisi bu riski açıkça uyarır ve SVG'nin kapsayıcısını dolduramayacağını ya da kırpılabileceğini belirtir. SVGO 4 sürümünde removeViewBox ölçeklenebilirliği korumak için, removeTitle da erişilebilirliği korumak için varsayılan ayar setinden çıkarıldı. Eski bir sürüm ya da farklı varsayılanlar kullanan bir araç kullanıyorsanız bu iki ayarı kendiniz kontrol edin.

Bu sayfadaki araç SVGO 3.3.5 kullanır. viewBox iki düzeyde de korunur. Güvenli (önerilen) düzey kimlikleri ve title öğesini de korur, yalnızca boş ya da editörün eklediği desc öğelerini siler. Güçlü (en küçük dosya) düzey title öğesini siler, kimlikleri kısaltır ve width ile height özniteliklerini kaldırır. Erişilebilir ad gerekiyorsa Güvenli düzeyi seçin ya da img etiketinde alt metni kullanın. SVG bu durumda boyutunu viewBox'tan ve kapsayıcısından alır.

Optimizasyondan sonra neleri kontrol etmelisiniz?

Optimizasyondan sonra çıktının XML olarak açıldığını, görünümün orijinalle eşleştiğini ve SVG'ye bağlı CSS, JavaScript ve erişilebilirlik bağlantılarının çalıştığını kontrol etmelisiniz. Bu kontroller birkaç dakika sürer ve yayından sonra fark edilecek bozulmaları önler.

• Dosyanın bir tarayıcıda hatasız açıldığını ve geçerli XML olduğunu doğrulayın.
• Renkleri, opaklığı, gradient geçişlerini, maske ve kırpma alanlarını orijinalle yan yana karşılaştırın.
• SVG'yi küçük ikon boyutunda ve büyük ekranda ayrı ayrı görüntüleyin.
• SVG içinde metin varsa yazı tipinin doğru göründüğünü kontrol edin. Görsel olarak kullanılan SVG'ler harici kaynak yükleyemeyebileceği için dış yazı tipi dosyası bu bağlamda çalışmayabilir.
• Sitenizdeki CSS veya JavaScript kodu SVG içindeki bir kimliği hedefliyorsa bu bağlantının çalıştığından emin olun.
• Animasyonlu SVG'lerde animasyonun baştan sona doğru oynadığını izleyin.

SVG Dosyalarında Güvenlik Riskleri Nelerdir?

SVG dosyaları script etiketi, onload gibi olay öznitelikleri, JavaScript bağlantıları, foreignObject içinde HTML ve harici kaynak çağrıları taşıyabildiği için XSS ve izleme gibi risklere yol açabilir. Sunucuda XML olarak ayrıştırılan SVG'lerde dış varlık saldırısı (XXE) riski de vardır. Optimizasyon bu riskleri tek başına gidermez ve güvenli kullanım için ayrı bir temizleme (sanitization) adımı gerekir.

SVG etkileşimli olabilen bir belge formatıdır. foreignObject öğesi SVG'nin içine başka bir XML ad alanından, tarayıcıda çoğunlukla HTML'den öğe eklenmesine izin verir. Kaynağı bilinmeyen bir SVG'yi sayfanın HTML koduna doğrudan eklemek, içindeki kodun sitenizin kullanıcıları adına çalışması anlamına gelebilir.

Riskin büyüklüğü SVG'nin sayfaya nasıl eklendiğine de bağlıdır. MDN'ye göre SVG img etiketi veya CSS arka planı gibi bir görsel olarak kullanıldığında tarayıcılar güvenlik amacıyla kısıtlamalar uygulayabilir. Bu kısıtlamalar JavaScript'in devre dışı kalmasını ve harici kaynakların yüklenmemesini kapsar. Bu kısıtlamalar SVG doğrudan açıldığında ya da iframe, object veya embed ile belge olarak eklendiğinde geçerli değildir. Satır içi eklenen SVG de sayfanın kodunun bir parçası olur.

Optimizasyon zararlı kodu temizler mi?

Standart SVG optimizasyonu zararlı kodu temizlemek için tasarlanmamıştır ve bu sayfadaki testte script etiketi ile onload özniteliği varsayılan ayarlardan sonra dosyada kaldı. Script temizleyen bir eklenti eklendiğinde bile foreignObject ve harici görsel referansı yerinde durdu.

Test için küçük bir SVG hazırlandı. İçindeki komutlar zararsızdı ve yalnızca tarayıcı konsoluna yazı yazıyordu. Dosya önce SVGO'nun varsayılan ayarlarıyla, sonra bu ayarlara removeScripts eklentisi eklenerek işlendi. SVGO belgeleri de güvenilir olmayan kaynaktan gelen SVG'lerde JavaScript'in temizlenmesini önerir.

Bu sonuç, dosya boyutunu küçültmek için kurulan bir işlem hattının güvenlik kontrolü yerine geçmediğini gösteriyor. Güvenlik kararını ayrı bir temizleme adımına ve SVG'nin sayfada nasıl sunulacağına dayandırmalısınız.

Kullanıcıların yüklediği SVG'ler nasıl ele alınmalı?

Kullanıcıların yüklediği SVG'ler güvenilmeyen içerik olarak ele alınmalı, sayfaya doğrudan HTML olarak eklenmemeli ve yayından önce SVG destekli bir temizleyiciden geçirilmelidir. Sunucuda XML ayrıştırılıyorsa DTD ve dış varlık çözümleme kapatılmalıdır.

1. Yüklenen SVG'yi sayfanın HTML koduna doğrudan eklemeyin. Görsel olarak göstermeniz yetiyorsa img etiketini kullanın.
2. SVG'yi DOMPurify gibi HTML, MathML ve SVG için XSS temizleyicisi olan bir kütüphaneyle işleyin.
3. Sunucu tarafındaki XML ayrıştırıcıda DTD'leri kapatın. OWASP, güvenilmeyen girdideki dış varlıkların çözülmesini XXE saldırısı olarak tanımlar ve DTD'lerin mümkün olduğunca devre dışı bırakılmasını önerir.
4. Dosya türünü yalnızca Content-Type başlığına güvenerek doğrulamayın. OWASP bu başlığın kolayca taklit edilebileceğini belirtir ve yüklenen dosyaların ayrı bir sunucuda saklanmasını seçenekler arasında sayar.
5. Temizleme sonrasında boyutu küçültmek istiyorsanız optimizasyonu en son adım olarak uygulayın.

SVG ile PNG Sıkıştırma Arasındaki Fark Nedir?

SVG optimizasyonu vektör çizimi tanımlayan XML kodunu sadeleştirir. PNG sıkıştırması ise piksel ızgarasındaki görüntü verisini daha verimli kodlar. SVG her boyutta keskin kalır ve küçülme kod fazlalığından gelir. PNG'nin dosya boyutu ise çözünürlükle birlikte büyür.

Logonuz SVG olarak elinizdeyse onu PNG'ye çevirip sıkıştırmak genellikle daha büyük ve ölçeklenemeyen bir dosya üretir. Fotoğraf ve ekran görüntüleri gibi raster görseller için görsel sıkıştırma aracı, belirli piksel ölçülerine ihtiyacınız varsa görsel boyutlandırma aracı daha doğru seçimdir. Optimize ettiğiniz SVG logodan site simgesi üretmek isterseniz favicon oluşturucu ile devam edebilirsiniz.

Sayfadaki görsel dosyaların toplam ağırlığı yükleme performansını etkileyen etkenlerden biridir. Küçük bir SVG'nin tek başına sıralama değişikliği yaratması beklenmez. Görsel optimizasyonunu Core Web Vitals ölçümleriyle birlikte değerlendirmek daha gerçekçi bir yaklaşımdır.

Sık Sorulan Sorular

SVG küçültme, kalite kaybı, viewBox, script ve güvenlik konularında en sık sorulan soruların kısa cevapları aşağıda yer alır. Ayrıntılı açıklamalar ilgili bölümlerde bulunur.

SVG nasıl küçültülür?

SVG, yorumlar ve editör verileri silinip path koordinatları yuvarlanarak ve gereksiz öznitelikler temizlenerek küçültülür. Bu araçta dosyayı yüklemeniz yeterlidir; araç dosyayı hemen optimize eder. İndirmeden önce önizlemeyi ve boyut farkını kontrol edin.

Kalite kaybı olur mu?

Uygun ayarlarla yapılan SVG optimizasyonunda gözle görülen bir kalite kaybı genellikle olmaz. Koordinatlar yuvarlandığı için piksel düzeyinde çok küçük farklar oluşabilir. Bu sayfadaki testte 1024 piksellik çizimde piksellerin yüzde 0,075'i farklıydı ve fark gözle seçilemedi.

viewBox silinebilir mi?

viewBox teknik olarak silinebilir, ancak SVG'yi farklı boyutlarda kullanıyorsanız silmemelisiniz. viewBox olmadan SVG kapsayıcısına göre ölçeklenmez ve kırpılabilir. Bu araç viewBox'ı silmez. Test dosyasında bu işlem yalnızca 22 bayt kazandırdı.

SVG script içerebilir mi?

Evet, SVG dosyası script etiketi ve onload gibi olay öznitelikleri içerebilir. SVG img etiketiyle görsel olarak gösterildiğinde tarayıcılar JavaScript'i devre dışı bırakabilir. Satır içi eklendiğinde veya doğrudan açıldığında ise kod çalışabilir.

SVG güvenli midir?

SVG'nin güvenli olup olmadığı dosyanın kaynağına, içeriğine ve sayfaya nasıl eklendiğine bağlıdır. Kendi tasarım programınızdan çıkan bir logo genellikle düşük risk taşır. Kullanıcıların yüklediği SVG'ler ise temizleme işleminden geçirilmeden yayınlanmamalıdır. Optimizasyon tek başına güvenlik sağlamaz.

SVG'yi PNG'ye çevirmek aynı şey mi?

Hayır, SVG'yi PNG'ye çevirmek vektör çizimi sabit çözünürlüklü bir piksel görseline dönüştürür. SVG optimizasyonu ise dosyayı SVG olarak bırakır ve yalnızca kodunu sadeleştirir. Çevrilen PNG büyütüldüğünde keskinliğini kaybeder.

Kaynaklar

1. SVGO, Preset Default. Varsayılan eklenti listesi. Erişim 27 Ekim 2026.
2. SVGO, Migration from v3 to v4. removeViewBox ve removeTitle değişikliği. Erişim 27 Ekim 2026.
3. SVGO, removeViewBox. Ölçekleme uyarısı. Erişim 27 Ekim 2026.
4. SVGO, cleanupIds. Kimlik kısaltma ve çakışma uyarısı. Erişim 27 Ekim 2026.
5. SVGO, convertPathData. Path verisi ve ondalık hassasiyet. Erişim 27 Ekim 2026.
6. SVGO, removeScripts. Script ve olay özniteliklerinin temizlenmesi. Erişim 27 Ekim 2026.
7. MDN Web Docs, viewBox. Erişim 27 Ekim 2026.
8. MDN Web Docs, SVG as an image. Sayfanın son güncellemesi 13 Mayıs 2025. Erişim 27 Ekim 2026.
9. MDN Web Docs, foreignObject. Erişim 27 Ekim 2026.
10. MDN Web Docs, Compression in HTTP. Erişim 27 Ekim 2026.
11. OWASP, XML External Entity Prevention Cheat Sheet. Erişim 27 Ekim 2026.
12. OWASP, File Upload Cheat Sheet. Erişim 27 Ekim 2026.
13. DOMPurify, GitHub deposu. Erişim 27 Ekim 2026.
14. Google Search Central, Image SEO Best Practices. Desteklenen görsel biçimleri. Erişim 27 Ekim 2026.