SVG расшифровывается как Scalable Vector Graphics (масштабируемая векторная графика). Это открытый стандарт W3C для изображений, описанных как набор инструкций, а не набор пикселей: нарисовать здесь круг, пройти по этой кривой, залить ту фигуру этим цветом, набрать это слово таким шрифтом. Поскольку изображение представляет собой набор команд, его можно отрисовать в любом размере без размытия и «квадратиков», поэтому логотипы, иконки, карты и диаграммы так часто делают в SVG.
Как SVG хранит изображение
Файл SVG представляет собой XML: читаемый текст, который можно открыть в любом редакторе. Элемент <path> содержит компактную строку команд рисования, <rect>, <circle> и <polygon> делают очевидные вещи, <text> хранит настоящий выделяемый текст, а <g> группирует элементы, чтобы их можно было перемещать или оформлять вместе. Атрибут viewBox задает систему координат, благодаря чему вся графика масштабируется корректно.
Поскольку это текст, SVG сжимается очень хорошо; сжатый gzipped SVG (иногда с расширением .svgz) часто занимает лишь часть исходного размера. То, что это текст, также означает, что SVG можно оформлять с помощью CSS, анимировать и использовать в скриптах. Браузер воспринимает его как часть документа, а не как непрозрачное изображение.
У последней из этих возможностей есть важный аспект безопасности: SVG может содержать элемент <script>. Везде, где SVG разрешен как пользовательская загрузка, его нужно очищать или отдавать так, чтобы он не мог выполняться, поэтому некоторые сайты отклоняют SVG, хотя принимают любые растровые форматы.
SVG плохо подходит как контейнер для фотографий. Можно встроить внутрь растровое изображение, но тогда это просто картинка из пикселей, обернутая в XML, без преимуществ масштабирования.
Какие метаданные содержит SVG
В SVG есть специальный элемент <metadata>, и так как стандарт не определяет, что именно в него помещать, редакторы записывают туда многое. Чаще всего он содержит RDF с терминами Dublin Core: dc:title, dc:creator, dc:date, dc:description, dc:rights и URI лицензии. Элементы <title> и <desc> также могут находиться в корне или на любой отдельной фигуре, где они одновременно служат текстом доступности для экранных считывателей.
Дальше идет служебная информация самого редактора, и обычно она занимает больше всего места. Inkscape записывает целое собственное пространство имен: геометрию окна документа, уровень масштабирования и положение курсора на момент последнего сохранения, направляющие, настройки сетки, названия и видимость слоев и строку inkscape:version. Illustrator внедряет пакет XMP со своими идентификаторами документа и его историей. Ничто из этого ничего не рисует.
Отсюда два практических вывода. Данные редактора легко могут составлять большую часть файла, поэтому прогон SVG через оптимизатор перед публикацией часто уменьшает его размер вдвое. И имена слоев - это текст, который вы написали: <g inkscape:label="client logo v3 REJECTED"> невидим на картинке, но отлично читается в файле.
Когда использовать SVG
Используйте SVG для всего нарисованного, а не сфотографированного: логотипов, иконок, схем, диаграмм, иллюстраций, карт. Это правильный выбор для веба, где один файл подходит для любых экранов, и для печати, где его можно масштабировать до любого размера.
Используйте PNG или JPG для фотографий и всего с плавными переходами тона. Экспортируйте также плоскую растровую копию, когда нужна картинка, которая откроется в слишком старом или ограниченном ПО без поддержки SVG, и удаляйте метаданные редактора перед публикацией, чтобы уменьшить размер файла и потому, что названия слоев не всегда предназначены для посторонних.