Как перевести растровую картинку в SVG
Поиск

Как перевести растровую картинку в SVG

Nikel, 02.04.2019

Формат SVG все чаще используется во всемирной паутине. Но как создавать свои собственные изображения SVG? Если это какие-то графические примитивы, простые фигуры, то можно еще их создать  написав код.

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

Иногда нужен качественно созданный SVG, который может использоваться, например, скриптом. Как-то передо мной стояла задача отрисовки интерактивной карты скриптом, для работ которого требовался svg-код.

Какие же способы перевода изображения в SVG существуют? Можно преобразовывать картинку в код, используя редакторы векторной графики или онлайн-конвертер.

  • Во-первых, есть возможность автоматического перевода в SVG. Но, его качество его оставляет желать лучшего.
  • Во-вторых, можно использовать ручной способ перевода. Он основан на обводке элементов картинки. На этом методе, пожалуй, мы остановимся поподробнее.

Мы рассмотрим конвертацию изображения в программе InkScape.

Перевод изображения в SVG в векторном редакторе InkScape

Пусть мы рисуем произвольную линию с помощью элемента <path>. Как известно, у него есть атрибут d, показывающий что именно рисуется, команды внутри этого атрибута в SVG могут быть как абсолютные, так и относительные. Так, абсолютная команда M показывает с каких точных координат начинать рисование, а относительная m — показывает на какую величину по вертикали и горизонтали надо сместиться относительно определенной точки.

Естественно, абсолютные команды универсальнее и предпочтительнее сохранять файл именно с ними.

Помимо того,надо смотреть, чтобы в SVG не вставлялись специфические команды, с которыми редактор графики может сохранить файл. Воспользуемся бесплатным векторным редактором InkScape. Эта программа-аналог Illustrator’а и Corel’а работает как под WIndows, так и под Linux.

Я не могу сказать, что он работает идеально, замечены разного рода подвисания и баги, но его преимуществом является то, что он делает такой SVG-код, который приближен к тому, что нужен нам.

Автоматический способ конвертации изображения

Сначала я покажу, как преобразовать формат изображения, используя встроенные инструменты InkScape. Он подойдет конечно не для любых случаев, из-за не совсем удовлетворительного получаемого результата, но в некоторых случаях может использоваться.

В качестве примера возьмем карту Росии в формате png. Откроем картинку в нашем редакторе и выберем в верхнем меню Контур -> Векторизовать растр. В открывшемся окошке с параметрами установим количество Сканирований 12, чтобы карта достаточно точно передалась (чем меньше количество сканирований, тем более грубое приближение это будет, если картинка простая, можно уменьшать количество сканирований).


Полученная карта будет на первый взгляд мало отличаться от оригинала. Но она будет состоять из огромного числа точек, многие из которых лишние.

Теперь разгруппируем полученный рисунок, нажав в главном меню Объект -> Разгруппировать.

Теперь оконтурим нашу карту, выбрав пункт Контур ->Оконтурить объект.

В результате мы получим контуры регионов России, но если мы увеличим карту, то увидим, что там также есть много мелких контуров и большие контуры не совсем точно обведены.То есть если мы хотим использовать контуры объектов( в данном случае получить отдельные контуры каждого региона) этот способ не годится.

Лучше воспользоваться ручной обводкой объектов, так мы получим лучший результат.

Ручной способ конвертации в формат SVG

Первым этапом загружаем картинку, которую нужно преобразовать (мы воспользуемся той же, с картой России). Необходимо установить размеры страницы, чтобы они точно совпадали с размерами изображения. Нажимаем Файл  -> Свойства документа, и в открывшемся окне установим размер страницы. Можем вручную указать размер (ширину и высоту), а можем нажать пункт Подогнать размер страницы под содержимое и использовать кнопку Подогнать размер страницы под рисунок или выделение. Тогда страница автоматически подстроится под размер рисунка.

Начинаем обводить изображение при помощи инструмента перо(рисование кривых Безье и прямых линий).

Точки на кривой это так называемые узлы, их надо ставить очень близко к границе рисунка. Можно соединять точки прямыми линиями (просто кликая мышкой на нужное место, чтобы появлялись новые точки).Если требуется обвести закругление,необходимо тянуть линию с зажатой левой кнопкой мыши , таким образом мы рисуем кривые(слева и справа от точки при этом появляются рычаги). Изменяя положение рычагов(угол наклона и их длину), мы изменяем наклон и ширину кривой

В этих точках может быть острый угол или скругление.

После того, как мы закончили обводить, обязательно нужно соединить с начальной точкой, чтобы получился замкнутый контур(при наведении мыши начальная точка будет подсвечиваться красным).

Теперь нужно исправить мелкие неточности полученного контура. Редактировать узлы контура можно с помощью специального инструмента.

Что же можно делать этим инструментом? Например, добавлять или удалять узлы в замкнутом контуре. Для этого нужно выделить два соседних узла, между которыми появится новый узел после нажатия кнопки «. Выделение же узла и нажатие кнопки « приводит к его удалению.

Также имеется возможность изменять свойства точек:сделать выделенные узлы острыми(когда из них выходят прямые) или сглаженными(находящимися на вершине кривой).

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

После того, как кривая будет идеально точно совпадать с рисунком, подбираем подходящую обводку и заливку, открываем соответствующую панель.  Выбираем палитру и подходящий цвет.  Фоновую картинку, которую мы обводили удаляем(выделив и нажав кнопку delete).

Прежде чем сохранять полученный результат, нужно в настройках указать, что сохранение будет происходить в абсолютных координатах а не в относительных, как зачастую любит выдавать программа InkScape. Открываем Правка-> Параметры -> Ввод и вывод и находим Подраздел Данные контуров. Формат записи путей устанавливаем абсолютный. Также стоит уменьшить точность чисел, количество знаков чисел записываемых в SVG.

Когда все будет выполнено, нажимаем пункт Файл -> Сохранить как и выбираем из выпадающего списка Простой SVG.

Ну вот, пожалуй, на этом и все. Спасибо за просмотр.