22. SVG Basics

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

Что такое SVG?

SVG - это язык разметки, основанный на XML, который описывает изображения с помощью фигур, линий, текста и других графических примитивов. Вместо хранения каждого пикселя, SVG хранит инструкции о том, как нарисовать изображение. Это делает SVG файлы обычно меньше по размеру и позволяет им адаптироваться к разным разрешениям экрана без потери четкости.

Простой пример SVG

Давайте начнем с простого примера - нарисуем круг:

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

Разберем этот код:

• <svg width="100" height="100">: Определяет контейнер SVG с шириной и высотой 100 пикселей.
• <circle cx="50" cy="50" r="40" ... />: Рисует круг.
  • cx="50" и cy="50" задают координаты центра круга.
  • r="40" задает радиус круга.
  • stroke="green" задает цвет обводки.
  • stroke-width="4" задает толщину обводки.
  • fill="yellow" задает цвет заливки.

Другие фигуры

SVG поддерживает множество других фигур, таких как:

• rect (прямоугольник)
• line (линия)
• ellipse (эллипс)
• polygon (многоугольник)
• path (произвольный путь)

Пример с прямоугольником:

<svg width="200" height="100">
  <rect width="150" height="80" x="20" y="10" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

Здесь:

• width="150" и height="80" задают размеры прямоугольника.
• x="20" и y="10" задают координаты верхнего левого угла.
• style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" задает стили заливки и обводки.

Жизненный пример

SVG широко используется в веб-разработке.

• Иконки: Многие сайты используют SVG для иконок, потому что они четкие на любых устройствах и легко стилизуются с помощью CSS. Например, сайт использует SVG иконки для меню, поиска и социальных сетей.
• Логотипы: SVG идеально подходит для логотипов, так как их можно масштабировать без потери качества.
• Интерактивные графики и диаграммы: SVG позволяет создавать сложные интерактивные визуализации данных.
• Фреймворки: Многие JavaScript фреймворки, такие как React и Vue.js, поддерживают работу с SVG. Например, можно создавать сложные анимации с помощью SVG и JavaScript.

Ключевые моменты

• SVG - это векторный формат, который масштабируется без потери качества.
• SVG основан на XML и может быть встроен прямо в HTML.
• SVG поддерживает различные фигуры, такие как круги, прямоугольники, линии и пути.
• SVG широко используется для иконок, логотипов и интерактивных графиков.
• SVG можно стилизовать с помощью CSS.

Интерактивный пример