Какие программы и генераторы можно применять для облегчения написания кода svg

#javascript #css #svg #поиск_программ

Какую посоветуете программу для SVG?

Желательно с "генерацией кода" HTML, если есть такое.  

Update

Автор вопроса видимо имел ввиду программы для помощи в написании кода svg
    

Ответы

Ответ 1

Update

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


SVG GENERATOR PATH


  

Очень удобная вещь. 

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

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

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


Path Length Calculator   


     

Копируете формулу path и получаете его максимальную длину.

Вычисление длины path необходима для написания кода анимации рисования линий, посредством
изменения атрибута stroke-dasharray   


SVG Path Builder   


  

Добавляете, удаляете, перемещаете узловые точки для получения нужной формы кривой.
В нижнем правом углу автоматом пишется код path 


BOXY SVG


Быстрый, многофункциональный векторный редактор 



Генераторы clipPath


https://codepen.io/jh3y/pen/XqVQqa  
http://bennettfeely.com/clippy/


 Генераторы базовых фигур SVG


Генератор прямых линий   
Прямые отрезки – path  
Генератор прямоугольников
Генератор окружностей
Генератор эллипсов     


Генераторы кривых Безье


Кубическая кривая Безье – The cubic Bezier curve 
Кривые Безье второго порядка 
Гладкая поликривая Безье второго порядка  


Принцип для всех, вышеперечисленных генераторов svg кода одинаков: двигаете узловые
точки, перемещаете их рычаги и копируете код SVG. 

Процесс использования генераторов нагляден, удобен,  сразу видно какие атрибуты path
динамически изменяются. Что помогает понять, как они работают.
Также их выгодно применять, так как на выходе получается чистый код, без добавления
служебной информации, которую вносят векторные редакторы в файл SVG

Конвертер SVG path

Convert SVG path to all-relative or all-absolute

Преобразует все команды либо в относительную, либо в абсолютную форму записи.

Инструменты разработки   

К сожалению ничего, такого, специализированного нет. Да в принципе и не нужно особо.
 Так как svg легко правится в текстовом редакторе, например: Notepad++
Рисовать сложные фигуры можно в векторных редакторах: Inkscape, Adobe Illustrator.

Для рисования простых фигур есть и такие редакторы:

editor.method    

svg-edit.github.io  

Draw SVG

JXNBLK / PATHS    

Оптимизаторы кода SVG  


SVGOMG - автор Jake Archibald 
SVG Editor - автор Peter Collingridge 
SVGO-GUI - автор GreLI   


Мне особенно нравится SVG Editor и его в основном использую, практически на каждом
приложении.     

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

Update 4.12.2019 

Генераторы параметров атрибутов для анимации


Cubic-bezier 
Генератор keysplines
Генератор keyTimes
Генератор анимации линий
Всё просто: перетаскиваете свой файл SVG в окно загрузки утилиты и получаете на выходе
готовый файл с анимацией рисования линии.