База знаний по шрифтам SVG | Aspose.Font

Знакомство со шрифтом SVG

Чтобы объяснить, что такое шрифт svg, сначала давайте изучим общий термин svg. Из так называемого продукта Aspose.SVG мы понимаем, что масштабируемая векторная графика (SVG) — это язык XML для создания двумерной векторной и смешанной векторной/растровой графики. Документ SVG представляет собой текстовый файл, описывающий изображения как геометрические примитивы: линии, кривые, фигуры, текст и т. д. Векторные объекты создаются и сохраняются как набор команд, чисел и формул, а не в виде пиксельной сетки, как в растровых изображениях.

Шрифт SVG — это тип шрифта, который используется в изображениях SVG и, как и любой другой объект формата, его можно масштабировать без потери качества. Вы можете встраивать шрифты непосредственно в изображение, что упрощает создание графики с пользовательской типографикой.

Шрифт SVG — это шрифт, определенный с помощью XML, как и изображение SVG. Это набор фигур, линий и кривых, определяющих символы шрифта. Шрифт также можно стилизовать и манипулировать им с помощью CSS, поэтому вы можете использовать те же методы для кодирования текста в изображении SVG, что и для любого другого элемента SVG.

Преимущества и недостатки шрифта SVG

В таблице ниже показаны плюсы и минусы шрифтов SVG, чтобы вы могли решить, использовать их в своем проекте или нет.

Плюсы	Минусы
Масштабируемость: Шрифты SVG можно масштабировать до любого размера без потери качества, поэтому они идеально подходят для использования в любом адаптивном дизайне.	Поддержка браузеров: Большинство современных веб-браузеров поддерживают шрифты SVG, но некоторые старые браузеры могут не поддерживать.
Меньший размер файла: По сравнению с веб-шрифтами шрифты SVG имеют меньший размер файла, что имеет решающее значение, если вы хотите сократить время загрузки.	Ограниченная поддержка редакторов: Не все текстовые редакторы и программное обеспечение для дизайна поддерживают шрифты SVG.
Лучшая доступность: Шрифты SVG считаются более доступными для пользователей с ограниченными возможностями. Их легко читают программы чтения с экрана, и они позволяют включать альтернативные текстовые описания.	Сложность: Шрифты SVG сложны в работе и редактировании, поскольку требуют больше технических знаний.
Расширенная типографика: Шрифты SVG включают в себя расширенные функции типографики, такие как лигатуры, кернинг, альтернативные символы и т. д.	Поисковая доступность: Шрифты SVG могут влиять на SEO веб-сайта, поскольку они не доступны для поиска поисковыми системами.
Стиль и анимация: Легко стилизуйте или анимируйте шрифты SVG в CSS и JavaScript.	Ограниченные параметры шрифтов: В формате SVG доступно меньше параметров шрифтов по сравнению со шрифтами True Type.
Лучшая поддержка нелатинских символов: Благодаря масштабируемости шрифты SVG можно использовать для рисования шрифтов, которые имеют большое количество символов или требуют сложной визуализации, например иероглифов, арабских или хинди-букв.

SVG или WOFF?

Шрифты SVG были популярны на заре SVG, но теперь в большинстве случаев их заменили веб-шрифты, поскольку они более гибкие и широко поддерживаются всеми современными браузерами. В любом случае, вы все еще можете найти шрифты SVG, например, в старых версиях Internet Explorer. Итак, давайте сравним эти шрифты.

Web Open Font Format или WOFF — это формат для доставки файлов шрифтов через Интернет, разработанный для удовлетворения потребностей рынка веб-приложений. Формат WOFF был создан, чтобы обеспечить более эффективный способ доставки веб-шрифтов по сравнению с другими форматами файлов, такими как TrueType и OpenType. Этот формат сжимает данные шрифта, чтобы уменьшить размер файла и ускорить загрузку и использование веб-страниц. Он также включает метаданные, содержащие информацию о шрифте, такую ​​как семейство шрифта, стиль и информацию об авторских правах.

SVG — это формат векторной графики, используемый для создания и отображения изображений в Интернете. Это текстовый формат, который можно легко редактировать и манипулировать им, поэтому он является хорошим выбором при создании логотипов, значков и другой графики.

Поэтому, сравнивая эти форматы по их назначению, если вы хотите создавать графику для использования в Интернете, вам следует использовать SVG. Если вам нужен шрифт для использования на веб-сайте, вам следует использовать WOFF.

Оба формата могут взаимодействовать с CSS, но файлы WOFF встраиваются в веб-страницы с использованием правила шрифта в CSS. Это позволяет веб-дизайнерам использовать собственные шрифты на своих веб-сайтах, не полагаясь на то, что пользователи установят этот шрифт на свои устройства. Это обеспечивает большую гибкость и единообразие визуального восприятия независимо от того, какой браузер использует пользователь.

SVG или TTF?

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

Формат шрифта True Type — это наиболее известный формат шрифтов для веб-дизайна и полиграфического дизайна, который поддерживается большинством операционных систем и устройств. TTF также довольно прост в использовании и реализации. Это векторный формат, но он использует разработанный инструмент инструкций, который позволяет шрифтам иметь качество, подобное растровым шрифтам, и в некоторых источниках считается растровым. SVG — это формат векторных шрифтов. Он хранит шрифт в виде набора контуров, масштабируемых до любого размера без потерь. Это позволяет таким шрифтам предоставлять вам файл шрифта меньшего размера, как уже упоминалось при сравнении SVG и WOFF. SVG также является лучшим вариантом, чем True Type, для людей с ограниченными возможностями, поскольку он обеспечивает лучшую читаемость.

Короче говоря, TTF — наиболее широко поддерживаемый формат и лучше всего подходит для большинства случаев, но SVG — отличный вариант, если вам нужно масштабировать текст, сделать его доступным или вам нужны расширенные функции типографики.

Где использовать шрифты SVG?

Выбирайте формат шрифта SVG, если вас интересуют:

• Адаптивный дизайн. Масштабируемые шрифты, такие как SVG, хорошо подходят для таких задач.
• Доступность. Как упоминалось выше, шрифты SVG обеспечивают лучшую читабельность.
• Расширенная типографика. В шрифты SVG включены такие функции, как лигатуры, кернинг и альтернативные символы.
• Стиль и анимация. Шрифты SVG обеспечивают большую гибкость дизайна и анимации.
• Нелатинские сценарии. Шрифты SVG можно использовать для представления шрифтов, содержащих большое количество сложных для отображения символов.
• Дизайн полиграфии. SVG полезен в некоторых проектах полиграфического дизайна, где размер файла имеет решающее значение, но вам необходимо одновременно использовать изображения с высоким разрешением и сложную типографику.
• Работа с графикой SVG: Поскольку шрифты SVG обычно являются частью графического изображения SVG и представлены с помощью языка XML, вы можете вручную или с помощью специального программного обеспечения редактировать глифы шрифта и сразу же просматривать результаты (текст просмотреть изменения) во всем SVG-изображении.

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

Шрифты SVG бесплатны?

Существует множество библиотек шрифтов с открытым исходным кодом, а также широкий выбор бесплатных шрифтов SVG по лицензиям с открытым исходным кодом, например Google Fonts, Open Font Library и т. д.

Однако не все шрифты SVG можно использовать бесплатно. Некоторые дизайнеры продают лицензии, и условия лицензии могут различаться. Некоторые шрифты могут иметь бесплатную версию с ограниченным набором функций и платную версию с большим количеством возможностей. Проверьте лицензию и условия использования шрифта, прежде чем использовать его в проекте. Сделав это, вы будете уверены, что его можно использовать бесплатно или что у вас есть необходимые разрешения.

Существует четыре варианта лицензирования шрифтов:

1. Позволяет встраивать и временную загрузку шрифтов в других системах. С такой лицензией вы сможете редактировать шрифты, в том числе форматировать новый текст, и сохранять любые изменения.
2. Позволяет временно встроить шрифт, что позволяет загружать шрифт в другие системы. С такой лицензией вы можете редактировать и форматировать новый текст, используя встроенный шрифт, а также сохранять любые изменения.
3. Позволяет встроить шрифт на постоянной основе, что позволяет устанавливать и использовать шрифт удаленными системами или другими пользователями.
4. Позволяет временно встроить шрифт для просмотра или печати документа в других системах.

Файл шрифта SVG

Шрифты SVG используют синтаксис XML и могут быть встроены непосредственно в документы SVG или на них можно ссылаться как на внешние файлы. Его структура состоит из следующих компонентов:

• XML-объявление в начале файла. Он указывает используемую версию XML и информацию о кодировке.
• Элемент шрифта. Он содержит общую информацию о шрифте, такую ​​как имя шрифта, семейство, стиль и т. д.
• Элемент глифа. Он определяет отдельные символы шрифта. Каждый глиф имеет уникальный идентификатор, номер Юникода и набор путей или фигур, составляющих символ.
• Элемент шрифта. Он используется для определения метаданных шрифта ( metrics), таких как его подъем, спуск, положение базовой линии и ограничивающая рамка глифа.
• Элемент с отсутствующим глифом. Он определяет глиф по умолчанию. Этот глиф будет использоваться, если в шрифте не будет найден нужный.
• Дополнительные элементы, такие как font-face-src, определяющий источник файла шрифта, и font-face-uri, предоставляющий URI для шрифта.

Вот пример кода базовой структуры файла шрифта SVG:

 
    <?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg">
      <font id="MyFont" horiz-adv-x="1000">
        <font-face font-family="MyFont" units-per-em="1000" ascent="800" descent="200" />
        <glyph glyph-name="Triangle" d="M0,0 L100,0 L50,100z" />
        <glyph unicode="B" glyph-name="B" d="M50,50 L50,150 L100,150 L100,115 L85,100 L50,100 M85,100 L100,85 L100,50z" />
      </font>
    </svg>

Давайте объясним пример кода.

Сначала мы видим общее объявление XML, которое определяет номер версии и кодировку XML. Кодировка UTF-8 — самая распространенная кодировка во Всемирной паутине с 2008 года.

Основным элементом (тегом) в этом XML является элемент «svg», который определяет фрагмент документа SVG.

Атрибут xmlns элемента “svg” ссылается на пространство имен xml, определенное в спецификации масштабируемой векторной графики (SVG) 1.0.

Описание самого шрифта начинается с элемента <font>. Этот элемент включает в себя 2 атрибута:

Атрибут id однозначно идентифицирует шрифт и используется, когда необходимо сослаться на шрифт из внешнего файла SVG.

Атрибут horiz-adv-x определяет горизонтальное перемещение по умолчанию после рендеринга глифа в горизонтальной ориентации (дополнительную информацию см. в метрики глифа). Если этот атрибут не указан, значение по умолчанию будет 1000.

Элемент «font-face» в этом примере определяет такие общие характеристики шрифта, как:

• Семейство шрифтов — группа родственных, схожих по дизайну шрифтов.
• Units per em - количество координатных единиц на em квадрате, размер сетки дизайна, на которой раскладываются глифы.
• Восхождение, спуск - длина от начальной точки базовой линии до самой высокой/самой низкой точки глифа соответственно.

Каждый глиф, содержащийся в нашем примере шрифта, представлен элементом «glyph». Такие параметры, как «unicode» и «glyph-name», указывают, как получить доступ к соответствующему глифу — используя код символа или имя глифа соответственно. В реальных данных шрифта SVG достаточно указать только один атрибут, юникод или имя глифа для доступа к нужному глифу.

Атрибут d является наиболее важным атрибутом элемента «глиф». Он определяет контур глифа, используя такие геометрические примитивы, как линии и кривые.

Давайте посмотрим, как получить графический путь для глифа с именем «Треугольник» в нашем примере.

Каждая буква в этом пути представляет собой специальную аббревиатуру относительно соответствующей команды графического контекста. За каждой буквой следуют 2 цифры, это координаты. Все координаты в примере глобальные, ни одна координата не привязана к предыдущей точке.

Первая буква на этом пути — «М». Это команда «MoveTo». Как следует из названия, эта команда устанавливает перо в заданные координаты, в нашем случае - начало системы координат (0, 0).

Следующая команда - “L” означает команду “LineTo”. Эта команда рисует линию от текущей точки (0,0) до заданной координаты (x,y), которая становится новой текущей точкой.

Координаты новой текущей точки являются параметрами команды «L» — в нашем случае это координаты (100, 0).

Итак, первая линия нашего глифа — это линия от точки (0,0) до точки (100, 0). Следующая команда — «L50,100» — рисует линию от текущей точки (100, 0) до точки (50, 100). И последняя команда в нашем пути глифа — «z» называется «закрыть путь» и используется для закрытия текущего подпути путем рисования прямой линии от текущей точки до начальной точки текущего подпути — (0,0).

Итак, из объясненного примера мы вкратце узнали, как глифы представлены в формате SVG, как получить доступ к этим глифам и какими наиболее общими характеристиками должен обладать шрифт, чтобы тексты, отрисованные этим шрифтом, отображались правильно.

Как создать шрифт SVG?

Обычно процесс создания шрифта SVG имеет следующий порядок:

1. Создайте векторную графику для каждого глифа шрифта. Для этой цели вы можете использовать такое программное обеспечение, как Illustrator, Inkscape или Glyphs.
2. Экспортируйте каждый глиф как файл SVG, используя для каждого из них одно и то же имя шрифта и атрибуты.
3. Создайте файл шрифта с помощью такого программного обеспечения, как FontForge или FontLab. Затем импортируйте файлы SVG для каждого символа.
4. Добавьте в созданный файл метаданные, такие как имя шрифта, автор и лицензия.
5. Проверьте результат. Установите шрифт на свой компьютер и попробуйте его в различных текстовых редакторах и программах для дизайна. Имейте в виду, что не все подобные программы поддерживают шрифты SVG, поэтому убедитесь, что у вас есть подходящие программы для создания и редактирования шрифтов SVG.

Заключение

Шрифт SVG имеет довольно высокий уровень популярности и во многих случаях он является лучшим решением, чем другие шрифты. Но чтобы принять решение, является ли этот формат правильным выбором для вашего проекта, вам лучше сначала изучить его плюсы и минусы.

Если вы хотите работать с SVG онлайн без загрузки какого-либо дополнительного программного обеспечения, вы можете использовать кроссплатформенные приложения, а если вы сосредоточены на работе со шрифтами, перейдите к другой группе приложений для работы со шрифтами там вы можете найти конвертеры для преобразования файлов шрифтов SVG в более подходящий формат, средства просмотра и слияния.