Компонент Масштабируемая векторная графика

Вставляйте встроенные изображения SVG в разметку веб-страницы и стилизуйте их с помощью CSS. SVG-спрайты. Анимация линий SVG. Документация.

SVG или Scalable Vector Graphics (масштабируемая векторная графика) очень удобно использовать, например, для отображения логотипа, который всегда остается четким при масштабировании или анимации. Компонент SVG в свою очередь обеспечивает большой контроль над стилями и анимацией для изображений SVG. Компонент внедряет изображение в разметку в виде встроенного SVG, включая все атрибуты, такие как идентификаторы, классы, ширину и высоту, чтобы их можно было легко использовать с помощью CSS.

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

Чтобы применить компонент SVG, добавьте к элементу <img> атрибут uk-svg.

<img src="" width="" height="" alt="" uk-svg>

Атрибут loading="lazy" учитывается для элементов <img>, изображения SVG будут вставляться как встроенные SVG когда они попадают в область просмотра.

Иконка
<img src="images/cloud-upload.svg" width="40" height="40" loading="lazy" alt="Иконка" uk-svg>

SVG-спрайты

Использование symbol (элемент спрайта)

SVG-спрайт представляет собой один общий файл-шаблон svg, внутри которого собраны иконки, код каждой svg-иконки обёрнут в свой отдельный элемент symbol (symbol предоставляет возможность группировать элементы) с присвоением ему уникального идентификатора (id), по которому к нему в дальнейшем можно обратиться в документе HTML5, один или несколько раз.

При использовании атрибута uk-svg можно вывести нужную иконку, вызвав требуемый symbol по его уникальному идентификатору (id) из файла SVG. Просто добавьте идентификатор symbol к пути изображения, как в любом фрагментарном URL.

путь/название_файла.svg#уникальный_id_symbol
Иконка cloud Иконка trash Иконка cloud
<!-- Цель - изображение SVG -->
<img src="images/cloud-upload.svg" class="uk-margin-large-right" width="40" height="40" loading="lazy" alt="Иконка cloud" uk-svg>

<!-- Цели - "symbol" внутри самого изображения SVG -->
<img src="images/icons.svg#trash" class="uk-text-success" width="40" height="40" loading="lazy" alt="Иконка trash" uk-svg>
<img src="images/icons.svg#cloud-upload" width="40" height="40" loading="lazy" alt="Иконка cloud" uk-svg>

Заметка SVG stroke определяет цвет линии, текста или контура (обводки) элемента. Компонент SVG адаптирует текущий цвет для stroke и fill color. Чтобы предотвратить такое поведение, добавьте класс .uk-preserve в сам SVG или элементам внутри SVG.

Анимация линий

Анимация штрихов :: Stroke

Есть два способа анимировать штрихи SVG.

Первый способ
С помощью компонента Анимация SVG и uk-svg="stroke-animation: true".
Второй способ
С помощью компонента Parallax SVG.

Опции компонента

При использовании компонента SVG к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опция Значение По умолчанию Описание
src String URL источник SVG. Если присутствует хэш местоположения, отображается только <symbol> SVG с заданным идентификатором.
stroke-animation Boolean false Анимирует все элементы с атрибутом stroke в SVG.

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

Инициализация

UIkit.svg(element, options);

Properties

svg

A JavaScript Promise that will resolve with the added SVG Node.

UIkit.svg(element).svg.then(function(svg) { svg.querySelector('path').style.stroke = 'red'; })