Как изменить svg шрифт - Исправление ошибок и поиск оптимальных решений проблем

« Предыдущая статья
Следующая статья »

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

Примечание: SVG-шрифты корректно поддерживаются только в Safari.
Эта возможность не была реализована в Internet Explorer, она также была удалена из Chrome 38 (и Opera 25), разработчики Mozilla отложили её реализацию на неопределённое время, чтобы сосредоточиться на WOFF. Другие инструменты, такие как плагин Adobe SVG Viewer, Batik и частично Inkscape поддерживают встраиваемые шрифты SVG.

Элемент <font> (en-US) используется для определения SVG-шрифта.

Установка шрифта

Есть некоторые нюансы, необходимые для вставки шрифта в SVG. Давайте рассмотрим пример объявления (указанный в спецификации), и объясним детали.

<font id="Font1" horiz-adv-x="1000">
  <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
      units-per-em="1000" cap-height="600" x-height="400"
      ascent="700" descent="300"
      alphabetic="0" mathematical="350" ideographic="400" hanging="500">
    <font-face-src>
      <font-face-name name="Super Sans Bold"/>
    </font-face-src>
  </font-face>
  <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
  <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
  <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
  <!-- more glyphs -->
</font>

Начнём с элемента <font> (en-US). Он имеет атрибут id, который позволяет ему ссылаться через URI (см. ниже). Атрибут horiz-adv-x определяет, насколько широкий символ в среднем по сравнению с путями для отдельных глифов. Обычно подходит значение 1000. Существует несколько сопутствующих атрибутов, которые помогают определить ограничительные рамки.

Элемент <font-face> (en-US) является в SVG эквивалентом объявления шрифта с помощью CSS-свойства @font-face. Он определяет основные свойства финального шрифта, такие как вес, стиль и т. д. В приведённом выше примере, первое и самое важное свойство, которое должно быть определено — это font-family, на значение которого затем можно ссылаться в свойствах CSS и SVG. Атрибуты font-weight и font-style имеют ту же цель, что и соответствующие свойства CSS. Все последующие атрибуты — это команды рендеринга для механизма компоновки шрифтов, задающие, к примеру, какая средняя высота символов направленных вверх или вниз выносных элементов.

Дочерний элемент <font-face-src> (en-US) соответствует свойству src для атрибута @font-face в CSS. Вы можете указать внешние источники для определения шрифтов с помощью элементов <font-face-name> (en-US) и <font-face-uri> (en-US). В приведённом выше примере указано, что если у рендерера имеется локальный доступный шрифт с именем «Super Sans Bold», он должен использовать его.

Следующий элемент за <font-face-src> (en-US) — это <missing-glyph> (en-US). Он определяет, что должно отображаться, если символ в шрифте не был найден и если нет запасного варианта. Он также показывает, как создаются глифы: добавлением в него любого графического контента SVG. В нем вы можете использовать буквально любые элементы SVG, даже <filter> (en-US), <a> или <script> (en-US). Однако для простых глифов вы можете просто добавить атрибут d — он определяет форму для глифа точно так же, как работают стандартные пути SVG.

Сами глифы затем определяются элементами <glyph> (en-US). Наиболее важным атрибутом является unicode. Он определяет код кодировки unicode, представленный этим символом. Если вы указываете атрибут lang на глифе, вы можете дополнительно ограничить его определёнными языками (представленными xml:lang). Вы можете использовать произвольный SVG для определения глифа, и это позволит вам создать замечательные эффекты.

Есть ещё два элемента, которые могут быть определены внутри шрифта: <hkern> (en-US) и <vkern> (en-US). Каждый из них содержит ссылки не менее чем на два символа (атрибуты u1 и u2) и атрибут k, который определяет, на сколько должно быть уменьшено расстояние между этими символами. Ниже показан пример инструкции размещения символов «A» и «V» на стандартном расстоянии.

<hkern u1="A" u2="V" k="20" />

Ссылка на шрифт

После того как вы описали шрифт, как показано выше, вы можете просто применить атрибут font-family для использования шрифта в тексте SVG:

<font>
  <font-face font-family="Super Sans" />
  <!-- and so on -->
</font>

<text font-family="Super Sans">My text uses Super Sans</text>

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

Опция: использование CSS @font-face

Вы можете использовать свойство @font-face для ссылки на внешние шрифты:

<font id="Super_Sans">
  <!-- and so on -->
</font>

<style type="text/css">
@font-face {
  font-family: "Super Sans";
  src: url(#Super_Sans);
}
</style>

<text font-family="Super Sans">My text uses Super Sans</text>

Опция: ссылка на внешний шрифт

Элемент font-face-uri позволяет ссылаться на внешний шрифт, следовательно, его можно использовать в нескольких местах:

<font>
  <font-face font-family="Super Sans">
    <font-face-src>
      <font-face-uri xlink:href="fonts.svg#Super_Sans" />
    </font-face-src>
  </font-face>
</font>

« Предыдущая статья
Следующая статья »

Источник

Работаем с текстом

Выводим текст

Текст задаётся с помощью тега text. Основные атрибуты — x и y. Нужно не забывать указывать базовую линию для текста, за которую отвечает атрибут y. Если её не указать, то по умолчанию она окажется в точке с координатой 0, и текст станет невидимым, так как он рисуется над базовой линией. Значение атрибута должно быть больше размера шрифта. Размер viewBox также должно быть по крайней мере равен размеру атрибута. Атрибут font-sizeзадаёт размер шрифта в пикселях относительно viewBox. Текст при этом адаптируется к размерам страницы. Также доступны и другие атрибуты.

Текст из SVG можно выделять и копировать. Текст, помещаемый в SVG-документ, индексируется поисковыми системами.


<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 80">
    <text y="50" font-size="32" font-weight="bold" 
    font-family="Avenir, Helvetica, sans-serif">
        Этот кот в SVG
    </text>
</svg>

Этот кот в SVG

Нужно следить за размерами viewBox, чтобы длинный текст уместился в контейнере.

Как и в HTML, лишние пробелы игнорируются.

Чтобы сдвинуть текст по горизонтали, можно использовать атрибут x в text. Если атрибут не указан, то используется значение по умолчанию 0.

Атрибуты

direction — Направление текста. В некоторых языках (например, в арабском) принято писать текст справа налево. Для задания написания справа налево необходимо дополнительно включать атрибут unicode-bidi. Возможные значения: rtl | ltr (по умолчанию)
dominant-baseline — Выравнивание текста относительно горизонтальной линии. Возможные значения: auto (по умолчанию) | hanging | mathematical
fill — Цвет текста. Поддерживаются именованные значения, а также RGB-код в десятичной и шестнадцатеричной формах. Значение по умолчанию — black
font-family — Шрифт текста. Все шрифты, доступные на компьютере. При отсутствии заданного шрифта будет использован подобный (например, при отсутствии шрифта Arial будет использован Arial Bold). Значение по умолчанию — Arial
font-size — Размер шрифта. Значение по умолчанию 12 пт.
font-size-adjust — Значение по умолчанию — none
font-stretch — Сжатие и растяжение текста. Возможные значения: normal (по умолчанию) | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
font-style — Начертание текста. Возможные значения: normal (по умолчанию) | italic | oblique
font-weight — Вес шрифта. От 100 до 900 — Эти значения формируют упорядоченную последовательность, где каждый номер обозначает вес, который темнее своего предшественника. normal — то же, что «400». bold — то же, что «700». bolder — Определяет вес шрифта, более темный, чем наследуемый. Если такого веса нет, результатом будет более «темное» числовое значение (а шрифт не изменяется), если только наследуемое значение не «900», в этом случае результат будет также «900». lighter — Определяет вес шрифта, назначаемый шрифту, который светлее, чем наследуемый. Если такого веса нет, результатом будет более «светлое» числовое значение (а шрифт не изменяется), если только наследуемое значение не «100», в этом случае результат будет также «100». Возможные значения: normal (по умолчанию) | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
glyph-orientation-horizontal — Горизонтальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (и значения со знаком минус). По умолчанию — auto или 0
glyph-orientation-vertical — Вертикальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (И значения со знаком минус). По умолчанию — auto или 0
kerning — Интервал между буквами. Возможные значения: auto (по умолчанию) | число
letter-spacing — Интервал между буквами. Возможные значения: normal | число
text-anchor — Выравнивание текста относительно начала строки. Возможные значения: start (по умолчанию), middle, end
text-decoration — Подчеркивание, надчеркивание, перечеркивание текста. Возможные значения: none (по умолчанию) | underline | overline | line-through
unicode-bidi — Для работы атрибута direction со значением ltr необходимо наличие в коде свойства unicode-bidi со значением embed или override. Возможные значения: normal (по умолчанию) | embed | bidi-override
word-spacing — Интервал между словами. Возможные значения: normal (по умолчанию) | число
writing-mode — Устанавливает расположение текстового фрагмента как единого целого относительно исходной точки. Возможные значения, например, слева направо — сверху вниз ( left to right top to bottom ) не изменяют порядок самих букв в словах. Возможные значения: lr-tb (по умолчанию) | rl-tb | tb-rl | lr | rl | tb
x — Абсцисса верхней левой точки текстового блока. Значение по умолчанию: 0
y — Ордината верхней левой точки текстового блока. Значение по умолчанию: 0

Стилизация

Текст может быть стилизован с помощью свойств CSS, таких как font-weight, font-style, text-decoration, text-transform и т.д.


<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 20">
  <text x="0" y="15" style="text-decoration: underline;">Подчеркнутый кот средствами SVG</text>
</svg>

Подчеркнутый кот средствами SVG

Частичная стилизация через <tspan>

Если нужно применить стили или атрибуты только для определенной части, то можно использовать элемент <tspan> к разным частям текста в строке.


<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 20">
  <text x="0" y="15">
  <tspan style="font-weight: bold;">Жирный кот</tspan>, 
  <tspan style="font-style: italic;">наклонный кот</tspan> и <tspan style="text-decoration: underline;">подчеркнутый кот</tspan>.</text>
</svg>

Жирный кот, наклонный кот и подчеркнутый кот.

Цвет

Цвет текста задаётся через свойство fill.


<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 52">
    <text y="50" font-size="40" font-weight="bold" font-family="Avenir, Helvetica, sans-serif" fill="red">Цветной кот</text>
</svg>

Цветной кот

Режим вывода текста

Японская письменность использует режим сверху вниз. Этот режим можно включить через атрибут writing-mode со значением tb (top-to-bottom). Я не знаю японских иероглифов, поэтому вставлю русские символы.


<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="300px">
  <text x="70" y="20" style="writing-mode: tb;">Неко - японский кот</text>
</svg>

Неко — японский кот

Добавление текста в заголовок страницы

Можно сделать красивый заголовок на странице, используя CSS:


header { 
  width: 80%;
  margin: 0 auto;
}
svg text { 
  font-family: sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 90px;
  fill: blue;
}

<header>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 80">
        <text x="0" y="66">Hawaii</text>
    </svg>
</header>

Посмотреть демо.

SVG будет автоматически подстраиваться под размеры контейнера.

SVG может использовать любой шрифт, встроенный в страницу или из CSS. Текст доступен для поисковых роботов.

SVG-текст можно сделать ссылкой.


<header>
    <img src="waves.svg" alt="Waves"> 
</header>

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

Обводка текста

Обводка для текста делается похожим образом, как в CSS, только вместо указания цвета для текста нужно использовать свойство fill. Если цвет не указан, то используется чёрный цвет.


<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 80">
	<text y="50" fill="#c96" 
    font-size="32px" 
    font-family="Futura Condensed ExtraBold, Arial Black, sans-serif" 
    stroke="yellow" stroke-width="2px">Обведи кота вокруг пальца</text>
</svg>

Обведи кота вокруг пальца

Присвоим атрибуту fill значение none, чтобы оставить только обводку.

Обведи кота вокруг пальца

При желании можно вынести код в стили.


<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 80">
	<defs>
		<style>
		text {  
		  fill: #c96; font-size:32px;
		  font-family: Futura Condensed ExtraBold, Arial Black, sans-serif;
		  stroke: yellow; stroke-width: 2px;
		}
		</style>
	</defs>
	<text y="50">Обведи кота вокруг пальца</text>
</svg>

Градиент

Текст можно сделать градиентным. Задаём цвета градиента при помощи linearGradient и присваиваем ему идентификатор. Связываем идентификатор с свойством fill.


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="400px" height="45px">
  <defs>
    <linearGradient id="textgradient" x1="0%" x2="0%" y1="0%" y2="100%">
      <stop stop-color = "#ddd" offset = "0%"/>
      <stop stop-color = "#FF00ee" offset = "100%"/>
    </linearGradient>
  </defs>
  <text x="0" y="40" font-size="42" font-weight="bold" fill="url(#textgradient)" stroke="none">Градиентный кот</text>
</svg>

Градиентный кот

Текст вдоль кривой линии

Текст можно выводить не только строго вдоль вертикальной линии, но и вдоль замысловатой кривой.

Для начала нужно создать траекторию path в элементе defs. Элементу path добавляем атрибут id, чтобы связать текст в элементе textPath через xlink:href:


<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="textpath" fill="none" stroke="#000000"
      d="M0.057,0.024c0,0,10.99,51.603,102.248,51.603c91.259,0,136.172,53.992,136.172,53.992"/>
  </defs>
  
  <use xlink:href="#textpath"/>
  <text x="10" y="100" font-size="24">
  <textPath xlink:href="#textpath">
    Кот вдоль кривой
  </textPath>
  </text>
</svg>

Кот вдоль кривой

Пример размещения текста вдоль окружности вынесен в отдельную статью.

Вернуться в раздел SVG

Основы

Вот так формируется текст в SVG:

<svg>
<text x="0" y="15">Текст в <a href="http://ruseller.com/project.php?id=12" style="" target="_blank" rel="nofollow">масштабируемой векторной графике</a> (SVG) </text>
</svg>

Текст в элементе SVG определяется с помощью тега <text>. Для данного тега требуется только указание атрибутов x и y, с помощью которых задается базовая линия текста.

В таком формате отличий от обычного текста HTML не наблюдается.

Основные стили текста

Текст может быть стилизован с помощью свойств CSS, таких как font-weight, font-style и text-decoration, которые определяются любым из описанных в уроке о стилизации SVG с помощью CSS. Вот несколько примеров.

Жирный текст

<svg>
<text x="0" y="15" style="font-weight: bold;">Жирный текст в масштабируемой векторной графике(SVG)</text>
</svg>

Курсив

<svg>
<text x="0" y="15" style="font-style: italic;">Текст курсивом в масштабируемой векторной графике(SVG)</text>
</svg>

Подчеркнутый текст

<svg>
<text x="0" y="15" style="text-decoration: underline;">Подчеркнутый текст в масштабируемой векторной графике(SVG)</text>
</svg>

Используем элемент `<tspan>`

В некоторых случаях нужно применить стили или атрибуты только для определенной части. В такие моменты можно использовать элемент <tspan>. Пример ниже показывает, как добавить жирный, курсивом и подчеркнутый текст в одну строку.

<svg>
<text x="0" y="15"><tspan style="font-weight: bold;">Жирный текст</tspan>, <tspan style="font-style: italic;">текст курсивом</tspan> и <tspan style="text-decoration: underline;">подчеркнутая часть</tspan>.</text>
</svg>

Режим вывода текста

Текст в мире пишется не только слева-направо. Например, в Японии текст пишут сверху вниз. В такие ситуации можно разрешить с помощью атрибута writing-mode.

<svg>
<text x="70" y="20" style="writing-mode: tb;" class="japanese">???????</text>
</svg>

В выше приведенном примере несколько случайных японских символов (смысл надписи скрыт для автора) выводятся со сменой ориентации, определенной в стилях: writing-mode: tb, где tb — top-to-bottom (сверху-вниз).

Обводка текста

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

<svg>
<text x="0" y="50px" font-size="50px" font-weight="bold" stroke="black" stroke-width="0.5" fill="none">Обводка</text>
</svg>

В выше приведенном примере мы добавили атрибут stroke к элементу <text> и удалили цвет текста с помощью атрибута fill со значением none.

Текст по линии

В SVG текст может выводиться не только вертикально или горизонтально, но и по заданной линии.

Для начала нужно определить траекторию. Однако создание траектории непосредственно в HTML достаточно трудоемкое занятие. Можно воспользоваться векторным редактором (Inkscape или Illustrator), создать нужную траекторию и сохранить SVG код.

Затем взять элемент <path> из элемента <defs>.

<defs>
<path id="textpath" fill="none" stroke="#000000" d="M0.057,0.024c0,0,10.99,51.603,102.248,51.603c91.259,0,136.172,53.992,136.172,53.992"/>
</defs>

Обратите внимание, что мы добавили атрибут id к элементу <path>. Теперь нужно привязать траекторию с идентификатором id к нашему тексту в элементе <textPath>:

<use xlink:href="#textpath"/>
<text x="10" y="100">
<textPath xlink:href="#textpath">
Lorem ipsum dolor sit amet consectetur.
</textPath>
</text>

Градиент

Заполнение текста также возможно в SVG.

Сначала нужно определить цвета градиента.

<defs>
<linearGradient id="textgradient" x1="0%" x2="0%" y1="0%" y2="100%">
    <stop stop-color="#999" offset="0%"/>
    <stop stop-color="#111" offset="100%"/>
</linearGradient>
</defs>

Когда все необходимые определения установлены нужно только добавить текст и связать атрибут fill с атрибутом id градиента:

<text x="0" y="80" font-size="72" font-weight="bold" fill="url(#textgradient)" stroke="none">Градиент</text>

В следующем уроке мы рассмотрим анимации SVG графики.

Источник

Шрифты SVG больше не поддерживаются Chrome, Firefox и IE. Чтобы ваши шрифты хорошо отображались в SVG, вместо этого рекомендуется использовать веб-шрифты. Распространение экранов с высоким разрешением побуждает все больше дизайнеров и разработчиков начинать использовать SVG в своем рабочем процессе адаптивного веб-дизайна.

Как использовать шрифты SVG?

В Photoshop выберите инструмент «Текст» (T), создайте текстовое поле на странице и добавьте свой контент. На панели инструментов выберите нужный шрифт SVG. Вы заметите, что логотип в правой части раскрывающегося меню отображает логотип OTF с небольшим логотипом SVG.

Требуются ли для SVG шрифты?

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

Как преобразовать SVG в текст?

Как преобразовать TXT в SVG

Загрузить txt-файл (ы). Выберите файлы с компьютера, Google Диска, Dropbox, URL или перетащив их на страницу.
Выберите «в svg». Выберите svg или любой другой формат, который вам нужен в результате (поддерживается более 200 форматов)
Загрузите ваш файл svg.

Как использовать шрифты Google в SVG?

В зависимости от того, как вы встраиваете SVG, если вы используете встроенные элементы или теги для встраивания SVG, просто вставьте @import Google fonts API после экспорта SVG без контурных шрифтов, и ваши шрифты будут правильно отображаться на любых устройствах.

Как изменить шрифт и семейство в SVG?

Атрибут font-family указывает, какое семейство шрифтов будет использоваться для отображения текста, заданного как приоритетный список имен семейств шрифтов и/или общих имен семейств. Примечание. В качестве атрибута представления семейство шрифтов можно использовать как свойство CSS. Для получения дополнительной информации см. свойство css font-family.

Для чего используются шрифты SVG?

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

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

Как настроить пользовательские шрифты с помощью CSS и @font-face

Шаг 1: Получите все файлы шрифтов, необходимые для кроссбраузерной поддержки.
Шаг 2: Добавьте файлы шрифтов в свой проект.
Шаг 3: Используйте @font-face в CSS, чтобы использовать файлы шрифтов.
Шаг 4 (необязательно): использование нескольких пользовательских шрифтов.
Шаг 5: Не забудьте про отображение шрифта.
Шаг 6: Стилизуйте типографику с помощью CSS.

19.11.2019

Где я могу найти бесплатные файлы SVG?

Все они имеют замечательные бесплатные файлы SVG для личного использования.

Дизайн Winther.
Печатные Cuttable Creables.
Пухлые щеки.
Дизайнерские печатные издания.
Мэгги Роуз Дизайн Ко.
Gina C создает.
Удачи! Удачи!
Девушка-креатив.

30.12.2019

SVG — это XML?

SVG — это приложение XML, совместимое с рекомендацией Extensible Markup Language (XML) 1.0 [XML10].

Все шрифты SVG?

В настоящее время шрифты SVG поддерживаются только в браузерах Safari и Android. … Однако другие инструменты, такие как плагин Adobe SVG Viewer, Batik и части Inkscape, поддерживают встраивание шрифтов SVG. Базой для определения шрифта SVG является элемент font>.

Как получить ширину текста SVG?

вар bbox = текстовый элемент. получитьBBox(); переменная ширина = bbox. ширина; переменная высота = bbox.

Источник

Рассказываем, как работать с файлами в формате SVG и для чего их можно модифицировать через код.

Зачем использовать SVG
- Масштабирование изображения с сохранением качества pixel perfect
- Возможность модификации
- Небольшой вес файлов
- Доступность
Использование SVG: распространенные практики
- Логотипы и иконки в SVG
- Инфографика
- Визуальные эффекты
- Анимация
- Иллюстрации и рисунки
Интерфейсы и приложения
- Тег img
- Использование SVG в CSS
- Инлайн SVG в HTML
Использование SVG в формате кода
- Рисуем с помощью SVG: круг
- Рисуем с помощью SVG: прямоугольник
- Рисуем с помощью SVG: линия
- Рисуем с помощью SVG: звезда
- Рисуем с помощью SVG: пути
- Рисуем с помощью SVG: кривые
Как работать с текстом с помощью SVG
- Как управлять свойствами шрифта с помощью SVG
Как использовать CSS в SVG

Зачем использовать SVG

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

Масштабирование изображения с сохранением качества pixel perfect

При использовании формата PNG или растровых изображений разработчики ограничены пикселями. Масштабирование картинки снижает ее качество. Поэтому приходится использовать несколько разных фото для девайсов с разным разрешением экрана.

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

Сравнение качества растровых и векторных изображений

Возможность модификации

Изображения в формате SVG можно анимировать или стилизовать с помощью CSS. Вы можете изменить цвета, размеры элементов, шрифты и так далее. Элементы векторных изображений можно делать адаптивными.

Небольшой вес файлов

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

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

Доступность

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

Использование SVG: распространенные практики

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

Логотипы и иконки в SVG

Логотипы и иконки должны сохранять качество на экранах с любым разрешением. Четкость нужна всем элементам интерфейса сайта: от маленькой кнопки до экранной заставки.

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

Инфографика

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

Визуальные эффекты

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

Анимация

SVG можно использовать для создания CSS-анимации, поэтому фронтенд-разработчикам не придётся изучать дополнительные техники. Также можно воспользоваться SMIL SVG — инструментом анимации векторных изображений. SMIL обеспечивает разработчикам даже больше возможностей, чем обычная CSS-анимация.

Иллюстрации и рисунки

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

Интерфейсы и приложения

SVG используются для создания сложных интерфейсов, которые интегрируются с насыщенными интернет-приложениями (RIA, rich internet application). Благодаря свойствам формата элементы интерфейса получаются лёгкими, при необходимости анимированными и привлекательными.

Далее речь пойдёт о том, как правильно добавлять файлы SVG на сайт с помощью HTML и CSS.

Изучайте вёрстку на Хекслете
В рамках профессии «Верстальщик» вы изучите HTML5 и CSS3, научитесь пользоваться Flex, Grid, Sass, Bootstrap. В процессе обучения сверстаете несколько полноценных лендингов и добавите их в портфолио. Базовые курсы в профессии доступны бесплатно.

Тег `img`

Первый способ — URL изображения можно указать в атрибуте src тега img. В этом случае вы работает с форматом так же, как с картинками jpg, png и так далее.

<img src="circle.svg" alt="a red circle" height="100px" width="100px"/>

Это привычный для большинства разработчиков способ работы с изображениями. Одно из преимуществ — возможность дополнительно использовать тег <a>. С его помощью к изображению можно добавить гиперссылку.

Если вы добавляете изображение через тег img, его можно стилизовать с помощью CSS. Но вы не можете манипулировать элементами изображения с помощью JavaScript и внешних стилей. При этом можно использовать CSS инлайн для изменения кода SVG.

Использование SVG в CSS

Изображения в формате SVG можно указывать в свойстве background-image, как фото в других форматах.

.element { background-image: url(/images/image.svg); }

Этот способ сохраняет все преимущества векторных изображений, включая высокую четкость на экранах с любым разрешением. Также этот способ позволяет масштабировать, повторять и позиционировать изображения.

Инлайн SVG в HTML

Файл SVG можно открыть в любом текстовом редакторе, скопировать код и добавить его в HTML-разметку страницы. Это называется использованием SVG инлайн.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40"stroke="black" 
  stroke-width="4"fill="red"/>
</svg>

Такой подход уменьшает количество http-запросов и сокращает время загрузки страницы. В тегах <svg> можно указывать классы и id и использовать их для изменения стилей элемента с помощью CSS.

Использование SVG в формате кода

В SVG-файлах используется основанный на XML язык, который описывает векторные изображения. Как и HTML, это язык разметки. Но код SVG позволяет манипулировать элементами, например, применять к ним эффекты.

Код SVG можно добавлять в HTML-разметку страницы или писать его в отдельных файлах. Ниже пример создания окружности и прямоугольника с помощью SVG.

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black"/>
  <circle cx="150" cy="100" r="90" fill="blue"/>
</svg>

Рисуем с помощью SVG: круг

Чтобы нарисовать круг, необходимо указать три атрибута:

Радиус круга — r.
Позицию центра круга по оси x — cx.
Позицию центра круга по оси y — cy.

При этом важно, что цвет линии и фона можно указывать инлайн или отдельно.

<svg width="200" height="250">
  <circle cx="400" cy="300" r="200" stroke="red" fill="transparent" stroke-width="5"/>
</svg>

Круг нарисован с использованием SVG-формата

Рисуем с помощью SVG: прямоугольник

Создание прямоугольников с помощью SVG похоже на рисование окружностей. Достаточно указать координаты центра по осям x и y, а также высоту и ширину для определения размера. Пример кода ниже.

<rect x="100" y="100" width="400" height="300" stroke="black" fill="transparent" stroke-width="5"/>

Прямоугольник нарисован с помощью SVG

Рисуем с помощью SVG: линия

Чтобы нарисовать линию, нужно указать координаты по осям x и y двух точек. Также можно указать цвет и толщину линии.

<line x1="100" x2="500" y1="110" y2="450" stroke="orange" stroke-width="5"/>

Прямая линия

Рисуем с помощью SVG: звезда

С помощью SVG можно рисовать звёзды и другие многоугольники. Для этого достаточно указать координаты точек углов фигуры.

<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30, 180, 45 180"/>

Сложный многоугольник в формате SVG

Рисуем с помощью SVG: пути

С помощью элемента можно рисовать ломаные кривые — это позволяет создавать объекты разной формы. С помощью атрибута d определяется путь или координаты ломаной линии. Команда M используется для абсолютного позиционирования, а m — для относительного. С помощью команды L определяются координаты новой точки.

Вот пример использования path:

<path d="M 10,10 L 250,250" fill=“transparent" stroke="black"/>

А это пример нескольких линий, созданных с помощью path:

<path d="M 10,10 L 250,250 30,100 150, 50" fill="transparent" stroke="black"/>

Пути (path) в SVG

Рисуем с помощью SVG: кривые

Для рисования кривой линии используется команда C. В примере ниже определяются начало кривой, точки смещения и конец кривой.

<path d="M50 50 C 50 50, 150 100, 250 50" stroke="black" fill="transparent"/>

С помощью команды S можно объединять кривые и создавать сложные формы.

<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>

Кривая линия

Читайте также
Когда роботы заменят верстальщиков на рынке труда: большая обзорная статья о профессии с комментариями экспертов.

Как работать с текстом с помощью SVG

Формат SVG позволяет работать с текстом. Для этого применяется тег <text>:

<text x="10" y="10">This is text.</text>

Обычный текст создан с помощью SVG

С помощью свойства stroke можно задать цвет шрифта. Позиция текста на странице определяется координатами x и y. В свойствах stroke и fill можно использовать градиенты.

Как управлять свойствами шрифта с помощью SVG

SVG позволяет управлять следующими свойствами шрифта:

font-family
font-style
font-weight
font-variant
font-stretch
font-size
font-size-adjust
kerning
letter-spacing
word-spacing
text-decoration

С помощью тега <tspan> можно выбрать одно или несколько слов в тексте и изменить их свойства.

<text>
  This is <tspan font-weight="bold" fill="red">bold and red</tspan>
</text>

Также SVG позволяет переворачивать текст, менять цвет линии и заполнения букв и выполнять другие трансформации. Ниже пример создания контура текста, написанного справа налево. Последнее определено с помощью свойств direction и unicode-bidi.

<text x="350" y="50" style="fill: none; stroke: #000000; font-size: 48px; direction: rtl; unicode-bidi: bidi-override;">This is text</text>

Перевёрнутый текст

С помощью <textPath> можно связывать текст с путями. Это делается с помощью атрибута xlink:href:

<path id="my_path" d="M 40,40 C 200,100 10,100 520,200" 
fill="transparent" />
<text>
  <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path">
    This Text is Curved
  </textPath>
</text>

Как использовать CSS в SVG

Код CSS можно указывать инлайн в коде SVG:

<svg width="350" height="60">
 <text>
   This is <tspan font-weight="bold" fill="red">bold and red</tspan>
 </text>
 <style><![CDATA[
  text{
 dominant-baseline: hanging; font: 28px Verdana, Helvetica, Arial, sans-serif;
 }
 ]]></style>
</svg>

Также можно писать CSS в отдельных файлах и применять стили к элементам SVG. Например, в SVG можно указать класс.

<svg class="logo" width="400" height="400" viewBox="0 0 400 400">
 <rect class="box" x="0" y="0" width="400" height="400" fill="#56A0D3"/>
</svg>

В CSS можно работать с таким классом:

.box { fill: red; }

Адаптированный перевод статьи All you need to know about SVG on the web by Richard Mattka. Мнение автора оригинальной публикации может не совпадать с мнением редакции Хекслета.

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

Источник

Установка шрифта

Ссылка на шрифт

Опция: использование CSS @font-face

Опция: ссылка на внешний шрифт

Работаем с текстом

Выводим текст

Атрибуты

Стилизация

Частичная стилизация через <tspan>

Цвет

Режим вывода текста

Добавление текста в заголовок страницы

Обводка текста

Градиент

Текст вдоль кривой линии

Реклама

Основы

Основные стили текста

Жирный текст

Курсив

Подчеркнутый текст

Используем элемент <tspan>

Режим вывода текста

Обводка текста

Текст по линии

Градиент

Как использовать шрифты SVG?

Требуются ли для SVG шрифты?

Как преобразовать SVG в текст?

Как использовать шрифты Google в SVG?

Как изменить шрифт и семейство в SVG?

Для чего используются шрифты SVG?

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

Где я могу найти бесплатные файлы SVG?

SVG — это XML?

Все шрифты SVG?

Как получить ширину текста SVG?

Зачем использовать SVG

Масштабирование изображения с сохранением качества pixel perfect

Возможность модификации

Небольшой вес файлов

Доступность

Использование SVG: распространенные практики

Логотипы и иконки в SVG

Инфографика

Визуальные эффекты

Анимация

Иллюстрации и рисунки

Интерфейсы и приложения

Тег img

Использование SVG в CSS

Инлайн SVG в HTML

Использование SVG в формате кода

Рисуем с помощью SVG: круг

Рисуем с помощью SVG: прямоугольник

Рисуем с помощью SVG: линия

Рисуем с помощью SVG: звезда

Рисуем с помощью SVG: пути

Рисуем с помощью SVG: кривые

Как работать с текстом с помощью SVG

Как управлять свойствами шрифта с помощью SVG

Как использовать CSS в SVG

Используем элемент `<tspan>`

Тег `img`