Bisakah saya mengurangi ukuran file SVG agar lebih dekat dengan setara JPEG?

Saya memiliki gambar yang saya gunakan di situs web. Saya ingin menggunakan SVG sehingga bisa berapapun ukurannya dan tetap terlihat segar.

• Dropbox ini berisi file SVG dan juga file Illustrator asli.

• Ini adalah ekspor JPEG:

  

SVG memiliki ukuran file yang jauh lebih besar daripada JPG. Apakah mungkin untuk mengoptimalkan SVG sehingga memiliki ukuran file yang serupa? Saya mungkin bisa kehilangan beberapa kualitas jika itu akan membantu. Saya sudah mencoba pengoptimal SVG ini , tetapi tidak ada banyak perbedaan.

Jika saya menyimpan file ilustrator sebagai JPG, lacak hasilnya dan simpan sebagai SVG, maka saya mendapatkan ukuran file yang jauh lebih kecil tetapi beberapa kehilangan kualitas. Ini membuat saya berpikir bahwa mungkin lapisan dalam aslinya menyebabkan ukuran besar? Apakah gambar yang saya kerjakan terlalu rumit untuk cocok untuk SVG?

SVG Anda berisi grafik piksel yang disematkan untuk naungan di kanan bawah controller. Ini bertanggung jawab atas ⅔ ukuran file. Jika Anda menghapusnya, file SVG Anda setara dengan JPEG Anda. Anda mungkin dapat mencapai efek yang mirip dengan gradien.

Teknik lain untuk mengurangi ukuran file SVG meliputi:

• Hapus semua Metadata dan sejenisnya. Inkscape memiliki Save as plain SVG untuk ini. Saya kira program lain memiliki sesuatu yang serupa.
• Hapus node yang menambahkan sedikit ke bentuk, misalnya, ada node palsu pada bentuk pengontrol Anda.

Ini membuat saya berpikir bahwa mungkin lapisan dalam aslinya menyebabkan ukuran besar?

Kecuali jika Anda menggunakan banyak lapisan yang tidak masuk akal (pikirkan satu lapisan untuk setiap objek), layer tidak boleh memberikan kontribusi yang relevan dengan ukuran file, dan bahkan kemudian, itu hanya sebagian kecil.

Apakah gambar yang saya kerjakan terlalu rumit untuk cocok untuk SVG?

Jika Anda dapat membuat gambar dari awal ¹ seharusnya tidak terlalu rumit untuk format SVG. Tidak ada ambang batas kompleksitas magis di luar ukuran file yang meledak (mungkin ini berlaku untuk format yang secara wajar tidak jelas). Tentu saja, jika Anda hanya memilih resolusi yang cukup kasar, Anda dapat mengekspor setiap SVG ke JPEG yang memiliki ukuran file lebih kecil. Tetapi itu tidak selalu berarti bahwa Anda tidak boleh menggunakan SVG.

^{¹ Itu khususnya tanpa pelacakan dan sejenisnya. Untuk memberikan contoh ekstrem: Jika Anda ingin mereproduksi dengan tepat setiap piksel foto dengan SVG primitif (yaitu, tanpa menyematkan grafik piksel dalam SVG), Anda mungkin memang menganggap hasilnya terlalu rumit untuk direpresentasikan secara efisien dalam format SVG. . Tapi semoga itu masuk akal.}

Seperti yang telah ditunjukkan Wrzlprmft, lebih dari 50% ukuran file SVG Anda diambil oleh gambar bitmap PNG yang digunakan untuk menciptakan efek bayangan yang cukup halus pada pengontrol. Hanya menyingkirkan gambar itu, dan menggantinya dengan gradien radial sederhana, sudah cukup untuk mengecilkan SVG menjadi sekitar 10kb.

               
^{Gambar asli dengan bayangan bitmap yang mewah di sebelah kiri, versi yang diedit dengan gradien radial sederhana di sebelah kanan.}

Saat Anda melakukannya, Anda juga harus memeriksa jalur Anda untuk melihat apakah ada sesuatu yang disederhanakan di sana. Saya tidak menemukan banyak, tetapi garis besar pengontrol Anda memang memiliki beberapa simpul yang berdekatan (dekat bagian atas dan bawah tengah) yang dapat digabungkan tanpa membuat perbedaan yang terlihat.

Itu penghematan 50% mudah di sana, tapi jangan berhenti dulu. Jika Anda tahu sedikit tentang format SVG , Anda dapat melakukan jauh lebih baik dari itu.

Pertama, jalankan "Kekurangan Vakum" di Inkscape untuk menyingkirkan definisi yang tidak berguna, dan kemudian simpan gambar sebagai "SVG biasa". Sekarang, saatnya untuk membukanya di editor teks, dan lihat apa yang bisa kita singkirkan. Idealnya, Anda harus menggunakan editor dengan pratinjau SVG terintegrasi, sehingga Anda dapat dengan cepat melihat apa efeknya (mudah-mudahan, tidak ada) hasil edit Anda pada penampilan gambar. Saya menggunakan emacs untuk itu, tetapi ada editor lain dengan fitur serupa di luar sana.

Bagaimanapun, dengan file SVG dibuka di editor teks Anda, mari kita mulai menyederhanakannya!

• Tepat di atas, ada yang tidak berguna <!-- comment -->. Hapus saja.

• Jika Anda mengedit SVG langsung dari Illustrator, ada juga <!DOCTYPE ... >baris yang tidak berguna . Hapus juga.

• Inkscape bersikeras menempelkan blok metadata RDF yang tidak berguna ke dalam gambar Anda. Cukup cari <metadata ...>tag dan hapus, beserta semuanya hingga dan termasuk penutupnya </metadata>.

• Juga, bahkan jika Anda menyimpan file sebagai "SVG biasa", Inkscape masih menyebarnya dengan banyak atribut khusus. Temukan setiap atribut yang dimulai dengan inkscape:atau sodipodi:dan hapus mereka.

• Dengan hilangnya metadata dan atribut spesifik Inkscape, Anda dapat menghapus semua atribut namespace XML yang tidak digunakan dari <svg>tag. Itu harus aman untuk menghapus setidaknya xmlns:rdf, xmlns:dc, xmlns:cc, xmlns:inkscapedan xmlns:sodipodi. Jika ada xmlns:svgatribut yang berlebihan , hapus juga. Atribut namespace hanya yang harus Anda tinggalkan pada titik ini adalah:

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

• The <svg>tag juga memiliki banyak atribut berguna lainnya Anda dapat dengan aman menghapus, seperti enable-backgrounddan xml:space="preserve". (Mereka dimasukkan oleh eksportir Illustrator SVG, dan Inkscape tidak cukup pintar untuk menyadari mereka tidak berguna.) The viewBoxatribut juga dapat dengan aman dihapus dari gambar ini, karena hanya mengulangi nilai-nilai x, y, widthdan heightatribut.

• Anda juga dapat menghapus encodingdan standaloneatribut dari <?xml ... ?>tag dengan aman.

• Sekarang mari kita sampai ke nyali data gambar. Untuk beberapa alasan, Inkscape bersikeras menetapkan idatribut untuk setiap elemen, bahkan jika mereka tidak pernah direferensikan. Setiap idatribut yang nilainya tidak pernah diulang di tempat lain di file (mencarinya!) Aman untuk menghapus. Pada dasarnya, satu-satunya ID yang perlu Anda pertahankan adalah yang untuk gradien, dan mungkin untuk objek lain (misalnya jalur) yang ditemukan di dalam <defs>bagian.

• Juga, Inkscape suka menghasilkan ID yang panjang suka linearGradient4277. Pertimbangkan untuk menyingkat ID apa pun yang tidak bisa Anda hapus menjadi sesuatu yang pendek lg1.

• Ada juga beberapa <defs>bagian setelah satu sama lain. Menggabungkannya menghemat beberapa byte (dan menyederhanakan struktur dokumen secara umum).

• Ada juga beberapa grup kosong ( <g>elemen) di akhir file. Singkirkan mereka. Mungkin juga ada beberapa grup berturut-turut dengan transformatribut yang sama persis (atau tidak ada sama sekali); aman juga untuk menggabungkannya.

• Untuk beberapa alasan aneh, Inkscape menyimpan jalur Bezier berlebihan ( datribut) untuk <circle>elemen. Itu memakan ruang tanpa alasan, jadi hapus saja itu. (Biarkan datribut pada <path>elemen menjadi; mereka sebenarnya digunakan untuk sesuatu.)

• Inkscape juga suka menggunakan CSS dalam styleatribut di mana atribut yang lebih spesifik akan lebih pendek, misalnya menulis ulang fill="#4888fa"ke yang lebih bertele-tele style="fill:#4888fa". Anda dapat menyimpan beberapa byte dengan memecah gaya-gaya tersebut menjadi atribut individual (dan menghapus yang hanya menggunakan pengaturan default yang tidak berguna), tetapi itu membutuhkan sedikit lebih banyak keakraban dengan format SVG daripada sebagian besar perubahan di atas.

• Juga, jika ada <use ... >elemen apa pun , Anda mungkin dapat menyimpan beberapa byte dengan menggantinya dengan elemen aktual yang mereka tautkan. (Tentu saja, ini hanya menghemat ruang jika elemen terkait hanya digunakan sekali.) Tampaknya juga Inkscape suka mendefinisikan gradien melingkar secara tidak langsung, pertama mendefinisikan berhenti di a <linearGradient>, dan kemudian referensi mereka di a <radialGradient>; Anda dapat menyederhanakannya dengan menggerakkan pemberhentian secara langsung di dalam gradien radial, dan menghilangkan gradien linier yang sekarang tidak digunakan. Sebagai bonus, jika, dengan melakukan ini, Anda berhasil menyingkirkan semua xlink:hrefatribut, Anda dapat menghapus xmlns:xlinkatribut dari <svg>tag.

• Jika Anda benar-benar ingin memeras setiap byte tambahan terakhir, cari nilai numerik dengan desimal yang terlalu banyak, dan bulatkan ke sesuatu yang lebih masuk akal. Di sinilah pratinjau langsung sangat membantu, karena pratinjau memungkinkan Anda melihat seberapa banyak Anda dapat membulatkan nilainya sebelum mulai terlihat. Meskipun Anda tidak ingin menguji setiap angka dengan hati-hati untuk melihat seberapa banyak itu dapat dibulatkan, Anda setidaknya dapat memetik buah yang tergantung rendah seperti, katakanlah, membulatkan nilai 1.0000859piksel menjadi adil 1.

• Akhirnya, bersihkan lekukan dan spasi putih di file. Untuk benar-benar meminimalkan jumlah byte, Anda harus meletakkan semuanya pada satu baris (atau paling tidak, hanya meletakkan break baris di depan atribut, di mana spasi tetap diperlukan), tetapi itu benar-benar sulit dibaca. Namun, masih memungkinkan untuk mencapai keseimbangan yang layak antara keterbacaan dan kekompakan dengan beberapa indentasi sederhana dan konservatif.

Ngomong-ngomong, inilah yang saya berhasil edit gambar SVG Anda menjadi:

<?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>

Gambar SVG ini terlihat sama sekali tidak dapat dibedakan dari contoh gambar kedua di atas, dan hanya memakan waktu 5189 byte, jauh lebih sedikit daripada gambar JPEG Anda. Saya yakin ini dapat dioptimalkan lebih lanjut, tetapi ini benar-benar hanya contoh dari apa yang dapat Anda lakukan dalam beberapa menit dengan latihan. (Butuh waktu lebih lama untuk mengetikkan jawaban ini daripada benar-benar mengedit kode SVG.)

Akhirnya, mengompresi kode SVG ini dengan gzip menyusut menjadi hanya 1846 byte (!), Hanya lebih dari seperempat ukuran versi JPEG Anda.

Saya sedikit terkejut tidak ada yang menyebutkan ekstensi " Gerusan ". Ini dibundel dengan Inkscape (pada v0.47), dan melakukan banyak optimasi yang disebutkan oleh Ilmari Karonen.

Anda dapat mengonversinya menjadi SVG (SVGZ) terkompresi dan meletakkan image.svgz di halaman web Anda:

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

Atau, di Adobe Illustrator, cukup simpan sebagai "SVG terkompresi", yang akan menulis file image.svgz.

Untuk gambar uji Anda itu masih lebih besar dari JPG, meskipun:

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

Baru-baru ini saya menemukan alat di https://petercollingridge.appspot.com/svg-editor ( kode sumber ) yang membantu mengoptimalkan file SVG. Ini memiliki hasil yang baik dalam hal ini, membawa ukuran file ke 3,7 kB, yang hanya lebih dari setengah ukuran JPG, dengan sedikit penyesuaian manual:

Menggunakan alat ini untuk mengoptimalkan file SVG membutuhkan waktu jauh lebih sedikit daripada mem-golf file secara manual.

SVGOMG! adalah Aplikasi Web yang Luar Biasa untuk Pengoptimalan SVG

Menurut pencipta aplikasi, SVGOMG adalah SVGO 's " M Issing G UI".

Menjalankannya pada gambar yang disediakan membawanya ke hanya 3.42kb, dan 1.4kbsetelah gzip.