Главная
HTML-тег <svg>
Характеристики
- Тип: блочный, семантический
- Назначение: Встраивание векторной графики и интерактивных визуальных элементов с использованием SVG.
- Родители: Любые блочные HTML-теги, такие как <div>, <section>, <body>.
- Потомки: Элементы SVG, такие как , , , и другие.
- Глобальные атрибуты: все
- Атрибуты событий: все
Атрибуты
- width — Ширина SVG-контейнера.
- height — Высота SVG-контейнера.
- viewBox — Определяет систему координат и область видимости SVG.
- xmlns — XML namespace для SVG.
- version — Версия SVG.
Пример использования
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
Использование в JavaScript
// Получение SVG элемента
const svgElement = document.querySelector('svg');
// Добавление нового круга
const newCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
newCircle.setAttribute('cx', '50');
newCircle.setAttribute('cy', '50');
newCircle.setAttribute('r', '30');
newCircle.setAttribute('stroke', 'blue');
newCircle.setAttribute('stroke-width', '2');
newCircle.setAttribute('fill', 'red');
svgElement.appendChild(newCircle);
Рекомендации по обеспечению доступности (a11y)
- Добавляйте описания к SVG-графике с помощью <title> и для улучшения доступности
- Используйте ARIA-атрибуты для интерактивных SVG-элементов
- Убедитесь, что важные графические элементы доступны через клавиатурную навигацию и вспомогательные технологии
Полезные ссылки