Как прописать ALT для SVG изображений?

Влад Наумов

Head of SEO

Добрый день, спасибо за интересный вопрос.

SVG — формат векторной графики, т.е. такое изображение может растягиваться и сжиматься без потери качества. Оно всегда будут одинаково хорошо выглядеть на разных экранах. Это основное преимущество SVG перед JPEG, PNG либо GIF. Поэтому сейчас очень часто изображения делают в SVG формате.

Есть хорошее видео о преимуществах и методах размещения SVG изображений:

Но, действительно, не всегда есть возможность прописать атрибут ALT для изображений в формате SVG.

Методы размещения SVG изображений

1. При помощи тега img

В данном случае не будут работать скрипты и любые элементы взаимодействия. Поэтому иногда данный метод размещения SVG изображения не подходит.

2. Фоновая картинка в стилях

.picture {
background-image: url(picture.svg);
}

Результат такой же, как и при реализации через тег img, только Alt нельзя прописать.

3. Через object

В данном методе размещения работают скрипты, взаимодействия и анимация. Можно прописать Alt.

4. При помощи тега svg

В данном методе размещения работают скрипты, взаимодействия и анимация. Но нельзя прописать Alt.

Выводы:

1. Метод размещения SVG изображения выбирается разработчиком, исходя из целей и необходимости работы скриптом и анимации в SVG.
2. SVG изображение можно разместить следующими способами: через тег img, фоновой картинкой в стилях, через object и при помощи тега SVG.
3. Добавить для SVG изображения ALT можно только если изображение размещено при помощи тега img либо через object.

Дата сообщения: 16.12.2019, 11:23