База знань шрифтів SVG | Aspose.Font

Знайомство зі шрифтом SVG

Щоб пояснити, що таке шрифт svg, спершу вивчимо загальний термін svg. З так званого продукту Aspose.SVG ми розуміємо, що Scalable Vector Graphics (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 Font Format — це найвідоміший формат шрифтів для веб-дизайну та друку, який підтримується більшістю операційних систем і пристроїв. 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 можна використовувати безкоштовно. Деякі дизайнери продають ліцензії, і умови ліцензії можуть відрізнятися. Деякі шрифти можуть мати безкоштовну версію з обмеженим набором функцій і платну версію з більшими параметрами. Перевірте ліцензію та умови використання шрифту, перш ніж використовувати його в проекті. Зробивши це, ви будете впевнені, що його можна використовувати безкоштовно або що у вас є необхідні дозволи.

Є чотири варіанти ліцензування шрифтів, які слід мати на увазі:

Дозволяє вбудовувати та тимчасово завантажувати шрифти в інші системи. З такою ліцензією ви можете редагувати шрифти, включаючи форматування нового тексту, і зберігати будь-які зміни.
Дозволяє тимчасово вставляти шрифт, що дозволяє завантажувати шрифт в інші системи. З такою ліцензією ви можете редагувати та форматувати новий текст за допомогою вбудованого шрифту та зберігати будь-які зміни.
Дозволяє постійно вбудовувати шрифт, що дозволяє встановлювати та використовувати шрифт віддаленими системами чи іншими користувачами.
Дозволяє тимчасово вбудовувати шрифт з метою перегляду або друку документа в інших системах.

Файл шрифту SVG

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

Оголошення XML на початку файлу. Він визначає використовувану версію XML та інформацію про кодування.
Елемент шрифту. Він містить загальну інформацію про шрифт, наприклад назву шрифту, сімейство, стиль тощо.
Елемент гліфа. Він визначає окремі символи шрифту. Кожен гліф має унікальний ідентифікатор, номер Юнікоду та набір контурів або фігур, які складають символ.
Елемент шрифту. Він використовується для визначення метаданих шрифту ( metrics), таких як його підйом, спад, положення базової лінії та рамка обмеження гліфа.
Відсутній елемент гліфа. Він визначає стандартний гліф. Цей гліф буде використано, якщо потрібного не знайдено у шрифті.
Додаткові елементи, такі як font-face-src, який визначає джерело файлу шрифту, і font-face-uri, який надає URI для шрифту.

Ось приклад коду базової структури файлу шрифту SVG:

1 
2    <?xml version="1.0" encoding="UTF-8"?>
3    <svg xmlns="http://www.w3.org/2000/svg">
4      <font id="MyFont" horiz-adv-x="1000">
5        <font-face font-family="MyFont" units-per-em="1000" ascent="800" descent="200" />
6        <glyph glyph-name="Triangle" d="M0,0 L100,0 L50,100z" />
7        <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" />
8      </font>
9    </svg>

Пояснимо приклад коду.

По-перше, ми бачимо загальну декларацію XML, яка визначає номер версії XML і кодування. Кодування UTF-8 є найпоширенішим кодуванням для Всесвітньої мережі з 2008 року.

Основним елементом (тегом) у цьому XML є елемент “svg”, який визначає фрагмент документа SVG.

Атрибут xmlns елемента “svg” посилається на простір імен xml, визначений у специфікації Scalable Vector Graphics (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” називається “closepath” і використовується для закриття поточного підшляху шляхом проведення прямої лінії від поточної точки до початкової точки поточного підшляху - (0,0).

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

Як створити шрифт SVG?

Зазвичай процес створення шрифту SVG має наступний порядок:

Створіть векторну графіку для кожного гліфа шрифту. Для цього можна використовувати такі програми, як Illustrator, Inkscape або Glyphs.
Експортуйте кожен гліф як файл SVG, переконавшись, що для кожного з них використовується однакова назва шрифту та атрибути.
Створіть файл шрифту за допомогою такого програмного забезпечення, як FontForge або FontLab. Потім імпортуйте файли SVG для кожного символу.
Додайте до створеного файлу такі метадані, як назва шрифту, автор і ліцензія.
Перевірте результат. Встановіть шрифт на свій комп’ютер і спробуйте його в різних текстових редакторах і програмному забезпеченні для дизайну. Майте на увазі, що не всі такі програми підтримують шрифти SVG, тому переконайтеся, що у вас є відповідні для створення та редагування шрифтів SVG.

Висновок

Шрифт SVG має досить високий рівень популярності та купу випадків, коли він є кращим рішенням, ніж інші шрифти. Але щоб прийняти рішення, чи цей формат є правильним вибором для вашого проекту, вам краще спочатку дізнатися про його плюси та мінуси.

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

Шрифти True Type Шрифти Type 1