12

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

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

Update

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

7
  • 6
    Adobe Illustrator
    – andreymal
    26 дек 2018 в 19:53
  • Иллюстратор сейчас лучше всех, все эти генераторы, скетчи итп делают вывод, что его потом в текстовом редакторе почти невозможно подправить. 27 дек 2018 в 5:05
  • 1
    @ArtemGorlachev я помню ты мне говорил что ты не пользуешься редакторами для svg а всё пишешь с нуля - руками .... 27 дек 2018 в 5:59
  • @ПавелВаршавский, это было касательно какого-то примера со звездой, в реальной жизни дизайнеры присылают убитые скетчем иконки, которые как раз иллюстратором и приводятся в редактируемый вид. 27 дек 2018 в 6:01
  • 1
    @ArtemGorlachev хоть раз ты сказал правду ... 27 дек 2018 в 6:07

1 ответ 1

32

Update


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

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

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

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

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

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


Make some waves!

Ещё один генератор волн. Имеется возможность выбирать форму волны от прямоугольных до кривых Безье.


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

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

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

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

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

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

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

Генераторы clipPath

Update 13.11.2023


Генераторы feColorMatrix


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

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

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

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

Конвертеры

Конвертер SVG path

Convert SVG path to all-relative or all-absolute

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

URL-encoder for SVG

Конвертер букв в path

Google font to SVG path

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

Конвертеры из растрового формата в векторный

Бесплатный онлайн конвертер позволяет конвертировать изображения в формат SVG (Scalable Vector Graphics) (внимание! бета-версия конвертера). Вы можете как загрузить файл, так и указать ссылку на изображение. Вы также можете наложить цифровые эффекты.

Позволяет быстро произвести векторизацию или трассировку — процесс получения растрового изображения и его перерисовку в векторное изображение.

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

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

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

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

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

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

Update 4.12.2019

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

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

Update 30.11.2023

  • Генератор QR-кода в формате SVG

php-пакет composer endroid/qr-code

6
  • это призыв забацать тут ответ про d3? )) 4 апр 2019 в 13:11
  • @Stranger in the Q Я просто набрёл на простенький векторный редактор, в котором можно быстро получить патч без лишнего мусора и добавил ссылку в свою подборку подобных инструментов. 4 апр 2019 в 13:19
  • Ну окей, тогда не буду, в засаде посижу =)) 4 апр 2019 в 13:22
  • @StrangerintheQ Добавляй, если есть желание отдельным ответом, - больше инструментов, больше пользы 4 апр 2019 в 13:24
  • @Alexandr_TT по моему инкскапе отлично справляется со всём перечисленном 19 дек 2019 в 19:46

Ваш ответ

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

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