Каковы преимущества формата SVG

Что проверяют

Понимаете ли вы, где вектор выигрывает у растра, а где проигрывает. Интервьюер ждёт не рекламу формата, а границы применимости. Следом почти всегда идут два уточнения: чем инлайн-SVG отличается от подключения через <img> и когда SVG использовать не стоит.

Как отвечать

Сначала преимущества, каждое с механикой:

• масштабируемость: это описание фигур, а не сетка пикселей, поэтому иконка чёткая на любой плотности экрана и не нужны наборы @2x. Обязателен атрибут viewBox, без него масштабирования не будет;
• вес: иконка и простая иллюстрация занимают сотни байт после svgo и сжатия, потому что внутри обычный текст;
• стилизация: инлайн-SVG попадает в DOM, ему доступны CSS-переменные, currentColor, :hover, переключение под тёмную тему, анимация средствами CSS;
• интерактивность: у каждой части своя нода, обработчик вешается на конкретный сектор диаграммы или на область карты;
• доступность: смысловой картинке дают role="img" и <title>, декоративную закрывают через aria-hidden="true";
• читаемость в ревью: XML диффится, правится руками и генерируется на сервере, например для графиков по данным.

Отдельно проговорите способы подключения: инлайн даёт стили и скрипты, но раздувает разметку и не кэшируется отдельно от страницы; <img> и фон в CSS кэшируются браузером, но внутренние элементы снаружи не достать и скрипты внутри не выполняются; спрайт из <symbol> и <use> это компромисс для набора иконок.

Минусы называйте сами, это сильный ход: фотографию вектором не опишешь, сложные градиенты и фильтры отрисовываются дороже, чем готовый AVIF, сотни инлайновых иконок утяжеляют DOM, а чужой SVG обязательно санитизировать.

Где спотыкаются

Утверждают, что SVG всегда легче PNG. На детальной иллюстрации с тысячами узлов всё наоборот.

Не знают про viewBox и удивляются, почему картинка не тянется под контейнер.

Считают формат безопасным по умолчанию и вставляют загруженный пользователем файл инлайном. Внутри может быть <script>, и это готовый XSS.