SVG как источник в теге <img>, который не отображается в Internet Explorer 11

Я пытаюсь показать SVG файл как src тега <img> (который согласно caniuse.com/svg-img Я должен уметь делать во всех последних браузерах). Файл отображается в Chrome и Firefox, но Internet Explorer отображает только черный ящик с x, как показано ниже:

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

HTML:

<div id="plot">
  <img id="svg" src="plot1.svg" height="100%" width="100%"/>
</div>

Стили:

#plot {
    float: right;
    width: 650px;
    height: 550px;
    background: #ffffff;
}

#plot svg {
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}

Каковы возможные причины появления x?

Изменить: SVG - это большой автоматически созданный файл, пример которого можно увидеть здесь. Код, который используется для его создания, является старым, может ли это быть чем-то связанным с DOCTYPE вверху? Я попытался изменить его, но ничего не смог отобразить.

Изменить 2: У меня это работает... вроде. Когда я нажимаю F12 и перехожу на вкладку "эмуляция", по какой-то причине он показывает, что IE отображает страницу в режиме документа 7, т.е. используя режим совместимости для IE7, который не поддерживает SVG. Я могу вручную щелкнуть любую из более высоких версий, и она отобразится нормально. Мой следующий вопрос: почему? почему он работает, показывая страницу в режиме 7, и как мне остановить это поведение?

Ответ 1

Я нашел проблему. Я просматривал страницу по интрасети, и я не уверен, почему, но IE по умолчанию - "отображать сайты интрасети в представлении Compatibilty". Просто пришлось отключить этот флажок в настройках просмотра совместимости. SVG вообще не работает в IE7, поэтому я не получал изображения.

Ответ 2

Это также может быть вызвано отправкой svg как plain/text, а не как image/svg+xml. В Apache вы можете исправить это, добавив в свой .htaccess файл -

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Ответ 3

Я обнаружил, что наличие стиля "width" на img (для масштабирования) работает в Edge и Chrome, но заставляет его исчезать в IE11. Скорее всего, установка "max-width" и "max-height" работает во всех трех браузерах.

Ответ 4

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

Использование SVG в качестве <img> Если я сохраню SVG в файл, я могу использовать его непосредственно в теге <img>.

<img src="kiwi.svg" alt="Kiwi standing on oval">

В Illustrator наша монтажная панель была 612px ✕ 502px.

То, насколько большое изображение будет на странице, осталось для себя. Вы можете изменить его размер, просто выбрав img и изменив его ширину или высоту, как и PNG или JPG.

Поддержка браузера

Использование этого способа имеет свой собственный набор специфической поддержки браузера. По существу: он работает везде, кроме IE 8 и ниже, и Android 2.3 и ниже.

Если вы хотите использовать SVG, но также должны поддерживать эти браузеры, которые не поддерживают SVG таким образом, у вас есть параметры.

Один из способов - проверить поддержку с помощью Modernizr и заменить src изображения:

if (!Modernizr.svg) {
  $(".logo img").attr("src", "images/logo.png");
}

У Дэвида Бушелла есть действительно простая альтернатива, если вы в порядке с JavaScript в разметке:

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

Это было извлечено из CSS Tricks, нажмите, чтобы прочитать полную статью.