У меня возникли проблемы с тем, что Google Chrome не отображает svg с тегом img. Это происходит при обновлении страницы и начальной загрузке страницы. Я могу заставить изображение появиться, выполнив «Проверка элемента», затем щелкнув файл svg правой кнопкой мыши и открыв файл svg на новой вкладке. Затем изображение svg будет отображено на исходной странице.
<img src="../images/Aged-Brass.svg">
Совершенно не понимаю, в чем проблема. Изображение svg отлично отображается в IE9 и FF, но не в Chrome или Safari.
У меня также установлены типы MIME. (изображение / svg + xml)
РЕДАКТИРОВАТЬ: Вот простая страница html, которую я создал, чтобы проиллюстрировать мою проблему.
<!DOCTYPE html>
<html>
<head>
<title>SVG Test</title>
<style>
#BackgroundImage{
background: url('../images/Aged-Brass.svg') no-repeat scroll left top;
width: 400px;
height: 600px;
}
#ImageTag{
width: 400px;
height: 600px;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="ImageTag">
<img src="../images/Aged-Brass.svg">
</div>
<div id="BackgroundImage"></div>
</body>
</html>
Как видите, я пытаюсь использовать файл svg как в теге img, так и в css в качестве фонового изображения. Ни одна из них не работает при начальной загрузке страницы в хроме или сафари. Когда я проверяю элемент, щелкните правой кнопкой мыши svg или щелкните ссылку для загрузки svg в другом окне, файл svg отобразится на исходной вкладке.
источник
Ответы:
Простой и легкий способ; согласно https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/ Вам необходимо открыть файл .SVG с помощью текстового редактора (например, блокнота) и изменить
xlink:href="data:img/png;base64,кому:
xlink:href="data:image/png;base64,у меня это сработало!
источник
Тегу svg необходим атрибут пространства имен xmlns:
<svg xmlns="http://www.w3.org/2000/svg"></svg>источник
Я пришел сюда, потому что у меня была такая же проблема: когда я проверяю элемент, я вижу файл, но на сайте я не могу (даже при использовании localhost)
ответ на мою проблему заключался в сохранении файла SVG. Если вы сохранили его из иллюстратора, убедитесь, что вы нажали «встроить», а не «ссылку». поскольку ссылка будет просто ссылаться на ваши локальные файлы, а не включать данные (если я правильно понимаю).
Я прочитал об этом на веб-сайте Adobe, на котором есть еще несколько полезных советов по экспорту http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html
Это сработало для меня, надеюсь, это было полезно.
источник
Я пришел сюда, потому что у меня была аналогичная проблема, изображение не рендерилось. Я обнаружил, что заголовок типа контента моего тестового сервера был неправильным. Я исправил это, добавив в свой файл .htaccess следующее:
источник
image/svgпредлагаемый файл для скачивания, он должен иметь+xml.<object>Вместо этого используйте (конечно, замените каждый URL своим собственным):.BackgroundImage { background: url('https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg') no-repeat scroll left top; width: 400px; height: 600px; }<!DOCTYPE html> <html> <head> <title>SVG Test</title> </head> <body> <div id="ObjectTag"> <object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg" width="400" height="600"> Your browser does not support SVG. </object> </div> <div class="BackgroundImage"></div> </body> </html>источник
Добавление атрибута ширины в тег [svg] (путем редактирования исходного XML-кода svg) сработало для меня: например:
<!-- This didn't render --> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"> ... </svg> <!-- This did --> <svg version="1.1" baseProfile="full" width="1000" xmlns="http://www.w3.org/2000/svg"> ... </svg>источник
Я смог использовать ваш образец для создания тестовой страницы, и она отлично сработала. Я предполагаю, что с вашим файлом svg что-то не так. Можете вы это вставить и сюда? Вот образец, который я использовал.
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> <g> <title>Layer 1</title> <ellipse ry="30" rx="30" id="svg_1" cy="50" cx="50" stroke-width="5" stroke="#000000" fill="#FF0000"/> </g> </svg>источник
похоже на ошибку Chrome, я сделал что-то еще, так как чуть не сошел с ума из-за этого ... с помощью отладчика Chrom, если вы измените css объекта svg, который он показывает на экране.
Итак, что я сделал, было: 1. проверить размер экрана 2. прослушать событие "load" моего объекта SVG 3. когда элемент загружен, я изменил его css с помощью jQuery 4. это помогло мне
if (jQuery(window).width() < 769) { jQuery('object#mysvg-logo')[0].addEventListener('load', function() { jQuery("object#mysvg-logo").css('width','181px'); }, true); }width: 180px;<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <object id="mysvg-logo" type="image/svg+xml" data="my svg logo url here">Your browser does not support SVG</object>источник
У меня была аналогичная проблема, и существующие ответы на нее либо неприменимы, либо работали, но мы не могли их использовать по другим причинам. Поэтому мне пришлось выяснить, что не нравится Chrome в наших SVG.
В нашем случае оказалось, что в
idатрибутеsymbolтега в файле SVG есть a:, что не понравилось Chrome. Вскоре, когда я удалил,:все заработало.Плохой:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72"> <defs> <symbol id="ThisIDHasAColon:AndChromeDoesNotLikeIt"> ... </symbol> </defs> <use .... xlink:href="#ThisIDHasAColon:AndChromeDoesNotLikeIt" /> </svg>Хороший:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72"> <defs> <symbol id="NoMoreColon"> ... </symbol> </defs> <use .... xlink:href="#NoMoreColon" /> </svg>источник
.svgизображение не имеет исходной высоты и ширины. Поэтому этого не видно. Вы должны это установить.Вы можете сделать это как в строке, так и в файле css:
В соответствии:
<img src="../images/Aged-Brass.svg" class="image" alt="logo" style="width: 100px; height: 50px;">Css файл:
<img src="../images/Aged-Brass.svg" class="image" alt="logo">.image { width: 100px; height: 50px; }источник
В моем случае эта проблема не исчезла, когда я создал и сохранил SVG с помощью Photoshop. Что помогло, так это открытие файла с помощью Illustrator и последующий экспорт svg.
источник
Сначала я экспортировал свой svg из Photoshop CC, и мне пришлось вручную добавить
version="1.1"в<svg>тегчтобы он отображался на хроме.
источник
Тип содержимого в HTTP-заголовке с сервера был для меня проблемой. У меня есть сервер node.js, добавлен:
if( pageName.substring(pageName.lastIndexOf('.')) == '.svg' ) { res.writeHead(200, { "Content-Type": "image/svg+xml" }); }pageName - это моя локальная переменная для того, что запрашивается.
Думаю, это обычная проблема! Я использую текущую версию Chrome (март 2020 г.).
источник
Была такая же проблема. Если сервер настроен правильно и .htacces не является ответом, возможно, вы захотите посмотреть исходный код svg, который вы встраиваете. Мои были созданы с помощью текстового редактора, хорошо отображались в Chrome и Safari внутри кода html5, после встраивания ничего не было видно. Добавлена правильная версия, размеры и т. Д. В код svg и работает как шарм. Кроме того, все стили встроены.
Т.е.
<svg version="1.1" baseProfile="full" width="24" height="24" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" rx="2" ry="2" width="24" height="24" style="fill:#fbc800;width:24px;height:24px;" /> </svg>источник
У меня такая же проблема с хромом, после добавления
DOCTYPEон работает должным образом<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">Перед
<?xml version="1.0" encoding="iso-8859-1"?> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve"> <g fill="none" stroke="black" stroke-width="15"> ...... ...... ....... </g> </svg>После
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve"> <g fill="none" stroke="black" stroke-width="15"> ...... ...... ....... </g> </svg>источник
Будьте осторожны, чтобы у вас нет свойства перехода css для ваших изображений svg
Я не знаю, почему, но если вы сделаете: "transition: all easy 0.3s" для изображения svg в Chrome, изображения не появятся.
например:
* { transition: all ease 0.3s }Chrome не отображает svg.
Удалите все свойства перехода css и повторите попытку.
источник
При возникновении проблем попробуйте сначала открыть изображения с помощью программы, способной читать svg-изображения.
Если это не удается, значит, svg-образ каким-то образом поврежден.
У меня был этот случай, и я скопировал svg-paths в новое svg-изображение и настроил все детали svg-тегов.
Я никогда не проверял причину, по которой это не рендеринг, но предполагаю, что какие-то невидимые специальные знаки вызвали ошибку рендеринга. Иногда редактируя файлы на Mac, у меня уже была эта проблема в другом контексте.
источник
У меня была такая же проблема с изображением SVG, включенным через тег IMG. Для меня оказалось, что Chrome не любит, когда прямо в верхней части файла есть пустая строка.
Я удалил пустую строку, и мой SVG сразу начал рендеринг.
источник
Я убеждаюсь, что добавляю стиль изображения . Это сработало для меня
style= "width:320; height:240"источник
Just replace <img> tag to <object> tag for SVG image. <object data="assets/twitter-wrap.svg" type="image/svg+xml"></object>источник