Дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~
Формат SVG тоже можно создавать и менять в редакторах графики, вроде Illustrator, Sketch или Inkscape. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
Я вам больше скажу: SVG - это как отдельная HTML-страница. Когда вы вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Стилями и скриптами, Карл! Вот вам и простая картинка.
Если смотреть на SVG как на отдельную страницу - становится понятнее, какой способ вставки вам нужен. Есть четыре основных и у каждого - особенности.
Первый и самый простой - элемент прямо в HTML-коде. Это в принципе самый эффективный способ загрузить любую картинку - браузеры заранее знают по HTML-коду, что она есть и начинают её подгружать.
Минус в том, что в таком SVG не будут работать скрипты и любые попытки взаимодействия с элементами внутри обречены. Файл будет как за стеклом: смотреть можно, а трогать нельзя. Хотя внутри всё остальное прекрасно работает, включая CSS-анимации.
Такой способ лучше всего подходит контентным изображениям, которым не нужно взаимодействие: логотипы, графики, схемы.
Второй способ - фоновая картинка в CSS. Причём неважно, зададите вы его элементу, псевдоэлементу или контентом вставите - результат будет таким же, как с : за стеклом, но внутри что-то работает.
.picture { background-image: url(picture.svg); }
Этот способ подходит для оформительской графики, которой не нужно взаимодействие: фоны, иконки и другая мелочь.
Третий способ, через
На самом деле, вместо