Что такое SVG?

SVG, или Scalable Vector Graphics, — это векторный формат изображения на основе XML для двумерной графики.

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

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

Способы использования SVG:

• Встраивание в HTML через тег <svg>:

  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
  

• Использование как фонового изображения в CSS:

  .element {
    background-image: url('image.svg');
  }
  

• Через тег <img>:

  <img src="image.svg" alt="My SVG Image">
  

• Через тег <object> или <iframe>.

SVG идеально подходит для логотипов, иконок, иллюстраций, графиков и диаграмм, где важна четкость при различных размерах и возможность интерактивности.