Рішення
- Ще раз переконайтеся, що ваше зображення є векторним ('…
- Відкрийте файл в Adobe Illustrator.
- Збережіть файл за допомогою опції «Зберегти як»
- Відкривши діалогове вікно, назвіть файл і виберіть «SVG (svg)» зі спадного меню «Формат».
- Натисніть «Зберегти» та зачекайте, поки відкриється нове діалогове вікно.
Як конвертувати TTF у SVG
- Завантажте ttf-файл(и) Виберіть файли з комп’ютера, Google Drive, Dropbox, URL або перетягнувши їх на сторінку.
- Виберіть "до svg" Виберіть svg або будь-який інший потрібний формат (підтримується понад 200 форматів)
- Завантажте свій svg.
Ця конфігурація повинна:
- Перейменуйте наш шрифт на my-icons.
- Використовуйте my-icon– як префікс для всіх наших класів значків.
- Перетворіть файли SVG, розташовані в папці svgs.
- Щоразу генерувати всі результати, навіть якщо в наших файлах SVG не було жодних змін.
- Виведіть файли шрифтів у папку fonts.
- Використовуйте наші _my-icons.
Експорт SVG Виберіть елементи, які потрібно включити у файл SVG. Перейдіть до розділу «Експорт» на панелі інспектора, виберіть опцію «SVG» у спадному меню, а потім натисніть кнопку «Експорт», щоб зберегти файл SVG на свій комп’ютер.
Один із способів створення піктограм SVG – це використовувати векторний графічний редактор, наприклад Adobe Illustrator, Sketch або Inkscape. Ці програми дозволяють малювати, редагувати та експортувати значки як файли SVG. Однак вони також можуть генерувати багато непотрібного коду, який може вплинути на продуктивність і доступність ваших значків.
Техніка символів SVG заснована на використанні двох елементів: <symbol> and <use> . Ви можете зберігати всі свої піктограми в одному прихованому елементі <svg>: згрупуйте кожну піктограму в <symbol>; кожен <symbol> повинен мати ідентифікатор, який використовується для посилання на піктограму у вашому HTML-документі за допомогою <use>.