Есть ли инструмент для создания SVG-путей из SVG файла?

Кто-нибудь знает инструмент, который может взять файл SVG и преобразовать его в путь SVG HTML 5? вы знаете, часть d="M 0 0 L 20 134 L 233 24 Z" fill="#99dd79"?

Я прихожу сюда: Используйте Adobe Illustrator для создания SVG-пути, используя" move to " Команды

Но не уверен. Означает ли это, что Illustrator может использовать любую строку и сохранять ее как путь SVG?

Примечание: Да, есть inkscape, но я ищу поддержку градиента и маскировки, если это возможно. Я хотел бы иметь возможность использовать файлы .ai и экспортировать их с помощью иллюстратора или Acrobat или что-то в этом роде... есть ли что-то там? Или он встроен в Illustrator или Acrobat в качестве выходного формата?

Ответ 1

Откройте SVG с помощью текстового редактора. Если вам повезет, файл будет содержать что-то вроде:

<path d="M52.52,26.064c-1.612,0-3.149,0.336-4.544,0.939L43.179,15.89c-0.122-0.283-0.337-0.484-0.58-0.637  c-0.212-0.147-0.459-0.252-0.738-0.252h-8.897c-0.743,0-1.347,0.603-1.347,1.347c0,0.742,0.604,1.345,1.347,1.345h6.823  c0.331,0.018,1.022,0.139,1.319,0.825l0.54,1.247l0,0L41.747,20c0.099,0.291,0.139,0.749-0.604,0.749H22.428  c-0.857,0-1.262-0.451-1.434-0.732l-0.11-0.221v-0.003l-0.552-1.092c0,0,0,0,0-0.001l-0.006-0.011l-0.101-0.2l-0.012-0.002  l-0.225-0.405c-0.049-0.128-0.031-0.337,0.65-0.337h2.601c0,0,1.528,0.127,1.57-1.274c0.021-0.722-0.487-1.464-1.166-1.464  c-0.68,0-9.149,0-9.149,0s-1.464-0.17-1.549,1.369c0,0.688,0.571,1.369,1.379,1.369c0.295,0,0.7-0.003,1.091-0.007  c0.512,0.014,1.389,0.121,1.677,0.679l0,0l0.117,0.219c0.287,0.564,0.751,1.473,1.313,2.574c0.04,0.078,0.083,0.166,0.126,0.246  c0.107,0.285,0.188,0.807-0.208,1.483l-2.403,4.082c-1.397-0.606-2.937-0.947-4.559-0.947c-6.329,0-11.463,5.131-11.463,11.462  S5.15,48.999,11.479,48.999c5.565,0,10.201-3.968,11.243-9.227l5.767,0.478c0.235,0.02,0.453-0.04,0.654-0.127  c0.254-0.043,0.507-0.128,0.713-0.311l13.976-12.276c0.192-0.164,0.874-0.679,1.151-0.039l0.446,1.035  c-2.659,2.099-4.372,5.343-4.372,8.995c0,6.329,5.131,11.461,11.462,11.461c6.329,0,11.464-5.132,11.464-11.461  C63.983,31.196,58.849,26.064,52.52,26.064z M11.479,46.756c-4.893,0-8.861-3.968-8.861-8.861s3.969-8.859,8.861-8.859  c1.073,0,2.098,0.201,3.051,0.551l-4.178,7.098c-0.119,0.202-0.167,0.418-0.183,0.633c-0.003,0.022-0.015,0.036-0.016,0.054  c-0.007,0.091,0.02,0.172,0.03,0.258c0.008,0.054,0.004,0.105,0.018,0.158c0.132,0.559,0.592,1,1.193,1.05l8.782,0.727  C19.397,43.655,15.802,46.756,11.479,46.756z M15.169,36.423c-0.003-0.002-0.003-0.002-0.006-0.002  c-1.326-0.109-0.482-1.621-0.436-1.704l2.224-3.78c1.801,1.418,3.037,3.515,3.32,5.908L15.169,36.423z M25.607,37.285l-2.688-0.223  c-0.144-3.521-1.87-6.626-4.493-8.629l1.085-1.842c0.938-1.593,1.756,0.001,1.756,0.001l0,0c1.772,3.48,3.65,7.169,4.745,9.331  C26.012,35.924,26.746,37.379,25.607,37.285z M43.249,24.273L30.78,35.225c0,0.002,0,0.002,0,0.002  c-1.464,1.285-2.177-0.104-2.188-0.127l-5.297-10.517l0,0c-0.471-0.936,0.41-1.062,0.805-1.073h17.926c0,0,1.232-0.012,1.354,0.267  v0.002C43.458,23.961,43.473,24.077,43.249,24.273z M52.52,46.745c-4.891,0-8.86-3.968-8.86-8.858c0-2.625,1.146-4.976,2.962-6.599  l2.232,5.174c0.421,0.977,0.871,1.061,0.978,1.065h0.023h1.674c0.9,0,0.592-0.913,0.473-1.199l-2.862-6.631  c1.043-0.43,2.184-0.672,3.381-0.672c4.891,0,8.861,3.967,8.861,8.861C61.381,42.777,57.41,46.745,52.52,46.745z" fill="#241F20"/>

Атрибут d - это то, что вы ищете.

Ответ 2

Откройте svg, используя Inkscape.

Inkscape - это редактор SVG, он немного похож на Illustrator, но, поскольку он создан специально для SVG, он обрабатывает его намного лучше. Это бесплатное программное обеспечение, и оно доступно @https://inkscape.org/en/

Ctrl A (выбрать все)
shift ctrl C (= путь/объект к путям)
ctrl s (сохранить (выбрать как обычный svg))

сделанный

все прямоугольник/круг были преобразованы в путь

Ответ 3

Gimp можно использовать для конвертации SVG с примитивами (например, ритами, кругами и т.д.) В один путь, который можно использовать в HTML5.

Сначала загрузите Gimp: https://www.gimp.org/downloads/
Экспортируйте SVG как файл .svg с помощью любого инструмента, например, Illustrator. Не беспокойтесь, если вывод SVG пока не очень приятный, Gimp его исправит
Импортируйте файл SVG в Gimp с помощью File → Open, и должно появиться следующее (или подобное) диалоговое окно:

Проверьте оба варианта: " Пути импорта" и " Объединить импортированные пути"

Затем перейдите в Windows-> Док-станция Dialogues-> Пути
Щелкните правой кнопкой мыши по одному пути, который говорит Imported Path, и вы увидите следующее диалоговое окно:

Нажмите Export Path... и сохраните этот текстовый файл в выбранном вами месте.
Найдите и откройте этот файл с помощью текстового редактора на ваш выбор, например, Блокнот, TextEdit
Скопируйте текст в <path d="copy this text here"/>
Поскольку Gimp форматирует текст с большим количеством пробелов, вам может потребоваться переформатировать его, удалив некоторые пробелы, чтобы вставить его в ваш HTML в одну строку

Ответ 4

Снимите SVG в приведенной ниже ссылке. Используйте значения по умолчанию при загрузке SVG. Это сделает ваши пути ABSOLUTE (В отличие от RELATIVE) Он удалит все переводы, которые будут поглощены в пути ABSOLUTE.

javascript будет содержать преобразованные пути. SVG до Script

Ответ 5

(В ответ на вопрос "улучшена ли ситуация?" ) вопрос:

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

Если вы ищете доступ к документу Illustrator для DOM-типа, вы можете проверить Hanpuku (Раскрытие # 1: Я автор. Раскрытие № 2: это код исследования, а это значит, что ошибок много, а поддержка в будущем маловероятна).

С Hanpuku вы можете сделать что-то вроде:

Выберите интересующий нас путь в Illustrator
Нажмите кнопку "To D3"
В редакторе script введите:

selection.attr('d', 'M 0 0 L 20 134 L 233 24 Z');
Нажмите прогон
Если изменение соответствует ожиданиям, нажмите "В Illustrator", чтобы применить изменения к документу.

Конечно, этот подход не предоставляет исходную строку пути. Если вы следуете инструкциям в конце страницы приветствия плагина, вы можете отредактировать документ Illustrator с помощью инструментов разработчика Chrome, но везде будет много уродливой техники (SVG DOM, который отражает документ Illustrator, зарывается внутри iframe глубоко в расширении - изменение DOM с помощью инструментов Chrome и нажатие "To Illustrator" должно по-прежнему работать, но вы, вероятно, столкнетесь с множеством проблем).

TL; DR: В Illustrator используется внутренняя модель, которая очень отличается от SVG многими способами, а это значит, что при повторении между двумя в настоящее время ваш единственный выбор - использовать подмножество функции, которые поддерживают одинаково.

Ответ 6

Удивленный никто не упомянул "Сохранить Illustrator" > "Выпадающее меню" > ".svg".

Выводит файл .svg, содержащий путь (и остальную часть определения svg) в файле .svg(xml).

Сам путь находится в пределах <path d>.