Bir dakika...(/)
Şu anda görüntülerinizi optimize ediyoruz. En yüksek kalite sonuçları sağlamak için lütfen bir an bekleyin.
Harika, görüntülerinizi başarıyla sıkıştırdık.
Görüntüler Optimize Edildi.
SVG Görsellerini Online Sıkıştır
Metaveriyi kaldırın, vektörü koruyun: SVG'niz aynı şekilde görüntülenir
Optimizasyon yapılıyor...
Editörün bıraktıklarını silerek SVG dosyalarını sıkıştırın
Bir SVG dosyasını Not Defteri'nde açarsanız, her şeyi görürsünüz: etiketler, sayılar, metinler. Format tam olarak budur. Piksel yok, fotoğraf yok, sadece şekilleri çizmek için talimatlar var. Bu önemli çünkü burada sıkıştırmanın anlamı değişiyor. Hiçbir şey sıkıştırılmıyor veya yaklaşık olarak kaydedilmiyor. Gereksiz metinler sadece siliniyor ve çizim olduğu gibi kalıyor.
Asıl ağırlık nereden geliyor?
Dosyanın neredeyse hiçbir kısmı sanat eseri değildir. Bir logoyu Illustrator, Figma veya Inkscape'ten dışa aktardığınızda, dosya editörün evraklarıyla gelir: bir jeneratör yorumu, 2008'den beri kimsenin ihtiyacı olmayan bir DOCTYPE, bir XML bildirimi, belgeyi RDF ile tanımlayan bir meta veri bloğu, katman adları ve hiçbir öğenin kullanmadığı sınıflarla dolu bir stil bloğu. Test ettiğimiz gerçek bir logoda, tüm bunlar dosyanın yaklaşık üçte ikisini oluşturuyordu. Şekiller ise küçük bir kısmıydı.
Bir de sayılar var. Editörler koordinatları tam kayan nokta hassasiyetinde yazar, bu yüzden 10 konumunda ve 180 genişliğinde bir dikdörtgen 10.000000 ve 180.00000000 olarak kaydedilir. Bunu her yolun her noktası için çarptığınızda, sadece ondalıklar bile çizimden daha fazla yer kaplayabilir.
Vektör olarak kalır, bu yüzden kalite kaybı olmaz
İnsanların gereksiz yere endişelendiği kısım burası. Bir SVG'nin çözünürlüğü yoktur. Görüntü hangi boyutta gösterilirse gösterilsin, sıfırdan çizilir; ister 16 piksellik bir favicon, ister dev bir afiş olsun. Bir meta veri bloğunu kaldırmak hiçbir şeyi değiştirmez. Geri dönen dosya, yüklediğinizle aynı şekilde ölçeklenir, her boyutta birebir aynıdır ve oluşturduğunuz programda tamamen düzenlenebilir olarak kalır.
Neler kaldırılır?
Temizlik tasarım gereği temkinlidir. Görüntülemeye hiçbir etkisi olmayan şeyleri hedefler.
| Kaldırılanlar | Kalanlar |
|---|---|
| Editör yorumları ve jeneratör dizeleri | Tüm şekiller, yollar ve eğriler |
| Meta veri bloğu ve RDF ad alanları | Renkler, gradyanlar ve opaklık |
| DOCTYPE ve XML bildirimi | Metin öğeleri ve yazı tipleri |
| Hiçbir şeyin referans vermediği tanımlar | Kullanılan filtreler, maskeler ve kırpma yolları |
| Boş gruplar ve katmanlar | Dönüşümler ve viewBox |
| Koordinatlardaki fazla ondalık basamaklar | Gördüğünüzü değiştiren her şey |
Küçük SVG'ler neden küçük fotoğraflardan daha önemlidir?
Bir SVG genellikle bir logo veya ikondur, yani bir sitenin her sayfasının başlığında yer alır ve her şeyden önce yüklenir. Fotoğraflar geç ve tembelce yüklenir. İkonlar ise hemen yüklenir. Başlık logosundan birkaç kilobayt kesmek, makalenin ortasındaki bir görselden aynı miktarı kesmekten daha fazla sayfa hızına katkı sağlar, çünkü başlık tarayıcının sayfayı boyamadan önce beklediği kısımdır.
Yayınlamadan önce kontrol etmeye değer bir şey
Temizlik, dosya içindeki dahili id özniteliklerini kısaltır. Aynı SVG içindeki referanslar buna göre güncellenir, böylece gradyanlar, maskeler ve kırpma yolları çalışmaya devam eder ve çizim eskisi gibi görünür. Ancak dosya dışındaki kodu bilemez. Eğer SVG'niz başka sayfaların işaret ettiği bir ikon spriteda yaşıyorsa veya bir stil dosyası ya da betik bir öğeyi id ile seçiyorsa, dosyayı değiştirdikten sonra bu bağlantıları test etmekte fayda var. Çoğu SVG olan düz bir logo veya dışa aktarılmış bir ikon için kontrol etmeniz gereken bir şey yoktur.
SVG'nizin içinde bir fotoğraf varsa
Bazen bir SVG aslında bir vektör değildir. Illustrator'da çalışma alanına bir fotoğraf yerleştirip SVG olarak dışa aktarırsanız, resim XML'in içine uzun bir base64 dizesi olarak gömülür. Dosya, içinde tek bir şekil olmasına rağmen iki megabayt olabilir. İşaretlemeyi temizlemek bu bloğa dokunmaz, çünkü bu bir işaretleme değildir. Dosyanız neredeyse hiç küçülmediyse ve baştan beri içinde bir fotoğraf varsa, nedeni budur ve çözüm resmi çıkarıp ayrı olarak JPEG veya PNG olarak sıkıştırmaktır.
Ayarlanacak bir şey yok
Seçenek yok, sıkıştırma seviyesi yok, gelişmiş sekme yok. Dosyayı yükleyin, temizlenmiş olarak geri alın. Birden fazla dosya aynı şekilde çalışır; bitenleri tek tek indirebilir veya tümünü ZIP olarak alabilirsiniz.
Dosyalarınıza ne olur?
Dosyalar şifreli bir bağlantı üzerinden iletilir, temizlenir ve bir saat sonra sunucudan silinir. Hiçbir şey saklanmaz ve başka bir amaçla kullanılmaz.
Ne elde edersiniz?
- Editör meta verileri, jeneratör yorumları, DOCTYPE ve kullanılmayan tanımlar kaldırılır
- Koordinatlar dokuz ondalık basamak yerine mantıklı bir hassasiyete yuvarlanır
- Hâlâ sonsuz ölçeklenen ve editörünüzde açılan bir dosya
- Orijinaliyle karşılaştırılarak her boyutta birebir aynı görüntü
- Toplu yükleme, tek tek indirme veya tümünü ZIP olarak alma
- Hesap yok, kurulum yok ve dosyalar bir saat sonra sunucudan silinir
Sırada ne var?
Bitmap olarak da bulunan bir logo ile mi çalışıyorsunuz? PNG Sıkıştır şeffaf versiyonu, WebP Sıkıştır ise modern olanı işler. Eğer SVG'nizin içinde gömülü bir fotoğraf varsa, JPG Sıkıştır o görselin gitmesi gereken yerdir.
Sıkça Sorulan Sorular
Hayır, ve bu mümkün değildir. Bir SVG'nin pikseli ve çözünürlüğü yoktur. Görüntü hangi boyutta görünürse görünsün, tarayıcı tarafından sıfırdan çizilir; bu yüzden bir telefonda da, dev bir afişte de aynı keskinliktedir. Dosyayı temizlemek, yorumlar ve meta veriler gibi hiçbir şey çizmeyen metinleri kaldırır. Şekiller, eğriler ve renkler olduğu gibi bırakılır, bu nedenle sonuç her boyutta birebir aynıdır.
Editörünüzün eklediği evrak işleri. Illustrator, Figma ve Inkscape hepsi bir jeneratör yorumu, bir XML bildirimi, bir DOCTYPE, RDF ile meta veri bloğu, katman adları ve genellikle hiçbir şeyin kullanmadığı sınıfları içeren bir stil bloğu yazar. Ayrıca, koordinatlar tam hassasiyetle yazılır; bu nedenle 180 değeri 180.00000000 olarak kaydedilir. Tipik bir dışa aktarılmış logoda, tüm bunlar dosyanın yaklaşık üçte ikisini oluşturur. Resmi çizen kısım ise küçük bir bölümdür.
Evet. Çıktı normal bir SVG'dir, yani Illustrator, Figma, Inkscape veya herhangi bir metin editöründe orijinali gibi açılır. Tek fark, editörün kendi evrak işlerinin bir kısmının gitmiş olmasıdır; bu nedenle katman adları bıraktığınız gibi gelmeyebilir. Sanat eseri ise değişmeden ve tamamen düzenlenebilir olarak kalır.
İki yaygın sebep var. Ya zaten optimize edilmişti — bu, çıkışta temizlik yapan araçlardan dışa aktarılan SVG'lerde veya daha önce bir optimize ediciye girmiş dosyalarda olur — ya da dosyanın içinde gömülü bir fotoğraf vardır. İkinci durum çoğu kişiyi şaşırtır: Illustrator'da çalışma alanına bir fotoğraf yerleştirip SVG olarak dışa aktardığınızda, resim XML'in içine base64 bloğu olarak gömülür. Bu blok işaretleme değil, görsel verisidir; bu yüzden işaretlemeyi temizlemek ona dokunmaz. İki megabaytlık bir SVG neredeyse hiç küçülmediyse, bir metin editöründe açıp data:image ile başlayan çok uzun bir dize arayın.
Bozabilir ve bunu yayınlamadan önce bilmekte fayda var. Temizlik, dosya içindeki id özniteliklerini kısaltır. Aynı SVG içindeki referanslar buna göre yeniden yazılır; böylece gradyanlar, maskeler ve kırpma yolları çalışmaya devam eder ve görüntü eskisi gibi görünür. Ancak dosya dışındaki kod farklıdır: bir stil dosyası bir öğeyi id ile hedefliyorsa, JavaScript belirli bir düğümü animasyon yapıyorsa veya dosya başka sayfaların referans verdiği bir spritenin parçasıysa, dosyayı değiştirdikten sonra bunları test edin. Bağımsız bir logo veya dışa aktarılmış bir ikon için — ki çoğu SVG budur — endişelenecek bir şey yoktur.
Evet, ve ikisi birlikte çalışır, birbirinin yerine geçmez. Bu temizlik, dosyada hiç olmaması gereken metni kaldırır. Web sunucunuzun gönderirken uyguladığı gzip ise kalan metni sıkıştırır. İkisini birden yapmak normal bir uygulamadır ve birleşik sonuç, tek başına herhangi birinden daha küçüktür. Ayrıca sunucunuzun image/svg+xml içerik tipi için gerçekten sıkıştırmayı etkinleştirdiğinden emin olun; çünkü bazı varsayılan ayarlar yalnızca HTML, CSS ve JavaScript'i kapsar.