Як ужо паказваў 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.