Тег <use>
Тег <use> в SVG (укр. — “використати”) дозволяє багаторазово вставляти та повторно використовувати вже визначені елементи всередині SVG-контейнера. Це значно спрощує створення складних композицій, економить розмір файлу та пришвидшує рендеринг.
Тег <use> застосовується тільки всередині <svg> і посилається на інші елементи SVG за їхнім id.
Атрибути
Специфічні атрибути
- href — посилання на елемент, який потрібно використати. Формат: #id. Наприклад:
<use href="#myShape"></use>- x — зміщення по горизонталі для вставленого елемента. Наприклад:
<use href="#myShape" x="50"></use>- y — зміщення по вертикалі. Наприклад:
<use href="#myShape" y="100"></use>- width — ширина вставленого елемента (для вбудованих SVG). Наприклад:
<use href="#myShape" width="200"></use>- height — висота вставленого елемента. Наприклад:
<use href="#myShape" height="150"></use>Глобальні атрибути
Тег <use> підтримує всі глобальні атрибути HTML:
- id — унікальний ідентифікатор для самого екземпляру використання. Наприклад:
<use id="copy1" href="#myShape" x="50" y="50"></use>- class — для CSS-стилізації вставленого екземпляра. Наприклад:
<use class="copy-shape" href="#myShape"></use>- style — для інлайн-стилів. Наприклад:
<use href="#myShape" style="opacity: 0.5;"></use>- title — для підказки при наведенні (хоча для SVG практично не використовується напряму). Наприклад:
<use href="#myShape" title="Копія форми"></use>Приклад використання
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Приклад використання use</title>
<style>
svg {
border: 1px solid #ccc;
}
.copy {
fill: orange;
stroke: black;
stroke-width: 2;
}
</style>
</head>
<body>
<h2>Приклад багаторазового використання елементів через <use></h2>
<svg width="400" height="200" viewBox="0 0 400 200">
<!-- Оригінальна форма -->
<defs>
<circle id="myShape" cx="50" cy="50" r="40" fill="#4CAF50" />
</defs>
<!-- Повторне використання -->
<use href="#myShape" x="0" y="0"></use>
<use href="#myShape" x="120" y="0" class="copy"></use>
<use href="#myShape" x="240" y="0" class="copy" style="fill: red;"></use>
</svg>
</body>
</html>Додаткові моменти
<use>дозволяє не дублювати однаковий SVG-код багато разів.- Часто використовується разом із тегом
<symbol>для складних бібліотек іконок. - Атрибути
widthіheightпрацюють лише в специфічних випадках для вбудованих символів (<symbol>) - При зміні оригінального елемента автоматично змінюються всі екземпляри.
- Може комбінуватися зі стилями CSS для індивідуальної стилізації кожної копії.
- Раніше використовувався атрибут
xlink:href, який зараз вважається застарілим у HTML5 і нових специфікаціях SVG 2. Використовуй просто href. - Підтримується сучасними браузерами.
