TransWikia.com

Как из логотипа картинка(с текстом) получить такой же логотип в svg

Stack Overflow на русском Asked by Vadim.Sharoikin on August 30, 2021

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

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

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

csscss animationsvgsvg animationвёрстка

3 Answers

Для этого мне нужно получить его текст в формате 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 кривые

Correct answer by Alexandr_TT on August 30, 2021

Все благодарности @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>

Answered by Alexandr_TT on August 30, 2021

Если вам не требуется анимировать отдельно сами лигатуры, а только текст целиком, напишите сами этот текст в 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>

Answered by NoSkill on August 30, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP