4

Допустим у меня есть какой-то логотип, к примеру

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

Я хочу добавить к нему какую-нибудь анимацию.
Для этого мне нужно получить его текст в формате svg. При этом надо сохранить именно этот шрифт(ulm grotesk Bold), который изображен на растровом изображении.
Нашел где его скачать(но почему-то inkscape его не видит). Как мне получить данный текст с картинки в svg?

3 ответа 3

4

Для этого мне нужно получить его текст в формате svg. При этом надо сохранить именно этот шрифт(ulm grotesk Bold).

Вот один из способов получить path svg из растровой картинки:

  1. Загружаем в векторный редактор растровую картинку написания шрифта

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="400" viewBox="0 0 600 400" preserveAspectRatio="xMinYMin meet" border="1">

<image xlink:href="https://i.stack.imgur.com/xDvyt.jpg" width="100%" height="100%" />
</svg>   

  1. В векторном редакторе наносим узловые точки по контуру букв:

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

  1. Выбирая тип узловых точек (острые или автоматически сглаженные) стараемся максимально точно повторить контур очертания буквы. При этом ещё можно использовать рычаги узловых точек.

  2. Сохраняем и оптимизируем файл *.svg

<style>
.school {
fill:#FD0807;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="400" viewBox="0 0 600 400" preserveAspectRatio="xMinYMin meet" >


<path class="school" d="m34.6 222.1c-0.5-12.1-0.1-46.5-0.1-46.5 0 0 0-5 1.2-6.3 1.1-1.6 3.2-2.3 5.1-3 1.7-0.6 3.6-1.2 5.4-0.9 2.6 0.4 5 1.8 6.9 3.6 2.3 2.2 3.5 5.3 4.8 8.1 3.1 6.7 4.3 14.1 7.3 20.8 0.4 0.8 0.5 1.9 1.3 2.3 0.7 0.4 2 0.4 2.4-0.3 2-4 2.5-6.4 3.6-9.6 1.2-3.5 2.1-7 3.3-10.5 0.9-2.8 1.5-5.8 3-8.4 0.8-1.4 2-2.6 3.3-3.6 1.3-1 2.9-1.7 4.5-2.1 1.6-0.3 3.2-0.2 4.8 0 1.5 0.2 3.1 0.4 4.5 1.2 1.9 1.1 3.8 2.5 4.8 4.5 0.9 1.9 0.8 7.8 0.8 11.6 0.2 13-0.2 26.5-0.2 39.3-3 0.4-11.1 0.3-11.1 0.3 0 0-0.4-27.8-0.4-43.5 0-0.9-1.6-1.5-2-0.7-1.6 3-1.7 5.5-2.7 8.3-1.3 3.8-2.5 7.6-3.9 11.4-0.7 1.8-1.3 3.6-2.1 5.4-0.6 1.5-1.2 3.1-2.1 4.5-0.9 1.4-1.9 2.8-3.3 3.6-1.9 1-4.2 1.3-6.3 1.2-2.6-0.2-5.5-0.7-7.5-2.4-3.2-2.8-3.8-7.7-5.4-11.7-1.8-4.5-3.1-9.2-4.8-13.8-0.7-1.7-1-2.8-2.1-5.1-0.4-0.7-2.4-1.4-2.4-0.6 0 13.3 0.1 31.7 0.1 43.1-2.4 0.4-6.1 0.1-10.8-0.2zM123.5 184.6" />
 
 <path class="school" d="m123.5 184.6c0 7.5-0.3 15 0 21.1 0.4 1.2 1 2.3 1.9 3.2 0.8 0.8 1.8 1.4 2.8 1.6 0.9 0.2 1.9 0.1 2.8 0 1.4-0.2 2.9-0.2 4-1 1-0.7 1.6-2 2.1-3.1 0.3-0.8 0.5-1.6 0.6-2.4-0.1-6.4 0-13.5 0.1-19.4 3.3 0 8.1-0.3 10.7 0.3 0 17.4 0 26.9 0 40 0 1.3-0.8 2.9-1.5 4.2-0.6 1.2-1.2 2.4-2.1 3.4-1.3 1.5-2.9 2.6-4.6 3.6-1.2 0.7-2.4 1.1-3.7 1.5-1.5 0.4-3.1 0.6-4.6 0.7-1.4 0.2-2.9 0.4-4.3 0.3-1.9-0.1-3.7-0.5-5.5-1-1.2-0.3-2.5-0.7-3.6-1.3-1.3-0.8-2.4-2-3.4-3.1-1-1.2-1.9-2.5-2.7-3.9-0.7-1.2-1.9-2.6-1.8-3.9 3.4-0.4 8 0 11.7 0.3 1 0.3 1.6 1.4 2.5 1.9 1.2 0.7 2.5 1.3 3.9 1.5 1.7 0.2 3.5 0 4.9-0.7 1.2-0.6 2.1-1.7 2.8-2.8 2.3-3.5 1.8-6.1 0.8-6.9-1.5 0-1.4 1.1-2.1 1.5-1.5 0.7-3.2 1-4.8 1.2-1.8 0.2-3.6 0-5.4-0.3-1.3-0.3-2.7-0.7-3.9-1.3-2.1-1.2-4-2.8-5.5-4.6-1.2-1.5-2-3.4-2.7-5.2-0.5-1.4-1-3-1-4.5-0.2-7.3-0.2-20.8-0.2-20.8 4.1-0.2 8 0 12 0.2z" />

</svg>   

  1. Добавляем анимацию рисования контура и заполнения цветом букв

.school {
fill:none; 
stroke:#FD0807;
stroke-width:2;
stroke-dasharray: 0, 415;
animation: draw 5s ease-in forwards, fill-school 1s  linear 5s forwards ;
}

@keyframes draw {
to {stroke-dasharray:415,0; }
}

@keyframes fill-school {
from {fill:white;}
to {fill:gold; }
}
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="400" viewBox="0 0 600 400" preserveAspectRatio="xMinYMin meet" border="1">


<path class="school" d="m34.6 222.1c-0.5-12.1-0.1-46.5-0.1-46.5 0 0 0-5 1.2-6.3 1.1-1.6 3.2-2.3 5.1-3 1.7-0.6 3.6-1.2 5.4-0.9 2.6 0.4 5 1.8 6.9 3.6 2.3 2.2 3.5 5.3 4.8 8.1 3.1 6.7 4.3 14.1 7.3 20.8 0.4 0.8 0.5 1.9 1.3 2.3 0.7 0.4 2 0.4 2.4-0.3 2-4 2.5-6.4 3.6-9.6 1.2-3.5 2.1-7 3.3-10.5 0.9-2.8 1.5-5.8 3-8.4 0.8-1.4 2-2.6 3.3-3.6 1.3-1 2.9-1.7 4.5-2.1 1.6-0.3 3.2-0.2 4.8 0 1.5 0.2 3.1 0.4 4.5 1.2 1.9 1.1 3.8 2.5 4.8 4.5 0.9 1.9 0.8 7.8 0.8 11.6 0.2 13-0.2 26.5-0.2 39.3-3 0.4-11.1 0.3-11.1 0.3 0 0-0.4-27.8-0.4-43.5 0-0.9-1.6-1.5-2-0.7-1.6 3-1.7 5.5-2.7 8.3-1.3 3.8-2.5 7.6-3.9 11.4-0.7 1.8-1.3 3.6-2.1 5.4-0.6 1.5-1.2 3.1-2.1 4.5-0.9 1.4-1.9 2.8-3.3 3.6-1.9 1-4.2 1.3-6.3 1.2-2.6-0.2-5.5-0.7-7.5-2.4-3.2-2.8-3.8-7.7-5.4-11.7-1.8-4.5-3.1-9.2-4.8-13.8-0.7-1.7-1-2.8-2.1-5.1-0.4-0.7-2.4-1.4-2.4-0.6 0 13.3 0.1 31.7 0.1 43.1-2.4 0.4-6.1 0.1-10.8-0.2zM123.5 184.6"/>
 
 <path class="school" d="m123.5 184.6c0 7.5-0.3 15 0 21.1 0.4 1.2 1 2.3 1.9 3.2 0.8 0.8 1.8 1.4 2.8 1.6 0.9 0.2 1.9 0.1 2.8 0 1.4-0.2 2.9-0.2 4-1 1-0.7 1.6-2 2.1-3.1 0.3-0.8 0.5-1.6 0.6-2.4-0.1-6.4 0-13.5 0.1-19.4 3.3 0 8.1-0.3 10.7 0.3 0 17.4 0 26.9 0 40 0 1.3-0.8 2.9-1.5 4.2-0.6 1.2-1.2 2.4-2.1 3.4-1.3 1.5-2.9 2.6-4.6 3.6-1.2 0.7-2.4 1.1-3.7 1.5-1.5 0.4-3.1 0.6-4.6 0.7-1.4 0.2-2.9 0.4-4.3 0.3-1.9-0.1-3.7-0.5-5.5-1-1.2-0.3-2.5-0.7-3.6-1.3-1.3-0.8-2.4-2-3.4-3.1-1-1.2-1.9-2.5-2.7-3.9-0.7-1.2-1.9-2.6-1.8-3.9 3.4-0.4 8 0 11.7 0.3 1 0.3 1.6 1.4 2.5 1.9 1.2 0.7 2.5 1.3 3.9 1.5 1.7 0.2 3.5 0 4.9-0.7 1.2-0.6 2.1-1.7 2.8-2.8 2.3-3.5 1.8-6.1 0.8-6.9-1.5 0-1.4 1.1-2.1 1.5-1.5 0.7-3.2 1-4.8 1.2-1.8 0.2-3.6 0-5.4-0.3-1.3-0.3-2.7-0.7-3.9-1.3-2.1-1.2-4-2.8-5.5-4.6-1.2-1.5-2-3.4-2.7-5.2-0.5-1.4-1-3-1-4.5-0.2-7.3-0.2-20.8-0.2-20.8 4.1-0.2 8 0 12 0.2z" />

</svg>   

Связанный вопрос: Преобразование шрифта HTML в SVG кривые

6
  • 1
    На мой взгляд, Inkscape предлагает более простой способ преобразования растра в вектор, чем рисование вручную. Выделить растровую картинку - Контур / Векторизировать растр.
    – zhurof
    17 июл 2020 в 5:36
  • @zhurof Благодарю за ценный совет. Подождал некоторое время, думал, что сами дадите развернутый ответ. Не дождался, сам написал ответ, а вас поблагодарил в других ваших ответах 17 июл 2020 в 10:07
  • 1
    способ получения кривых из растра - это только половина ответа, на целый не потянуло бы ) Inkscape уже, кстати, новая версия вышла
    – zhurof
    17 июл 2020 в 11:42
  • 1
    Ваши ответы как всегда просто супер! Спасибо
    – qwerty
    17 июл 2020 в 11:59
  • @zhurof Делал как раз в новой версии Inkscape 17 июл 2020 в 14:19
3

Все благодарности @zhurof за ценный совет!

Выделить растровую картинку - Контур / Векторизировать растр.

Вот что получилось

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

Сохраняем файл в векторном редакторе, оптимизируем его

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" border="1" preserveAspectRatio="xMinYMin meet" viewBox="0 0 600 400" height="400" width="600" version="1.1">
  <image width="100" height="100"/>
  <path d="m82.2 88.2c-2.6-1.7-4.6-4.2-6-7.3l-2.1-4.7h4.6c3.2 0 5.3 0.7 6.9 2.2 5.2 5.1 12.7 0.9 12.7-7.1v-3.8l-3.6 2.2c-3.2 2-4.1 2.1-7.8 0.9C78.3 68 75.9 62.5 75.3 44.7L74.9 31.6h5 5v12.1c0 13.6 0.6 15.6 5.3 16.5 2.4 0.5 3.7 0.1 5.6-1.8 2.4-2.4 2.4-2.6 2.4-14.6V31.6h4.5 4.5l-0.3 23.7c-0.3 23-0.3 23.8-2.4 27.5-4.4 7.8-14.9 10.3-22.4 5.4zM5.9 45.3c0.3-29.6 0.5-31.2 4.9-33.7 5.2-3 10.7-0.7 13.5 5.6 1.5 3.4 9.8 30.3 9.8 31.9 0 0.2 0.6 0.3 1.2 0.3 0.8 0 3-5.9 5.9-15.9 2.6-8.8 5.3-17 6.1-18.3 2.7-4.6 8.3-6.2 12.9-3.6 4.5 2.5 5 6.2 5 34.9V72.9H60.5 55.6V48.2c0-19.2-0.2-24.6-1.1-24.2-0.6 0.3-3.4 8-6.2 17.1-3 9.8-5.9 17.5-7 18.6-1.2 1.3-3.4 2-6.2 2-5.7 0-6.6-1.6-12.5-21.8-2.6-9-5.3-16.2-5.9-16.2-0.9 0-1.1 5.6-1.1 24.6v24.6H10.6 5.6ZM119.6 46c0-29.2 0.4-31.8 4.9-34.3 1.3-0.7 3.7-1.3 5.4-1.3 5.5 0 7.7 3.9 15.8 27.9 4.8 14.2 7.8 21.8 8.7 21.8 1.1 0 1.3-3.9 1.5-24.8l0.2-24.8h4.4 4.4l0 26c0 22.5-0.2 26.5-1.6 29.9-3 7.6-9.9 9-14.9 3.1-2.4-2.8-4.7-8.4-10.2-24.8-4.4-13.3-7.6-21.4-8.5-21.6-1.2-0.3-1.4 2.6-1.4 24.8l0 25.2h-4.4-4.4zm63.1 24.8c-7.2-4.8-10.6-16.6-7.6-26.4 3.8-12.5 16.7-17.7 25.6-10.3 3.9 3.3 7.1 11.2 6.8 17l-0.3 4.5-12.3 0.3c-11.1 0.3-12.3 0.5-12 2.2 0.8 5.1 11.2 7.3 14.9 3.1 2-2.3 9-2.4 9-0.2 0 2.6-4.6 8.6-7.7 10.3-4.2 2.2-12.6 1.9-16.3-0.5zm16-25c-0.1-6.8-11.5-7.7-14.9-1.1l-1.3 2.5h8.1c5.9 0 8.1-0.4 8.1-1.4zm22.5 24.6c-1.2-1.6-3.1-8.6-5.5-20.1-2-9.7-3.6-17.8-3.6-18.1 0-0.3 2-0.6 4.4-0.6 5 0 4.4-1.2 7.2 15.1 3.1 18.5 3.4 18.7 5.7 4.5 2.2-13 3.8-17.9 6.4-19.4 3.2-1.8 5.2-1.6 7.8 1 1.9 1.9 2.7 4.6 4.7 15.6 1.3 7.4 2.7 13.4 3.1 13.4 0.4 0 1.9-6.8 3.5-15.1l2.8-15.1h4.3c2.4 0 4.3 0.4 4.3 0.9 0 0.5-1.4 7.1-3.1 14.8-5.5 24.4-6.1 25.6-12.3 25.6-4.5 0-6.2-3.5-9-18.6-1.3-7.1-2.7-12.5-3.1-12-0.4 0.5-1.6 6-2.7 12.1-2.9 16.5-4 18.4-10.1 18.4-1.8 0-3.6-0.9-4.7-2.5zm61.6 1.1c-3.8-1.7-6.8-4.9-9.1-9.6-3.2-6.7-2.8-8 2.7-8 4.2 0 4.8 0.3 6.2 3.3 1.9 4.1 7 6.2 12.6 5.2 4.5-0.9 7.1-3.7 7.1-8 0-4.8-2-6.1-11.7-7.7-9.6-1.6-12-3-15.5-8.9-2.7-4.6-2.5-13.5 0.4-18.9 3.5-6.4 8.4-8.9 16.7-8.4 10.3 0.7 16.7 5.7 18.5 14.6 0.6 3.1 0.6 3.1-3.9 3.1-4 0-4.9-0.4-7-3.5-5.9-8.3-19.3-3.9-17.4 5.6 0.7 3.1 3.4 4.4 12.3 5.8 9 1.3 12.4 3.3 15.4 9 4.6 8.5 0.6 21.7-8 25.8-4.4 2.2-14.9 2.5-19 0.6zm44.1-0.5c-6.6-4.2-10.4-15.9-8.2-25.1 4.1-17.2 22-20.5 30.1-5.5 3 5.6 2.7 6.8-2.1 6.8-3.1 0-4.8-0.7-6.7-2.8-3.2-3.4-6.8-3.6-9.8-0.6-2.9 2.8-3.7 7-2.4 12 1.7 6.6 9.2 8.7 12.9 3.6 1.1-1.5 2.7-2.1 5.8-2.1 2.4 0 4.3 0.3 4.3 0.6 0 2.7-3.1 8.6-5.8 11.2-2.7 2.6-4.4 3.3-9.2 3.5-4.2 0.2-6.7-0.2-8.9-1.6zm31.9-29.4v-31.3h4.4 4.4v12.3 12.3l3.6-2.3c5-3.3 10.5-2.2 14.6 2.9 3.6 4.5 4.1 7.4 4.1 24.2v13.3h-4.4-4.4V59.7c0-12.4-0.1-13.4-2.1-15.6-2.7-3.2-6.9-3.2-9.3 0.2-1.8 2.3-1.9 3.8-1.9 15.6v13h-4.4-4.4zm47.6 29.4c-5.9-3.9-9.3-10.7-9.3-18.8 0-21 22.3-29.5 31.7-12 5.4 10 2.2 25.7-6.1 30.4-4.6 2.6-12.5 2.8-16.2 0.3zm13.6-11.8c3-3.6 2.8-12.1-0.3-15.3-4.7-4.7-12-1.6-13.2 5.6-1.8 10.2 7.5 16.8 13.6 9.7zm25.8 11.4c-7-4.7-10.4-16.4-7.4-26.1 4.4-14.5 19.4-18.5 28.2-7.4 7.6 9.5 6.3 25.5-2.7 32.7-5 4-12.8 4.4-18.1 0.9zm11.7-9c3.5-1.5 4.6-3.9 4.6-10.3 0-4.1-0.4-5.4-2.3-7.3-4.7-4.7-12-1.6-13.2 5.6-0.8 4.8 1.1 9.9 4.4 11.7 3.4 1.9 3.2 1.8 6.6 0.4zm22.4-20v-31.3h4.4 4.4v31.3 31.3h-4.4-4.4z" style="fill:red;stroke-width:1"/>
</svg>

Вариант анимации с использованием stroke-dasharray и заполнением цветом:

.school {
fill:none; 
stroke:#FD0807;
stroke-width:2;
stroke-dasharray: 0, 2778;
animation: draw 8s ease-in forwards, fill-school 2s  linear 3s forwards ;
}

@keyframes draw {
to {stroke-dasharray:2778,0; }
}

@keyframes fill-school {
from {fill:white;}
to {fill:#FD0807;stroke:#FD0807; }
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" border="1" preserveAspectRatio="xMinYMin meet" viewBox="0 0 600 400" height="400" width="600" version="1.1">
  <image width="100" height="100"/>
  <path class="school" d="m82.2 88.2c-2.6-1.7-4.6-4.2-6-7.3l-2.1-4.7h4.6c3.2 0 5.3 0.7 6.9 2.2 5.2 5.1 12.7 0.9 12.7-7.1v-3.8l-3.6 2.2c-3.2 2-4.1 2.1-7.8 0.9C78.3 68 75.9 62.5 75.3 44.7L74.9 31.6h5 5v12.1c0 13.6 0.6 15.6 5.3 16.5 2.4 0.5 3.7 0.1 5.6-1.8 2.4-2.4 2.4-2.6 2.4-14.6V31.6h4.5 4.5l-0.3 23.7c-0.3 23-0.3 23.8-2.4 27.5-4.4 7.8-14.9 10.3-22.4 5.4zM5.9 45.3c0.3-29.6 0.5-31.2 4.9-33.7 5.2-3 10.7-0.7 13.5 5.6 1.5 3.4 9.8 30.3 9.8 31.9 0 0.2 0.6 0.3 1.2 0.3 0.8 0 3-5.9 5.9-15.9 2.6-8.8 5.3-17 6.1-18.3 2.7-4.6 8.3-6.2 12.9-3.6 4.5 2.5 5 6.2 5 34.9V72.9H60.5 55.6V48.2c0-19.2-0.2-24.6-1.1-24.2-0.6 0.3-3.4 8-6.2 17.1-3 9.8-5.9 17.5-7 18.6-1.2 1.3-3.4 2-6.2 2-5.7 0-6.6-1.6-12.5-21.8-2.6-9-5.3-16.2-5.9-16.2-0.9 0-1.1 5.6-1.1 24.6v24.6H10.6 5.6ZM119.6 46c0-29.2 0.4-31.8 4.9-34.3 1.3-0.7 3.7-1.3 5.4-1.3 5.5 0 7.7 3.9 15.8 27.9 4.8 14.2 7.8 21.8 8.7 21.8 1.1 0 1.3-3.9 1.5-24.8l0.2-24.8h4.4 4.4l0 26c0 22.5-0.2 26.5-1.6 29.9-3 7.6-9.9 9-14.9 3.1-2.4-2.8-4.7-8.4-10.2-24.8-4.4-13.3-7.6-21.4-8.5-21.6-1.2-0.3-1.4 2.6-1.4 24.8l0 25.2h-4.4-4.4zm63.1 24.8c-7.2-4.8-10.6-16.6-7.6-26.4 3.8-12.5 16.7-17.7 25.6-10.3 3.9 3.3 7.1 11.2 6.8 17l-0.3 4.5-12.3 0.3c-11.1 0.3-12.3 0.5-12 2.2 0.8 5.1 11.2 7.3 14.9 3.1 2-2.3 9-2.4 9-0.2 0 2.6-4.6 8.6-7.7 10.3-4.2 2.2-12.6 1.9-16.3-0.5zm16-25c-0.1-6.8-11.5-7.7-14.9-1.1l-1.3 2.5h8.1c5.9 0 8.1-0.4 8.1-1.4zm22.5 24.6c-1.2-1.6-3.1-8.6-5.5-20.1-2-9.7-3.6-17.8-3.6-18.1 0-0.3 2-0.6 4.4-0.6 5 0 4.4-1.2 7.2 15.1 3.1 18.5 3.4 18.7 5.7 4.5 2.2-13 3.8-17.9 6.4-19.4 3.2-1.8 5.2-1.6 7.8 1 1.9 1.9 2.7 4.6 4.7 15.6 1.3 7.4 2.7 13.4 3.1 13.4 0.4 0 1.9-6.8 3.5-15.1l2.8-15.1h4.3c2.4 0 4.3 0.4 4.3 0.9 0 0.5-1.4 7.1-3.1 14.8-5.5 24.4-6.1 25.6-12.3 25.6-4.5 0-6.2-3.5-9-18.6-1.3-7.1-2.7-12.5-3.1-12-0.4 0.5-1.6 6-2.7 12.1-2.9 16.5-4 18.4-10.1 18.4-1.8 0-3.6-0.9-4.7-2.5zm61.6 1.1c-3.8-1.7-6.8-4.9-9.1-9.6-3.2-6.7-2.8-8 2.7-8 4.2 0 4.8 0.3 6.2 3.3 1.9 4.1 7 6.2 12.6 5.2 4.5-0.9 7.1-3.7 7.1-8 0-4.8-2-6.1-11.7-7.7-9.6-1.6-12-3-15.5-8.9-2.7-4.6-2.5-13.5 0.4-18.9 3.5-6.4 8.4-8.9 16.7-8.4 10.3 0.7 16.7 5.7 18.5 14.6 0.6 3.1 0.6 3.1-3.9 3.1-4 0-4.9-0.4-7-3.5-5.9-8.3-19.3-3.9-17.4 5.6 0.7 3.1 3.4 4.4 12.3 5.8 9 1.3 12.4 3.3 15.4 9 4.6 8.5 0.6 21.7-8 25.8-4.4 2.2-14.9 2.5-19 0.6zm44.1-0.5c-6.6-4.2-10.4-15.9-8.2-25.1 4.1-17.2 22-20.5 30.1-5.5 3 5.6 2.7 6.8-2.1 6.8-3.1 0-4.8-0.7-6.7-2.8-3.2-3.4-6.8-3.6-9.8-0.6-2.9 2.8-3.7 7-2.4 12 1.7 6.6 9.2 8.7 12.9 3.6 1.1-1.5 2.7-2.1 5.8-2.1 2.4 0 4.3 0.3 4.3 0.6 0 2.7-3.1 8.6-5.8 11.2-2.7 2.6-4.4 3.3-9.2 3.5-4.2 0.2-6.7-0.2-8.9-1.6zm31.9-29.4v-31.3h4.4 4.4v12.3 12.3l3.6-2.3c5-3.3 10.5-2.2 14.6 2.9 3.6 4.5 4.1 7.4 4.1 24.2v13.3h-4.4-4.4V59.7c0-12.4-0.1-13.4-2.1-15.6-2.7-3.2-6.9-3.2-9.3 0.2-1.8 2.3-1.9 3.8-1.9 15.6v13h-4.4-4.4zm47.6 29.4c-5.9-3.9-9.3-10.7-9.3-18.8 0-21 22.3-29.5 31.7-12 5.4 10 2.2 25.7-6.1 30.4-4.6 2.6-12.5 2.8-16.2 0.3zm13.6-11.8c3-3.6 2.8-12.1-0.3-15.3-4.7-4.7-12-1.6-13.2 5.6-1.8 10.2 7.5 16.8 13.6 9.7zm25.8 11.4c-7-4.7-10.4-16.4-7.4-26.1 4.4-14.5 19.4-18.5 28.2-7.4 7.6 9.5 6.3 25.5-2.7 32.7-5 4-12.8 4.4-18.1 0.9zm11.7-9c3.5-1.5 4.6-3.9 4.6-10.3 0-4.1-0.4-5.4-2.3-7.3-4.7-4.7-12-1.6-13.2 5.6-0.8 4.8 1.1 9.9 4.4 11.7 3.4 1.9 3.2 1.8 6.6 0.4zm22.4-20v-31.3h4.4 4.4v31.3 31.3h-4.4-4.4z" />
</svg>

1

Если вам не требуется анимировать отдельно сами лигатуры, а только текст целиком, напишите сами этот текст в SVG вашим кастомным шрифтом:

<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      @font-face {
        font-family: 'MyCustomFont';
        src: url('MyCustomFont.woff');
      }  
      .txt { 
        font: bold 13px 'MyCustomFont', 'Comic Sans MS', sans-serif; 
        fill: red; 
      }
    </style>
  </defs>
  <text x="0" y="20" class="txt">My New School</text>
</svg>

9
  • как мне его написать? У меня есть только файл MyCustomFont.ttf с этим шрифтом
    – qwerty
    16 июл 2020 в 9:38
  • вставте его вместо MyCustomFont.woff. Вы в css хотя-бы разбираетесь?
    – NoSkill
    16 июл 2020 в 9:42
  • Так я вставил, и ничего мне случилось. Положил шриф на одном уровне с файлом svg
    – qwerty
    16 июл 2020 в 9:58
  • Вы уверены, что ваш шрифт рабочий?
    – NoSkill
    16 июл 2020 в 10:04
  • 1
    @Vadim.Sharoikin если вы хотите, чтобы шрифт был виден не только на вашем ПК, так как на других компьютерах сети он скорее всего не установлен, то лучше рассмотреть мой способ решения данной задачи. 16 июл 2020 в 14:45

Ваш ответ

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

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