3

Хочу на сайте добавить svg, для этого написал

<img src="images/use_maximum.svg" alt="" class="img-responsive"/>

Проблема в том, что в Firefox и IE данная конструкция работает, а в Chrome нет. В браузере в место картинки пустота, хотя в DOM элемент есть. Подскажите, как исправить.

3
  • Что в SVG файле?
    – Alexey Ten
    21 сен 2016 в 13:14
  • обычная картинка 21 сен 2016 в 13:44
  • Обычная показалась бы. Покажите картинку
    – Alexey Ten
    21 сен 2016 в 13:45

3 ответа 3

3

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

  • А сейчас остается только гадать, так как вы привели один из многочисленных способов добавления svg в HTML. И этот способ работает во всех браузерах включая IE11, при нахождении svg изображения, как локально, так и удаленно.

Пример загрузки внешнего svg

<img src="https://upload.wikimedia.org/wikipedia/commons/a/a3/WikiProject_Zoo_Logo.svg" alt="" class="img-responsive"/>

  • Если у вас локальный файл svg нормально отображается в браузерах, но не виден в вашей HTML страничке, то может стоит поискать ошибки в верстке?

Ниже пример респонсивного svg

div .img-responsive{
width:100%;
height:100%;
}
<div class="img-responsive">
<svg viewBox="0 0 852 438">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a3/WikiProject_Zoo_Logo.svg" alt="" class="img-responsive"/>
</svg>
</div>  

1

У меня был проблема в сохранении SVG в Иллюстраторе. Вот параметры при которых svg стал отображаться.Сохранение svg из Иллюстратора

0

нужно указать тип, к примеру type="image/svg+xml"

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.