Когда следует использовать встроенный SVG вместо img?

Question

Accepted Answer

SVG — это **векторный** формат изображения (на основе XML), поэтому он масштабируется до любого размера без размытия. Вы можете включить его двумя основными способами, каждый с компромиссами. ## Встроенный SVG — разметка прямо в HTML ```html ``` **Преимущества:** вы можете стилизовать его с помощью CSS (`fill`, `stroke`), анимировать его части, изменять цвет через `currentColor` (наследует цвет текста) и реагировать на события — потому что это реальный DOM. Никаких дополнительных HTTP-запросов. **Недостатки:** раздувает HTML, не кэшируется отдельно, повторяющиеся значки дублируют разметку. ## SVG через `` — ссылка на файл ```html

``` **Преимущества:** кэшируется браузером, сохраняет HTML в чистоте, просто. **Недостатки:** вы **не можете** стилизовать или обрабатывать его внутреннее содержимое с помощью CSS/JS — это непрозрачное изображение. ## Руководство по принятию решения ```text Need to recolor/animate/interact with the SVG → inline SVG Static logo/illustration, want caching + clean HTML →

Many repeated icons → an SVG sprite () or an icon component ``` ## Доступность ```html ``` ## Почему это важно Выбор между встроенным и `` SVG сводится к тому, нужно ли вам **стилизовать/анимировать** графику (встроенный) или просто **отобразить** её эффективно (``). Значки, которые меняют цвет при наведении или при смене темы, идут встроенными (часто как компоненты); статические активы бренда идут через ``. В любом случае векторы остаются четкими при любом разрешении — идеально для значков и логотипов.

Встроенный SVG — разметка прямо в HTML

SVG через <img> — ссылка на файл

Руководство по принятию решения

Доступность

Почему это важно

SVG через `<img>` — ссылка на файл