Chrome не відображає SVG, на який посилається тег <img>


95

У мене проблеми з Google Chrome, які не відображають svg з тегом img. Це трапляється під час оновлення сторінки та початкового завантаження сторінки. Я можу отримати зображення, щоб показати його, "Перевіряючи елемент", клацнувши правою кнопкою миші файл svg та відкривши файл svg у новій вкладці. Потім зображення svg буде відтворено на вихідній сторінці.

<img src="../images/Aged-Brass.svg">

Тут повністю втрачено те, в чому проблема. Зображення svg чудово відображається в IE9 та FF, тільки не в Chrome або Safari.

У мене також встановлені типи MIME. (image / svg + xml)

EDIT: Ось проста 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 відобразиться у вихідній вкладці.


1
Чи можете ви навести приклад або розмістити тут приклад коду?
Сірко

Нам дійсно потрібно мати можливість побачити та відтворити це самостійно, якщо вам потрібна допомога.
Фрогц

Випадково, чи містив ваш "Aged-Brass.svg" вбудоване зображення? У мене була та сама проблема, і саме до цього я її відслідковував ...
McGarnagle

Відповіді:


125

Простий і легкий спосіб; відповідно до 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,

мені це вдалося!


9
Це робоче рішення. Я зіткнувся з цією проблемою під час експорту розумного векторного об’єкта як SVG за допомогою Photoshop.
Михайло

10
Це врятувало життя, годинами намагаючись з’ясувати, в чому проблема. Дякую!!
mhodges

2
Так само це вирішило мою проблему, а також витратило багато часу, намагаючись з’ясувати, чому зображення не відображалося.
MrEvers

3
У мене не було цього рядка коду у файлі SVG, і додавання його в тег <svg> для мене нічого не зробило.
Піт

2
Це повинно бути далеко зверху. Ти врятував мій день.
Маттіа Расуло,

42

Тегу svg потрібен атрибут простору імен xmlns:

<svg xmlns="http://www.w3.org/2000/svg"></svg>

Це. І я повинен був завантажити його як фонове зображення div.
Кейсі

1
SVG все ще потребує простору імен. Просто переконайтеся, що це визначено у файлі SVG, який ви використовуєте як тло.
вибух

30

я прийшов сюди, тому що у мене була та сама проблема, коли я перевіряю елемент, я бачу файл, але на сайті я не можу (навіть при використанні localhost)

відповідь на мою проблему полягала в збереженні файлу SVG. Якщо ви зберегли його з Illustrator, переконайтеся, що натискаєте «вбудовувати», а не «посилання». оскільки посилання буде просто посилатися на ваші локальні файли, а не включати дані (Якщо я правильно їх розумію). введіть тут опис зображення

Я читав про це на веб-сайті Adobe, де є деякі інші корисні поради щодо експортування http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

Це спрацювало для мене, сподіваюся, було корисно.


1
Хтось знає, чи є спосіб зробити це за допомогою розумного об’єкта у Photoshop? Відкриття Illustrator та реекспорт за допомогою цієї опції в Illustrator було єдиним, що дозволило мені показати svgs у chrome після декількох спроб інших виправлень.
Alex Podworny,

2
Який вплив ця опція впливає на фактичний код SVG?
Яніс Елмеріс,

19

Я прийшов сюди, тому що у мене була подібна проблема, зображення не відображалося. Я дізнався, що заголовок типу вмісту мого тестового сервера був неправильним. Я виправив це, додавши до мого файлу .htaccess наступне:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

1
Дякую. Налаштування Content-Type на image / svg + xml це виправило.
samir105

Зверніть увагу, що image/svgпропонується файл для завантаження, він повинен бути +xml.
Якуб Врана

10

<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>


6

Додавання атрибута width до тегу [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>

3

Я зміг використати ваш зразок для створення тестової сторінки, і вона спрацювала чудово. Я припускаю, що з вашим файлом 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>

3

схоже на помилку Chrome, я зробив щось інше, оскільки через це ледь не з глузду з'їхав ... за допомогою відладчика Chrom, якщо ви змінили css об'єкта svg, який він відображає на екрані.

отже, що я зробив: 1. перевірити розмір екрану 2. прослухати подію «завантаження» мого об’єкта 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>


2

У мене була подібна проблема, і існуючі відповіді на це або не застосовувались, або працювали, але ми не могли їх використовувати з інших причин. Тож мені довелося з’ясувати, що не сподобалось Chrome нашим SVG.

У нашому випадку виявилося, що в idатрибуті symbolтегу у файлі SVG було :, що не сподобалось 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>

2

.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;
}

2

У моєму випадку ця проблема зберігалася, коли я створював та зберігав svg за допомогою Photoshop. Що допомогло, це відкриття файлу за допомогою Illustrator та експортування svg згодом.


Що змінилося в фактичному коді SVG? Я не використовую ні Photoshop, ні Illustrator, мені потрібно виправити існуючий файл SVG.
Яніс Елмеріс,

У цьому випадку спробуйте відповідь @Sharif!
Маттіа Расуло,

1

Спочатку я експортував svg з Photoshop CC і повинен був додати вручну

version="1.1"в <svg>тег

щоб показати його на хромі.


1

Проблемою для мене був тип вмісту в заголовку HTTP із сервера. У мене є сервер node.js, доданий:

if( pageName.substring(pageName.lastIndexOf('.')) == '.svg' ) {
  res.writeHead(200, { "Content-Type": "image/svg+xml" });
}

pageName - це моя локальна змінна для запитуваного.

Я гадаю, це загальна проблема! Я використовую поточну версію Chrome (бер. 2020 р.).


0

Була та сама проблема. Якщо сервер налаштовано правильно, а .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>

0

Я також отримав таку ж проблему з chrome, після додавання 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>

У чому різниця між цими двома фрагментами коду? Я цього не бачу.
rgilligan

@rgilligan мій поганий, перший повинен був без доктіпа
Мадан Бхандарі

0

Будьте обережні, щоб у вас не було властивості css переходу для ваших зображень svg

Зараз я не знаю, чому, але якщо ви зробите: "перехід: все легше 0,3 с" для зображення svg в Chrome, зображення не відображаються

наприклад:

* {
   transition: all ease 0.3s
  }

Chrome не відображає svg.

Видаліть будь-яке властивість css переходу та спробуйте ще раз


0

У разі проблем спробуйте спочатку відкрити зображення за допомогою програми, яка здатна читати svg-зображення.
Якщо це не вдається, то зображення svg якось пошкоджене.

Я мав цей випадок і скопіював svg-шляхи в нове svg-зображення та відрегулював усі деталі svg-тегів.

Я ніколи не перевіряв причину того, що це не рендеринг, але припускаю, що деякі невидимі спеціальні знаки спричинили помилку рендерингу. Отримуючи іноді файли, відредаговані на Mac, я вже мав цю проблему в іншому контексті.


0

У мене була та ж проблема із зображенням SVG, включеним через тег IMG. Для мене виявилося, що Chrome не сподобалось, що вгорі файлу є порожній рядок.

Я видалив порожній рядок, і мій SVG негайно розпочав візуалізацію.


0

Обов’язково додаю стиль зображення . У мене це спрацювало

style= "width:320; height:240"


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.