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

Описание

Атрибут hidden полностью скрывает элемент <svg> и всё его содержимое. SVG остаётся в DOM, но не отображается визуально и не занимает место в вёрстке.

Пример использования:
<svg hidden width="200" height="200"> <circle cx="100" cy="100" r="80" fill="#3498db"/> </svg>

Ключевые особенности:

Характеристика Описание
Эквивалент CSS display: none
Доступность Скрыт от скринридеров
Место в потоке Не занимает пространство
Интерактивность Элементы не реагируют на события

Рекомендации по использованию:

  • Используйте для временного скрытия SVG без удаления из DOM
  • Подходит для прелоадеров и элементов, появляющихся по условию
  • Для доступности добавьте aria-hidden="true"
  • Для показа используйте JavaScript: svg.removeAttribute('hidden')

Ограничения и предупреждения:

  • Не используйте для важного контента - скрыто от поисковиков
  • Анимации и переходы не работают при скрытом состоянии
  • Для SEO-важного контента лучше использовать CSS-скрытие

Примечание: Для сложных случаев скрытия/показа с анимациями используйте CSS-классы с opacity и visibility вместо атрибута hidden.