9

Мне необходимо как-то оптимизировать код, получаемый на выходе из векторного редактора 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

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

3 ответа 3

7

Для оптимизации кода есть оптимизатор - 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»)

Источник

1
  • 3
    Из твоих ответов в пору уже учебник собирать)))))
    – Air
    23 янв 2019 в 8:44
2
  • Если хотите воспользоваться уже готовым, чужим файлом inkscape, то тогда для оптимизации кода нужно воспользоваться SVG-Editor по методике 1-го ответа

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

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

введите сюда описание изображения

0

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

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

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

3
  • Ваш ответ можно улучшить с помощью дополнительной информации. Пожалуйста, нажмите править для добавления подробностей, например, цитат или документации, чтобы другие могли подтвердить правильность вашего ответа. Вы можете найти дополнительную информацию о том, как писать хорошие ответы в Справке. 11 окт 2021 в 10:18
  • добро пожаловать на Stack Overflow на русском! стоило опубликовать это как комментарий, а не ответ. чтобы вам стали доступны комментарии к чужим сообщениям, надо набрать пятьдесят баллов репутации — это всего пять голосов «за» любой ваш ответ или вопрос 11 окт 2021 в 10:24
  • 1
    Обычно использую SVGOMG для оптимизации, мне его когда-то Alexandr_TT посоветовал, там и опции для настройки имеются.
    – De.Minov
    11 окт 2021 в 10:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.