В каком случае img и svg используются в html?

Question

[sammyKj]

Подскажите, в каком случае img и svg используются через html, а в каком случае их лучше прописывать через css?

Comments

[Ankhena]

Разметка - смысл.
Украшения - стили.
Если вы посмотрите на страницу без стилей, вам всё будет понятно? Ничего лишнего не будет?
Вот и вся логика.

Если картинка контентная, например, изображение конкретного товара в интернет магазине, то это img.
Если это украшение, то в стили. Например, иконки соц.сетей это украшения ссылок. Картинка ставится фоном и/или псевдоэлементом, а внутрь ссылки добавляется спан с классом visually-hidden (гуглится по "паттерн visually-hidden") и поясняющим текстом типа "наша группа в ВК".

Обязательно почитайте про доступность
https://developer.mozilla.org/ru/docs/Web/Accessibility
https://developer.mozilla.org/ru/docs/Web/Accessib...
и т.д.

Есть ещё аргумент за вставку SVG в разметку: это анимации и замена нескольких цветов при наведении (или других состояниях).

Answer 1

[Сергей delphinpro]

sammyKj, Иконки svg удобнее всего подключать как символьный спрайт через use

Изображения в целом можно разделить на контент и оформление. Контент чаще всего должен иметь возможность изменения из админки и подключается тегом img. Оформление чаще всего не нуждается в таком редактировании и может быть задано в css.