SVG'nin dosya boyutunu JPEG eşdeğerine daha yakın olacak şekilde küçültebilir miyim?

Bir web sitesinde kullandığım bir resim var. Bir SVG kullanmak istiyorum, böylece her boyutta olabilir ve hala net görünebilir.

• Bu dropbox , orijinal Illustrator dosyasını olduğu gibi SVG dosyasını da içerir.

• Bu bir JPEG dışa aktarımıdır:

  

SVG, JPG'den çok daha büyük bir dosya boyutuna sahiptir. SVG'yi benzer bir dosya boyutuna sahip olacak şekilde optimize etmek mümkün müdür? Yardımı olacaksa bazı kaliteyi kaybedebilirim. Bu SVG optimizasyonunu denedim , ancak fazla bir fark yaratmadı.

Illustrator dosyasını JPG olarak kaydedersem, sonucu izler ve SVG olarak kaydedersem, o zaman çok daha küçük bir dosya boyutu elde ederim, ancak kalite kaybım olur. Bu, belki de orijinaldeki katmanların büyük boyuta neden olduğunu düşündürüyor? Çalıştığım görüntü SVG'ye uygun olmak için çok mu karmaşık?

SVG'niz, denetleyicinin sağ alt köşesindeki gölge için gömülü bir piksel grafiği içerir. Bu, dosya boyutunun yaklaşık for'sinden sorumludur. Kaldırırsanız, SVG dosyanız JPEG'inizle aynıdır. Muhtemelen bir gradyan ile yeterince benzer bir etki elde edebilirsiniz.

SVG dosya boyutunu azaltmanın diğer teknikleri şunlardır:

• Tüm Meta Verileri ve benzerlerini kaldırın. Inkscape bunun için düz SVG olarak kaydetmiştir . Sanırım diğer programların da benzer bir şeyleri var.
• Şekillere çok az şey ekleyen düğümleri çıkarın, örneğin, kontrol cihazınızın şeklindeki sahte düğümler var.

Bu, belki de orijinaldeki katmanların büyük boyuta neden olduğunu düşündürüyor?

Çok fazla katman kullanmıyorsanız (her nesne için bir katman düşünün), katmanların dosya boyutuna alakalı bir katkı yapmaması gerekir ve o zaman bile bu yalnızca bir kesir olur.

Çalıştığım görüntü SVG'ye uygun olmak için çok mu karmaşık?

Sıfırdan makul bir görüntü oluşturabiliyorsanız, SVG formatı için çok karmaşık olmamalıdır. Dosya boyutlarının patladığı, ötesinde büyülü bir karmaşıklık eşiği gibi bir şey yoktur (büyük olasılıkla bu belirsiz makul bir format için geçerlidir). Elbette, yalnızca yeterince kaba çözünürlük seçerseniz, her SVG'yi daha küçük dosya boyutuna sahip bir JPEG'e verebilirsiniz. Ancak bu mutlaka SVG kullanmamanız gerektiği anlamına gelmez.

^{¹ Bu, özellikle izleme ve benzeri olmadan. Ekstrem bir örnek vermek gerekirse: Bir fotoğrafın her pikselini SVG ilkelleriyle tam olarak çoğaltmak istiyorsanız (yani, bir piksel grafiğini SVG'ye gömmeden), sonucun SVG biçiminde verimli bir şekilde gösterilemeyecek kadar karmaşık olduğunu düşünebilirsiniz. . Ama bu umarım sağduyulu.}

Wrzlprmft'in daha önce belirttiği gibi, SVG dosyanızın boyutunun% 50'sinden fazlası denetleyici üzerinde oldukça ince bir gölgeleme efekti oluşturmak için kullanılan gömülü bir PNG bitmap görüntüsü tarafından alınır. Bu görüntüden kurtulmak ve basit bir radyal gradyanla değiştirmek, SVG'yi yaklaşık 10kb'a indirmek için yeterlidir.

               
^{Solda süslü bitmap gölgeli orijinal görüntü, sağda basit radyal gradyanlı düzenlenmiş sürüm.}

Oradayken, basitleştirmek için herhangi bir şey olup olmadığını görmek için yollarınızı da kontrol etmelisiniz. Çok fazla bir şey bulamadım, ancak kontrol cihazınızın dış çizgisinde, gözle görülür bir fark yaratmadan birleştirilebilecek birkaç komşu düğüm (üst ve alt ortaya yakın) bulunur.

İşte bu kolay bir% 50 tasarruf, ancak henüz durmayalım. Eğer hakkında daha da biraz biliyorsanız SVG formatında , bir yapabileceği çok daha iyi daha.

İlk olarak, gereksiz tanımlardan kurtulmak için Inkscape'de "Vacuum Defs" komutunu çalıştırın ve görüntüyü "düz SVG" olarak kaydedin. Şimdi, onu bir metin editöründe açma ve neleri kurtarabileceğimize bakma zamanı. İdeal olarak, entegre bir SVG önizlemesine sahip bir düzenleyici kullanmanız gerekir; böylece düzenlemelerinizin görüntünün görünümü üzerinde ne gibi bir etkisi olduğunu (umarım yok) hızlı bir şekilde görebilirsiniz. Bunun için emacs kullanıyorum , ancak benzer özelliklere sahip başka editörler de var.

Her neyse, metin editörünüzde açılan SVG dosyasıyla, basitleştirmeye başlayalım!

• En tepede, büyük bir işe yaramaz var <!-- comment -->. Sadece sil.

• Illustrator'dan doğrudan bir SVG düzenliyorsanız, işe yaramaz bir <!DOCTYPE ... >çizgi de var. Onu da sil.

• Inkscape, imajınıza gereksiz bir RDF meta veri bloğu yapıştırmakta ısrar ediyor. <metadata ...>Etiketi bulun ve silinmeye, kapanmaya kadar her şeyle birlikte silin </metadata>.

• Ayrıca, dosyayı "düz SVG" olarak kaydetseniz bile, Inkscape yine de bir dizi özel öznitelikle aydınlatır. Başlayan her özelliği bulun inkscape:veya sodipodi:silin ve bunları silin.

• Meta veriler ve Inkscape'e özgü öznitelikler bittiğinde, kullanılmayan tüm XML ad alanı niteliklerini <svg>etiketten kaldırabilirsiniz . En azından kaldırmak güvenli olmalı xmlns:rdf, xmlns:dc, xmlns:cc, xmlns:inkscapeve xmlns:sodipodi. Gereksiz bir xmlns:svgöznitelik varsa, onu da kaldırın. Bu noktada bırakmanız gereken tek ad alanı özellikleri şunlardır:

  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"

• Bu <svg>etiketin ayrıca enable-backgroundve gibi güvenle kaldırabileceğiniz bir sürü başka işe yaramaz özelliği vardır xml:space="preserve". (Bu Illustrator SVG ihracatçı tarafından eklenen ve Inkscape işe yaramaz olduğunun farkında akıllı yeterli değildir.) viewBoxSadece değerlerini tekrarlar beri nitelik de güvenle bu görüntüden çıkarılabilir x, y, widthve heightnitelikler.

• Ayrıca encodingve standaloneöznitelikleri <?xml ... ?>etiketten güvenle kaldırabilirsiniz .

• Şimdi görüntü verilerinin bağırsaklarına geçelim. Bazı nedenlerden dolayı, Inkscape id, hiç referans alınmasalar bile her öğeye nitelik atamakta ısrar ediyor . idDeğeri dosyada başka bir yerde hiçbir zaman tekrarlanmayan (onu ara!) Herhangi bir özelliği kaldırmak güvenlidir. Temel olarak, saklamanız gereken tek ID'ler degradeler ve muhtemelen <defs>bölümlerin içinde bulunan diğer nesneler (örneğin yollar) içindir .

• Ayrıca, Inkscape gibi uzun ID'ler oluşturmayı sever linearGradient4277. lg1Bunun yerine kısa bir şeyle silemediğiniz kimlikleri kısaltmayı düşünün .

• Ayrıca birbiri <defs>ardına çok sayıda bölüm vardır . Bunları birleştirmek birkaç bayttan tasarruf sağlar (ve genel olarak belge yapısını basitleştirir).

• Ayrıca <g>dosyanın sonunda birkaç boş grup ( eleman) vardır. Sadece onlardan kurtul. Aynı transformözniteliği olan (veya hiçbiri olmayan) birden fazla ardışık grup da olabilir ; Bunları birleştirmek de güvenlidir.

• Garip bir nedenden dolayı, Inkscape, elemanlar diçin yedekli Bezier yolunu ( niteliğini) kaydeder <circle>. Bu kesinlikle sebepsiz yere yer kaplar, bu yüzden sadece silin. ( Elementler düzerindeki nitelikleri bırakın <path>; bunlar aslında bir şey için kullanılırlar.)

• Inkscape ayrıca style, daha spesifik fill="#4888fa"olanların daha kısa olacağı özelliklerde CSS'yi kullanmayı sever , örneğin daha ayrıntılı olana yeniden yazma style="fill:#4888fa". Bu stilleri ayrı ayrı niteliklere ayırarak (ve varsayılan ayarı sadece yararsızca uygulayanları kaldırarak) birkaç bayt kaydedebilirsiniz, ancak bu SVG formatına yukarıdaki değişikliklerin çoğundan biraz daha aşinalık verir.

• Ayrıca, herhangi bir <use ... >öğe varsa, onları bağlandıkları gerçek öğeyle değiştirerek birkaç bayttan tasarruf edebilirsiniz. (Tabii ki, bu yalnızca bağlı elemanlar yalnızca bir kez kullanılırsa yer kazandırır.) Ayrıca, Inkscape'in dairesel gradyanları dolaylı olarak tanımlamayı, ilk önce a'daki durakları tanımladıktan <linearGradient>sonra bunları a içinde referans gösterdiğini <radialGradient>; Durakları doğrudan radyal degrade içinde hareket ettirerek ve şimdi kullanılmayan lineer degradeden kurtularak basitleştirebilirsiniz. Bir bonus olarak, bunu yaparak, tüm xlink:hrefözelliklerden kurtulmayı başardıysanız , xmlns:xlinkniteliği <svg>etiketten silebilirsiniz .

• Her son bayt'ı gerçekten sıkıştırmak istiyorsanız, çok fazla ondalık yolla sayısal değerleri arayın ve bunları daha hassas bir şeye yuvarlayın. Canlı önizlemenin gerçekten yardımcı olduğu yer burasıdır, çünkü görünür olmaya başlamadan önce değeri ne kadar yuvarlayabileceğinizi görmenize izin verir. Ne kadar yuvarlanabileceğini görmek için her sayıyı dikkatlice test etmek istemeseniz bile, en azından, düşük değerde meyvelerin, örneğin, 1.0000859piksel değerinin yuvarlanması gibi yuvarlanmasını seçebilirsiniz 1.

• Son olarak, dosyadaki girintiyi ve boşlukları temizleyin. Bayt sayısını kesinlikle en aza indirgemek için, her şeyi bir satıra koymanız gerekir (veya en azından yalnızca boşlukların gerekli olduğu yerlerde satır sonlarını yalnızca niteliklerin önüne koymanız gerekir), ancak bunu okumak çok zordur. Yine de, basit ve muhafazakar bir girinti ile okunabilirlik ve kompaktlık arasında iyi bir denge kurmak mümkündür.

Her neyse, işte SVG resminizi elle düzenleyebildiğim şey:

<?xml version="1.0"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  x="0" y="0" width="124" height="52">
<g transform="translate(1,-27.5)">
  <linearGradient id="lg1"
    x1="70.1063" y1="13.4122"
    x2="66.1994" y2="-26.4368"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(0.9997,-0.0263,0.0263,0.9997,-7.4,61.3)">
    <stop offset="0" stop-color="#154BBF" />
    <stop offset="1" stop-color="#6E8BFF" />
  </linearGradient>
  <path d="M 119.198,75.836 C 115.115,80.541 7.902,78.843 3.585,74.366 -0.734,69.888 -1.322,46.938 2.76,42.233 6.842,37.53 113.821,30.047 118.137,34.524 c 4.319,4.477 5.143,36.609 1.061,41.312 z" id="path3298" fill="url(#lg1)" />
  <linearGradient id="lg2"
    x1="70.4391" y1="13.5887"
    x2="70.4391" y2="-25.3265"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(0.9997,-0.0263,0.0263,0.9997,-7.4,61.3)">
    <stop offset="0" stop-color="#4166FA" />
    <stop offset="1" stop-color="#87A4FF" />
  </linearGradient>
  <path d="M 119.2,71.843 C 115.247,76.118 11.615,74.749 7.447,70.692 3.281,66.635 2.747,45.804 6.7,41.528 c 3.953,-4.277 107.372,-11.239 111.539,-7.183 4.167,4.057 4.915,33.222 0.961,37.498 z" id="path3305" fill="url(#lg2)" />
  <path stroke="#fff" stroke-width="5" d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -7.099,-1.84 -3.233,-0.954 -5.221,-1.627 -6.961,-2.308 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.37,1.6315 3.944,1.1635 12.873,4.1185 14.692,7.5355 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" />
  <path fill="#4888fa" d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -7.099,-1.84 -3.233,-0.954 -5.221,-1.627 -6.961,-2.308 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.37,1.6315 3.944,1.1635 12.873,4.1185 14.692,7.5355 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" />
  <path fill="#87b5ff" d="m 114.774,40.292 c -1.17,-2.151 -7.571,-4.939 -14.293,-6.921 V 33.37 c -0.023,-0.007 -0.047,-0.014 -0.07,-0.021 -0.023,-0.007 -0.047,-0.015 -0.071,-0.02 l 0,0 c -6.723,-1.985 -13.612,-3.12 -15.761,-1.949 -4.296,2.337 -9.198,17.315 -6.265,21.228 0.907,1.209 3.014,2.449 4.466,2.043 1.452,-0.404 2.121,-3.4 2.652,-3.174 2.518,1.077 5.601,2.117 8.744,3 3.119,0.966 6.272,1.765 8.972,2.229 0.569,0.097 -0.498,2.975 0.502,4.104 1.001,1.128 3.443,1.232 4.861,0.709 4.586,-1.693 8.602,-16.933 6.263,-21.227 z" />
  <path fill="#2f67c9" d="m 90.818,42.604 c -0.097,-0.194 -0.901,-0.575 -1.999,-1.006 0.317,-1.135 0.497,-2.007 0.401,-2.2 -0.319,-0.641 -3.681,-1.766 -4.323,-1.447 -0.192,0.096 -0.574,0.9 -1.004,1.998 -1.135,-0.315 -2.006,-0.497 -2.201,-0.401 -0.64,0.319 -1.766,3.681 -1.446,4.322 0.096,0.193 0.901,0.575 1.997,1.006 -0.316,1.134 -0.496,2.007 -0.4,2.199 0.32,0.64 3.682,1.767 4.323,1.447 0.193,-0.095 0.575,-0.901 1.005,-1.997 1.135,0.314 2.008,0.496 2.199,0.401 0.642,-0.32 1.767,-3.682 1.448,-4.322 z" />
  <path fill="#4888fa" d="m 100.282,33.311 c -0.024,-0.007 -0.046,-0.013 -0.069,-0.02 -0.023,-0.006 -0.046,-0.013 -0.07,-0.02 l 0,0 c -2.455,-0.725 -4.932,-1.334 -7.181,-1.755 -0.765,2.073 -1.164,4.497 -0.789,5.91 0.627,2.363 9.764,5.059 11.574,3.414 1.096,-0.996 2.091,-3.297 2.566,-5.483 -1.876,-0.731 -3.937,-1.428 -6.031,-2.046 l 0,0 z" />
  <circle fill="#639bff" r="3.427" cy="46.947" cx="101.382" />
  <circle fill="#4888fa" r="2.868" cy="45.940" cx="109.28" />
  <circle fill="#2f67c9" r="2.868" cy="52.538" cx="106.287" />
  <radialGradient id="rg3"
    cx="90.874" cy="39.29"
    fx="90.874" fy="39.29"
    r="19.89"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(1.7028,-0.3387,0.276,1.3872,-70.22,16.58)">
    <stop stop-color="#1166a8" stop-opacity="0" offset="0" />
    <stop stop-color="#1166a8" stop-opacity="0.02" offset="0.45" />
    <stop stop-color="#1166a8" stop-opacity="0.63" offset="1" />
  </radialGradient>
  <path d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -5.973,-1.508 -0.375,-0.11 -0.75,-0.223 -1.124,-0.338 -0.378,-0.107 -0.753,-0.216 -1.128,-0.326 -2.107,-0.622 -4.095,-1.295 -5.835,-1.976 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.245,1.591 l 0.274,0.081 c 3.795,1.123 12.724,4.078 14.543,7.495 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" fill="url(#rg3)" />
</g></svg>

Bu SVG resmi, yukarıdaki ikinci örnek resimden ayırt edilemez ancak hepsi görünüyor ve JPEG resminizden çok daha az yalnızca 5189 bayt alıyor . Daha da optimize edilebileceğinden eminim, ancak bu gerçekten pratikte birkaç dakika içinde yapabileceklerinizin bir örneği. ( Bu yanıtı yazmak, SVG kodunu düzenlemekten çok daha uzun sürdü .)

Son olarak, bu SVG kodunu gzip ile sıkıştırmak, JPEG sürümünüzün boyutunun dörtte biri üzerinde ancak 1846 byte'a (!) Kadar küçülüyor.

Hiç kimsenin " Scour " uzantısından bahsetmediğinden şaşırdım . Inkscape ile birlikte gelir (v0.47 itibariyle) ve Ilmari Karonen tarafından belirtilen iyileştirmelerin çoğunu yapar.

Sıkıştırılmış bir SVG'ye (SVGZ) dönüştürebilir ve web sayfanıza image.svgz dosyasını yerleştirebilirsiniz:

gzip image.svg
mv image.svg.gz image.svgz

Veya, Adobe Illustrator uygulamasında, bir image.svgz dosyası yazacak olan "SVG sıkıştırılmış" olarak kaydetmeniz yeterlidir.

Test resminiz için hala JPG'den daha büyük:

image.jpg:   7268 bytes
image.svg:  22385 bytes
image.svgz: 14614 bytes

Yakın zamanda https://petercollingridge.appspot.com/svg-editor ( kaynak kod ) adresinde SVG dosyalarını optimize etmeye yardımcı olan bir araç buldum . Bu durumda, dosya boyutunu JPG boyutunun yarısından biraz daha küçük olan 3.7kB'ye düşürerek küçük bir manuel ayarlama yaparak:

SVG dosyalarını optimize etmek için bu aracın kullanılması, dosyayı manuel olarak golf oynamaktan çok daha az zaman gerektirir.

SVGOMG! SVG Optimizasyonu için Müthiş bir Web Uygulamasıdır

Uygulamanın yaratıcısı göre, SVGOMG SVGO 's " M issing G UI" dir.

Sağlanan görüntünün üzerinde çalıştırmak onu hemen hemen indirir 3.42kbve hemen yakaladıktan 1.4kbsonra.