1. Блог Inweb
  2. Ask Inweb
  3. SEO
  4. Как прописать ALT для SVG изображений?

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

Есть

ответ

Дата вопроса: 15.12.2019, 12:32

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

А в стилях уже добавлен код изображения. Разработчик говорит что так правильно добавлять изображения в SVG.

Хочу прописать атрибут alt к изображениям, чтобы указать там ключевые слова и лучше чтобы сайт ранжировался. Как это сделать с SVG?? Ведь нет тега img вообще?

Автор: ALT

Просмотров: 51

Категория:

SEO

Оцените вопрос

Рекомендуйте нас друзьям

Частный ответ

Рейтинг автора

254

Дано ответов

61

Влад Наумов
4
Рейтинг ответа

Влад Наумов

Head of SEO

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

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

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

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

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

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

Размещение SVG при помощи тега img

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

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

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

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

3. Через object

Размещение SVG при помощи Object

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

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

Размещение SVG при помощи тега SVG

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

Выводы:

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

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

    Похожие вопросы

    Для того чтобы оставить вопрос, необходимо войти используя свой аккаунт одной из социальных сетей.

    
    ASK Inweb: Задать вопрос специалисту