5

У меня есть SVG файл с текстом

<svg width="430" height="133" style="background: pink">
   <text x="20" y="100" font-size="100" fill="blue">ПРИВЕТ</text>
</svg>

Мне необходимо преобразовать текст в path, что бы каждая буква стала путём, как это можно сделать?

JavaScript, редактор, online сервис - подходит любое решение, так как операция разовая.

9
  • 1
    github.com/shrhdk/text-to-svg пробовали?
    – Areshka
    29 мар 2018 в 10:46
  • @MadFox а что тот комментарий стёрли, он полезен. 29 мар 2018 в 10:48
  • @MadFox отлично, это хороший вариант с библиотекой 29 мар 2018 в 10:48
  • я решил, что человек с 9к рейтинга должен знать про AI и XD))))
    – Areshka
    29 мар 2018 в 10:49
  • 1
    не умею) если кому-то пригодится - текст перегоняется в path одним кликом по выбранному тексту в контекстном меню приложений Adobe Illustrator / Adobe XD.
    – Areshka
    29 мар 2018 в 11:01

3 ответа 3

5

Конверторы из файлов формата *.eot, *.ttf, *.woff в svg шрифт

CodeAndMore @font-face made simple tool

onlinefontconverter.com

freefontconverter.com

2
  • Ну тут получается весь шрифт преобразует, а мне нужно конкретный текст. 29 мар 2018 в 10:47
  • @ДмитрийПолянин Только весь файл шрифта, онлайн конвертации одиночных символов я не встречал. 29 мар 2018 в 10:52
4

Решение через Inkscape

Сохраняем картинку с текстом в file_text.svg.

Из консоли Windows запускаем:

inkscape file_text.svg --export-text-to-path --export-plain-svg file_shapes.svg

Получаем file_shapes.svg с paths.

Конечно пути к Inscape и файлам в команде выше должны быть полными, в моём случае это:

"C:\Program Files\Inkscape\inkscape.exe" "C:\Users\User1\Desktop\logo.svg" --export-text-to-path --export-plain-svg "C:\Users\User1\Desktop\logoRez.svg"

Ответ сделан на основе этого.

Исходный файл.

<svg width="460" height="133" style="background: pink" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="www://www.w3.org/1999/xlink">
   <text font-family="Arial" x="20" y="100" font-size="100" fill="blue">HALLOW</text>
</svg>

Результирующий файл после чистки утилитой и вручную.

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" height="133" width="460">
  <g id="text2" aria-label="HALLOW" style="fill:#00f;font-family:Arial;font-size:100">
    <path id="path12" d="M28.01 100V28.42h9.47V57.81H74.69V28.42h9.47V100H74.69V66.26H37.48V100Z" style="fill:#00f;font-family:Arial;font-size:100"/>
    <path id="path14" d="M92.12 100 119.61 28.42h10.21L159.11 100H148.32L139.97 78.32H110.04L102.18 100ZM112.77 70.61h24.27L129.57 50.78q-3.42-9.03-5.08-14.84-1.37 6.88-3.86 13.67z" style="fill:#00f;font-family:Arial;font-size:100"/>
    <path id="path16" d="M166.39 100V28.42h9.47v63.13h35.25V100Z" style="fill:#00f;font-family:Arial;font-size:100"/>
    <path id="path18" d="M222.05 100V28.42h9.47v63.13h35.25V100Z" style="fill:#00f;font-family:Arial;font-size:100"/>
    <path id="path20" d="m275.22 65.14q0-17.82 9.57-27.88 9.57-10.11 24.71-10.11 9.91 0 17.87 4.74 7.96 4.74 12.11 13.23 4.2 8.45 4.2 19.19 0 10.89-4.39 19.48-4.39 8.59-12.45 13.04-8.06 4.39-17.38 4.39-10.11 0-18.07-4.88-7.96-4.88-12.06-13.33-4.1-8.45-4.1-17.87zm9.77 0.15q0 12.94 6.93 20.41 6.98 7.42 17.48 7.42 10.69 0 17.58-7.52 6.93-7.52 6.93-21.34 0-8.74-2.98-15.23-2.93-6.54-8.64-10.11-5.66-3.61-12.74-3.61-10.06 0-17.33 6.93-7.23 6.88-7.23 23.05z" style="fill:#00f;font-family:Arial;font-size:100"/>
    <path id="path22" d="M368.34 100 349.35 28.42h9.72l10.89 46.92q1.76 7.37 3.03 14.65 2.73-11.47 3.22-13.23L389.82 28.42H401.25l10.25 36.23q3.86 13.48 5.57 25.34 1.37-6.79 3.56-15.58l11.23-46h9.52L421.76 100h-9.13L397.54 45.46q-1.9-6.84-2.25-8.4-1.12 4.93-2.1 8.4L378.01 100Z" style="fill:#00f;font-family:Arial;font-size:100"/>
  </g>
</svg>

3
  • а результат здесь, в сниппете можно разместить? Очень интересно посмотреть. 29 мар 2018 в 11:46
  • 1
    @Alexandr_TT сделал, исходный файл и результирующий 29 мар 2018 в 11:58
  • хорошо бы ещё оптимизировать, c помощью SVG-editor, чтобы убрать кучу не нужной информации petercollingridge.appspot.com/svg-editor 29 мар 2018 в 12:14
3

В редакторе Inkscape перевести текст в path можно и так:

  • выделяем текст;
  • выбираем пункт меню Контур->Оконтурить объект.

Результат можно увидеть прямо из программы во встроенном редакторе XML:

  • выбираем пункт меню Правка->Редактор XML... В нём подсвечивается код XML выбранных объектов.
0

Ваш ответ

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

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