Основы SVG. Введение

SVG означает Scalable Vector Graphics (Масштабируемые Векторные Графики), язык разметки на основе XML, который определяет изображения с помощью математических формул, а не пикселей. Это делает SVG идеальным для иконок, логотипов и чертежей, поскольку они могут быть изменены в размере без потери качества и имеют меньший размер файла. Изображения SVG можно нацеливать с помощью CSS, чтобы изменить их представление, например, цвет и анимацию. Существует несколько способов отображения изображения SVG на веб-странице, включая прямое встраивание, использование элемента img, элемента object или элемента iframe. Каждый метод имеет свои собственные преимущества и ограничения, такие как кэширование и манипуляция с помощью JavaScript. Код SVG следует правилам языка XML, включая чувствительность к регистру, закрытие тегов и значения атрибутов в кавычках. Структура изображения SVG включает в себя корневой элемент, viewBox и элемент defs, который определяет стили или элементы, которые будут ссылаться позже. Элемент viewBox определяет область рисования в абстрактных единицах, а ширина и высота могут быть установлены внутри тега svg. Элемент defs может содержать элементы стиля, формы, градиенты и символы и может быть ссылаться позже в коде. Наконец, фактические элементы рисования, такие как path, circle, rect, line, ellipse и polygon, используются для создания изображения.