Как оптимизировать svg код полученный из векторного редактора

Question

Мне необходимо как-то оптимизировать код, получаемый на выходе из векторного редактора Inkscape

Для примера рисую базовую фигуру SVG - circle, формула которой состоит всего из нескольких строк вместе со всеми объявлениями SVG формата:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="40" height="40"    viewBox="0 0 40 40"  > 
    <circle cx="20" cy="20" r="18.1" style="fill:none;stroke-width:2;stroke:#00e700"/>  
</svg> 

Рисую ту же окружность в векторном редакторе Inkscape и сравниваю с полученный код:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   width="40"
   height="40"
   viewBox="0 0 40 40"
   id="svg2"
   sodipodi:docname="Shape-circle.svg"
   inkscape:version="0.92.3 (2405546, 2018-03-11)">
  <metadata
     id="metadata8">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs6" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1400"
     inkscape:window-height="987"
     id="namedview4"
     showgrid="true"
     showguides="true"
     inkscape:guide-bbox="true"
     inkscape:zoom="11.8"
     inkscape:cx="17.033898"
     inkscape:cy="20"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg2">
    <inkscape:grid
       type="xygrid"
       id="grid815" />
    <sodipodi:guide
       position="40,5"
       orientation="1,0"
       id="guide817"
       inkscape:locked="false" />
    <sodipodi:guide
       position="0,5"
       orientation="1,0"
       id="guide819"
       inkscape:locked="false" />
    <sodipodi:guide
       position="20,12.881356"
       orientation="1,0"
       id="guide821"
       inkscape:locked="false" />
    <sodipodi:guide
       position="35,0"
       orientation="0,1"
       id="guide823"
       inkscape:locked="false" />
    <sodipodi:guide
       position="31.864407,20"
       orientation="0,1"
       id="guide825"
       inkscape:locked="false" />
    <sodipodi:guide
       position="32.372881,40"
       orientation="0,1"
       id="guide827"
       inkscape:locked="false" />
  </sodipodi:namedview>
  <circle
     style="fill:none;fill-opacity:1;stroke:#00e700;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
     id="path829"
     cx="20"
     cy="20"
     r="18.135593" />
</svg>

Размер файла 2.5кB и 94 строки служебного кода Inkscape

Как мне оптимизировать код, убрать всю избыточную служебную информацию для векторного редактора, уменьшить количество знаков после запятой и т.д.

Answer 1

Для оптимизации кода есть оптимизатор - SVG-EDITOR от Peter Collingridge

Интерфейс редактора прост и интуитивно понятен.

• На первой вкладке "Input" копируем в окно содержание svg файла.

• На второй вкладке - "Optimise" набор чекбоксов, выбирая которые можно гибко настроить режим оптимизации.

В группе радиокнопок -Optimisation - три набора режимов оптимизации.

• Допустим выбираем самый жёсткий режим - Extreme (may alter image quality)

• Необходимо отключить следующие чекбоксы:

Remove whitespace - иначе код будет идти сплошной строкой
Combine paths where possible - иначе все формулы патчей будут соединены вместе

• Далее в Decimal places выбираем или оставляем как есть (1) количество знаков после запятой. При этом смотрим на изображение в окне, если происходят изменения в сторону ухудшения изображения, то количество знаков нужно увеличить.

В реальном режиме времени при изменениях настроек оптимизации будет показываться размер оптимизированного файла, который уменьшается по сравнению с не оптимизированным файлом в несколько раз.

UPDATE

Используйте Scour напрямую: https://github.com/scour-project/scour (это то, что Inkscape подключает в диалоговом окне «Сохранить как ...> Оптимизированный SVG»)

Источник

Answer 2

• Если хотите воспользоваться уже готовым, чужим файлом inkscape, то тогда для оптимизации кода нужно воспользоваться SVG-Editor по методике 1-го ответа

• Если вы создаёте самостоятельно svg изображение в Inkscape, то
  можно просто сохранить "как оптимизированный svg"

И кстати inkscape позволяет сохранять не только svg но и canvas

Answer 3

Воспользуйтесь онлайн инструментом:

► http://www.kit-jobs.ru/seo/en-optimization.php

, и будет вам счастье!