Формат SVG, можно сказать, как раз таким проявлением и является, однако данная технология больше подходит для сайтов, оно и не удивительно, учитывая, что разработана была W3C, это те же, кто разработал стандарты XML и HTML.
Принцип взаимодействия с SVG такой же, как и у векторной графики, здесь просто надо понимать отличие, сам по себе SVG это та же самая разметка текста что и XML или HMTL, только действует она несколько иначе, скажем так, другие инструкции.
Если в HTML мы пишем сначала «слово», а после это слово делаем или курсивом с помощью тега em или жирным с помощью тега strong, то в SVG запись будет выглядеть как, например, указание фигуры и её координат, пример с кругом:
<svg>
<circle id="myCircle" cx="50" cy="50" r="40"/>
</svg>
Особенность файлов SVG ещё и в том, что их настройки можно корректировать с помощью CSS, например:
<style>
#myCircle {;
fill: blue; /* Меняем цвет заливки */;
stroke: black; /* Меняем цвет обводки */;
stroke-width: 3; /* Меняем толщину линии */;
};
#myCircle:hover {;
fill: red; /* Меняем цвет при наведении */;
};
</style>
Стоит отметить, что стили можно применять только к вставленному коду SVG-графики внутрь HTML-документа, если подгружать изображения с помощью тега img, то браузер обрабатывает его «внутри песочницы», не позволяя воздействовать на него извне.
Разделяют три технических способа (метода) вставки SVG-графики на веб-страницу, как картинку (тег <img>), инлайн (<svg> внутри HTML-документа) и спрайт, это когда внутри одного файла находятся сразу несколько svg-изображений и html-документ обращается к ним по id, пример:
<!-- Файл sprite.svg -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-home" viewBox="0 0 24 24">
<!-- Код иконки "дом" -->
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</symbol>
<symbol id="icon-user" viewBox="0 0 24 24">
<!-- Код иконки "пользователь" -->
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z"/>
</symbol>
</svg>
Управление стилями (CSS) в этом случае доступно только в случае инлайн, однако, если допустить что спрайт интегрирован в html-страницу, то он тоже будет поддерживать настройку его стилей.
