Як вже вказував 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>; вони фактично використовуються для чого-небудь.)

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

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

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

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

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

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

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