🔍 SVG: что это такое и с чем его едят?

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

Важные атрибуты SVG:

- width и height – задают ширину и высоту изображения.
- viewBox – определяет область просмотра изображения.
- preserveAspectRatio – управляет сохранением пропорций изображения при вписывании в область отображения.
- fill и stroke – задают цвет заливки и цвет контура объектов внутри SVG соответственно.

🤔 Подробнее про viewBox

Атрибут viewBox в SVG задает область просмотра, которая определяет часть SVG, что будет видимой, и масштабирование этой области. Проще говоря, viewBox позволяет вам контролировать отображение SVG без изменения его реальных размеров.

ViewBox принимает четыре значения: min-x, min-y, width, height:
- min-x и min-y указывают на начальную точку видимой области.
- width и height обозначают размеры этой области.

Например, следующий SVG рисует квадрат, левый верхний угол которого находится в точке (10, 10), а правый нижний в (60, 60), так как высота и ширина составляют по 50 пикселей. Элемент <svg> использует viewBox для изменения его масштаба и области просмотра:

<svg width="140" height="140" viewBox="0 0 70 70">
    <rect x="10" y="10" width="50" height="50" fill="red" />
</svg>

⬇️ Пример для визуализации приложен к этому посту. Краткое объяснение:

- viewBox="0 0 70 70" означает, что видимая область начинается в точке (0, 0) с размерами 70x70, и визуально наш квадрат будет находиться в центре с отступами в 10 пикселей от краёв видимой области.
- При этом визуально изображение масштабируется в 2 раза, так как область просмотра в 70x70 пикселей пропорционально увеличена до размера элемента SVG 140x140 пикселей.

⚡Особое CSS-свойство: currentColor

Это специальное свойство в CSS, которое можно использовать в SVG для задания цвета элементов, например в качестве значения fill или stroke. Значение currentColor ссылается на значение свойства color наследуемого элемента. Таким образом, если в примере выше у элемента <rect> указать fill="currentColor", а для всего SVG в css задать { color: red }, то квадрат также останется красным. Это особенно удобно, когда в SVG несколько элементов или когда цвет элементов контролируется извне.

🔗 Узнать подробнее о возможностях SVG можно в этой статье. В ней также описаны варианты элементов, которые могут использоваться внутри тега <svg>.