Чи можу я зменшити розмір файлу SVG, щоб бути ближчим до його еквівалента JPEG?

У мене є зображення, яке я використовую на веб-сайті. Я хотів би використовувати SVG, щоб він міг бути будь-якого розміру і все-таки виглядати чітким.

• Цей віконце містить файл SVG, а також оригінальний файл Illustrator.

• Це експорт JPEG:

  

SVG має значно більший розмір файлу, ніж JPG. Чи можна оптимізувати SVG так, щоб він мав аналогічний розмір файлу? Я, можливо, зможу втратити частину якості, якщо це допоможе. Я спробував цей оптимізатор SVG , але це не мало великої різниці.

Якщо я збережу файл ілюстратора як JPG, відстежую результат і зберігаю його як SVG, тоді я отримую набагато менший розмір файлу, але певну втрату якості. Це змушує мене думати, що, можливо, шари в оригіналі викликають великі розміри? Чи образ, з яким я працюю, просто занадто складний, щоб бути придатним для SVG?

Ваш SVG містить вбудовану піксельну графіку для відтінку в правій нижній частині контролера. Це відповідає за ⅔ розміру файлу. Якщо ви видалите його, ваш SVG-файл співпадає з JPEG. Можливо, ви можете досягти адекватно подібного ефекту за допомогою градієнта.

Інші методи зменшення розміру файлу SVG включають:

• Видаліть усі метадані та подібні. Inkscape для цього збереже як звичайний SVG . Я припускаю, що в інших програмах є щось подібне.
• Видаліть вузли, які мало додають фігур, наприклад, у формі контролера є хибні вузли.

Це змушує мене думати, що, можливо, шари в оригіналі викликають великі розміри?

Якщо ви не використовуєте безглуздо багато шарів (придумайте один шар для кожного об'єкта), шари не повинні внести відповідний внесок у розмір файлу, і навіть тоді це буде лише частка.

Чи образ, з яким я працюю, просто занадто складний, щоб бути придатним для SVG?

Якщо ви можете розумно створити зображення з нуля¹, це не повинно бути занадто складним для формату SVG. Не існує такого порогу магічної складності, за яким розміри файлів вибухають (можливо, це стосується будь-якого нечітко обґрунтованого формату). Звичайно, якщо ви виберете лише роздільну здатність досить грубу, ви можете експортувати кожен SVG в JPEG з меншим розміром файлу. Але це не обов'язково означає, що не слід використовувати SVG.

^{¹ Це, зокрема, без простеження та подібного. Щоб навести крайній приклад: якщо ви хочете точно відтворити кожен піксель фотографії з SVG-примітивами (тобто, не вставляючи піксельну графіку у SVG), ви можете вважати результат занадто складним для ефективного представлення у форматі SVG . Але це, сподіваємось, здоровий глузд.}

Як вже було зазначено Wrzlprmft, понад 50% розміру вашого SVG-файлу займає вбудоване зображення растрового зображення PNG, яке використовується для створення досить тонкого ефекту затінення на контролері. Просто позбутися цього зображення і замінити його простим радіальним градієнтом достатньо, щоб зменшити SVG до приблизно 10 кбіт.

               
^{Оригінальне зображення з фантазійним растровим відтінком зліва, відредагована версія з простим радіальним градієнтом праворуч.}

Поки ви перебуваєте на цьому, ви також повинні перевірити свої шляхи, щоб побачити, чи є там щось спростити. Я не знайшов багато, але контур вашого контролера має кілька суміжних вузлів (біля верхньої та нижньої середини), які можна об'єднати, не роблячи видимих ​​різниць.

Це легка 50% економія саме там, але давайте ще не зупинимось. Якщо ви навіть трохи знаєте про формат SVG , ви можете зробити багато краще, ніж це.

Спочатку запустіть "Vacuum Defs" в Inkscape, щоб позбутися від марних визначень, а потім збережіть зображення як "звичайний SVG". Тепер прийшов час відкрити його в текстовому редакторі і подивитися, що ми можемо позбутися. В ідеалі вам слід використовувати редактор із вбудованим попереднім переглядом SVG, щоб ви могли швидко побачити, який вплив (сподіваємось, жоден) ваші зміни не мають на зовнішній вигляд зображення. Для цього я використовую emacs , але є й інші редактори з подібними функціями .

У будь-якому випадку, відкривши у текстовому редакторі файл SVG, почнемо його спрощувати!

• Прямо вгорі є велика марність <!-- comment -->. Просто видаліть його.

• Якщо ви редагуєте SVG прямо з Illustrator, є також марний <!DOCTYPE ... >рядок. Видаліть і його.

• Inkscape наполягає на вклеюванні у зображення непотрібного блоку метаданих RDF. Просто знайдіть <metadata ...>тег та видаліть його разом із усім, що стосується закриття </metadata>.

• Крім того, навіть якщо ви збережете файл як "звичайний SVG", Inkscape все одно засмічує його купою спеціальних атрибутів. Знайдіть кожен атрибут, який починається з inkscape:або sodipodi:видаліть їх.

• Якщо метадані та специфічні для Inkscape атрибути пішли, ви можете видалити всі невикористані атрибути простору імен XML з <svg>тегу. Вона повинна бути безпечною для видалення , щонайменше xmlns:rdf, xmlns:dc, xmlns:cc, xmlns:inkscapeі xmlns:sodipodi. Якщо є зайвий xmlns:svgатрибут, видаліть його також. Єдині атрибути простору імен, які ви мали б залишити на даний момент, це:

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

• <svg>Тег також має купу інших непотрібних атрибутів ви можете безпечно видалити, наприклад, enable-backgroundі xml:space="preserve". (Ті , які вставляються експортером Illustrator SVG, і Inkscape мало розумний , щоб зрозуміти , що вони не приносять користі) . В viewBoxатрибуті може також бути безпечно видалений з цього образу, так як він просто повторює значення x, y, widthі heightатрибути.

• Ви також можете безпечно видалити атрибути encodingта standaloneатрибути з <?xml ... ?>тегу.

• Тепер перейдемо до кишок даних про зображення. Чомусь Inkscape наполягає на призначенні idатрибутів кожному елементу, навіть якщо на них ніколи не посилаються. Будь-який idатрибут, значення якого ніколи не повторюється в іншому файлі (шукайте його!), Безпечно видалити. В основному, єдині ідентифікатори, які вам потрібно зберегти, - це градієнти та, можливо, будь-які інші об'єкти (наприклад, шляхи), знайдені всередині <defs>розділів.

• Також Inkscape любить генерувати довгі ідентифікатори на кшталт linearGradient4277. Подумайте про скорочення будь-яких ідентифікаторів, які ви не можете просто видалити на щось коротке, наприклад lg1.

• Є також кілька <defs>розділів відразу один за одним. Об'єднання їх економить кілька байтів (і в цілому спрощує структуру документа).

• Також <g>в кінці файлу є кілька порожніх груп ( елементів). Просто позбудься їх. Також можуть бути кілька послідовних груп з точно однаковим transformатрибутом (або взагалі жодної); це також безпечно злити їх.

• З якоїсь дивної причини Inkscape зберігає зайвий шлях ( dатрибут) Безьє для <circle>елементів. Це займає місце абсолютно без причин, тому просто видаліть їх. (Залиште dатрибути на <path>елементах be; вони фактично використовуються для чогось.)

• Inkscape також любить використовувати CSS в styleатрибутах, де більш конкретні атрибути будуть коротшими, наприклад, переписування fill="#4888fa"на більш багатослівні style="fill:#4888fa". Ви можете зберегти кілька байтів, розділивши ці стилі на окремі атрибути (і видаливши ті, які просто марно повторюють налаштування за замовчуванням), але вони знають трохи більше знайомства з форматом SVG, ніж більшість змін вище.

• Крім того, якщо є якісь <use ... >елементи, можливо, ви зможете зберегти кілька байт, замінивши їх фактичним елементом, до якого вони посилаються. (Звичайно, це економить простір лише в тому випадку, якщо пов'язані елементи використовуються лише один раз.) Також здається, що Inkscape любить визначати кругові градієнти опосередковано, спочатку визначаючи зупинки в a <linearGradient>, а потім посилаючись на них у a <radialGradient>; ви можете спростити це, переміщаючи упори безпосередньо всередині радіального градієнта та позбавляючись від невикористаного тепер лінійного градієнта. Як бонус, якщо, зробивши це, вам вдалося позбутися всіх xlink:hrefатрибутів, ви можете видалити xmlns:xlinkатрибут з <svg>тегу.

• Якщо ви дійсно хочете видавити кожен останній зайвий байт, шукайте числові значення з занадто великою кількістю десяткових знаків і округляйте їх до чогось більш розумного. Ось тут реально допомагає попередній перегляд, оскільки він дозволяє вам бачити, наскільки ви можете округлити значення, перш ніж воно почне бачити. Навіть якщо ви не хочете ретельно перевіряти кожне число, щоб побачити, наскільки воно може бути закругленим, ви можете принаймні вибрати низько висячі фрукти, як, скажімо, округлення значення 1.0000859пікселів до просто 1.

• Нарешті, очистіть відступ та пробіл у файлі. Щоб абсолютно мінімізувати кількість байтів, вам потрібно буде розмістити все в одному рядку (або, принаймні, лише розмістити розриви рядків перед атрибутами, де пробіл у будь-якому випадку потрібен), але це важко читати. Проте, можна досягти гідного балансу між читабельністю та компактністю за допомогою простого, консервативного відступу.

У будь-якому випадку, ось що мені вдалося вручну відредагувати ваше зображення SVG:

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

Цей SVG-образ виглядає майже не відрізняється від другого прикладу вище, і він займає лише 5189 байт, що значно менше, ніж ваше зображення JPEG. Я впевнений, що це ще можна оптимізувати, але це справді лише приклад того, що ви можете зробити за кілька хвилин на практиці. ( Набрав цю відповідь набагато більше часу, ніж власне редагувати SVG-код.)

Нарешті, стиснення цього SVG-коду за допомогою gzip зменшує його до лише 1846 байт (!), Трохи перевищуючи чверть розміру вашої версії JPEG.

Я трохи здивований, що ніхто не згадав про розширення " Scour ". Він в комплекті з Inkscape (станом на v0.47), і робить багато оптимізацій, згаданих Ільмарі Каронен.

Ви можете перетворити його в стислий SVG (SVGZ) і розмістити image.svgz на своїй веб-сторінці:

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

Або в Adobe Illustrator просто збережіть як "SVG стиснуто", який напише файл image.svgz.

Для вашого тестового зображення він все-таки більший за JPG, хоча:

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

Нещодавно я знайшов інструмент на https://petercollingridge.appspot.com/svg-editor ( вихідний код ), який допомагає оптимізувати файли SVG. У цьому випадку він має хороші результати, зменшивши розмір файлу до 3,7 КБ, що становить трохи більше половини розміру JPG, з невеликим коригуванням вручну:

Використання цього інструменту для оптимізації файлів SVG вимагає значно менше часу, ніж гольфування файлу вручну.

SVGOMG! є дивовижним веб-додатком для оптимізації SVG

За словами автора програми, SVGOMG - це " M issing G UI" SVGO .

Якщо запустити його на наданому зображенні, він зводить його до справедливого 3.42kbта одразу 1.4kbпісля його отримання.