3

По факту вопрос один, как правильно сохранить SVG, чтобы в последствии его можно было редактировать без проблем?

Если коротко, то столкнулся с проблемой при экспорте в SVG из векторных редакторов Illustrator или Inkscape. Возникает проблема при последующем открытии, - что-то, куда-то, улетает или пропадает.

Например при экспорте из Illustrator и последующем открытии в нем пропадает (т.е. исчезают из структуры документа) часть текстовок. Так же может выпасть из документа часть элементов, если была применена clip mask.

Еще одна проблема в нем же, если ты сделал элемент без заполнения у него fill аттрибут, то будет отсутствовать в DOM, а если ты отрисовал с заполнением а потом удалил заполнение? получишь атрибут fill="none" в DOM.

Inkscape тоже доставляет проблемы,- нельзя просто так открыть SVG с presentation attributes и сохранить его потому, что он сохранит оформление в стилях. Так же экспорт в SVG в inkscape приводит к его не читабельности в том же Illustrator. А так же его большая медлительность с этими файлами и часть элементов может, также улетать, причем обычно это другая часть, но это происходит реже чем в Illustrator.

На удивление браузеры SVG отрисовывают так, как она выглядела на момент сохранения в редакторе.

Данные проблемы возникают на тяжелых файлах со сложной структурой (под сложной структурой имеется в виду большое количество не примитивов, а группировок, clip и mask) и размером от 3мб до 7мб

4
  • А зачем редактировать экспортированный svg? У вас должен быть родной ai. Никто не обещал, что результат экспорта можно нормально импортировать обратно.
    – Alexey Ten
    7 мая 2019 в 6:44
  • я редактирую svg в ide 7 мая 2019 в 7:09
  • @ StrangerintheQ читал в твоих комментариях, что и оптимизатором от Peter Collingridge тоже пользуешься 7 мая 2019 в 8:17
  • @AlexeyTen с удовольствием буду работать только с ai если подскажкте как пакетно в нескольких десятках документов поменять плейсхолдеры на данные из стороннего источника, а потом экспортировать в растр...
    – fens
    8 мая 2019 в 7:35

1 ответ 1

2

На удивление браузеры svg отрисовывают так как она выглядела на момент сохранения в редакторе...

Если конкретно речь идёт о редакторе Inkscape то, как мне кажется вся проблема в том, что он бесплатный. И разработчики добавляют служебную информацию в файл, чтобы при открытии файла был трафик на их сайт. Надо же как-то отбивать бесплатность редактора. Но это сугубо моё мнение :-)

Для примера вот так выглядит код окружности, нарисованной в 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>

Как убрать всю эту служебную информацию?

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот код после оптимизации с помощью SVG-EDITOR

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" 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>

Сравните насколько стал короче код после оптимизации svg-editor

Update

Обратите внимание на это объявление Namespace, которое появляется после обработки svg-editor.

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

Оно не совсем корректно, поэтому его необходимо вручную заменить на:

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

Если не заменить Namespace на правильную запись, то не будут работать команды использующие ссылки по id

1

Ваш ответ

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

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