Атрибут class тега <svg>

Описание

Атрибут class позволяет назначать один или несколько CSS-классов элементу <svg>. Классы используются для стилизации SVG-графики и управления её отображением через CSS.

Пример использования:
<svg class="icon blue-icon" width="100" height="100" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="10" fill="currentColor"/> </svg>

Синтаксис и правила:

Параметр Пример Описание
Один класс class="icon" Простое назначение одного класса
Несколько классов class="icon large interactive" Перечисление через пробел
Специфичность .icon.blue-icon Комбинация классов в CSS

Пример стилизации через классы:

<style> .icon { transition: all 0.3s ease; vertical-align: middle; } .blue-icon { color: #3498db; } .large { width: 48px; height: 48px; } </style> <svg class="icon blue-icon large" viewBox="0 0 24 24"> <path d="M12 2L4 12l8 10 8-10z"/> </svg>

Преимущества использования:

  • Переиспользование стилей для нескольких SVG
  • Гибкое управление через CSS
  • Состояния элемента (:hover, :active)
  • Анимации и переходы с CSS
  • Медиазапросы для адаптивности

Рекомендации:

  • Используйте осмысленные имена классов
  • Разделяйте стили для разных аспектов (размер, цвет, анимация)
  • Придерживайтесь методологии именования (BEM, SMACSS)
  • Используйте currentColor для наследования цвета

Ограничения:

  • Некоторые SVG-атрибуты не стилизуются через CSS
  • Поддержка CSS-свойств может отличаться в браузерах
  • Вложенные SVG-элементы требуют отдельных классов

Примечание: Для сложных SVG-график комбинируйте классы на корневом SVG-элементе с классами внутренних элементов (path, circle и др.) для полного контроля над стилизацией.