Что такое SVG?

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

Основные характеристики SVG:

• Векторный формат: Изображения описываются геометрическими примитивами (точки, линии, кривые, фигуры), а не пикселями.
• XML-основа: Структура SVG-документа основана на синтаксисе XML, что делает его легко читаемым и редактируемым.
• Масштабируемость: Изображения можно увеличивать или уменьшать без потери четкости и качества.
• Интерактивность: Элементы SVG могут быть интерактивными, реагировать на события (клики, наведение и т.д.) при помощи JavaScript.
• Стилизация: Оформление элементов SVG может быть выполнено с использованием CSS.
• Анимация: SVG поддерживает анимацию элементов с помощью встроенных средств или CSS/JavaScript.

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

• Идеально для значков и логотипов: Масштабируемость обеспечивает резкое отображение на любых разрешениях экрана.
• Меньший размер файлов: Для многих типов графики SVG-файлы могут быть меньше аналогичных растровых форматов.
• SEO-friendly: Текст в SVG индексируется поисковыми системами.
• Доступность: Благодаря текстовой природе, SVG более доступен для вспомогательных технологий.
• Легкая модификация: Поскольку это XML, содержимое можно динамически изменять.

Пример простого SVG-изображения (круг):

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>