Chrome tidak merender SVG yang dirujuk melalui tag <img>

95

Saya mengalami masalah dengan google chrome yang tidak merender svg dengan tag img. Ini terjadi saat memuat ulang halaman dan pemuatan halaman awal. Saya bisa mendapatkan gambar untuk muncul dengan "Memeriksa Elemen" lalu mengklik kanan file svg dan membuka file svg di tab baru. Gambar svg kemudian akan ditampilkan di halaman asli.

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

Benar-benar bingung di sini tentang apa masalahnya. Gambar svg ditampilkan dengan baik di IE9 dan FF hanya saja tidak di Chrome atau Safari.

Saya telah menyetel jenis MIME saya juga. (gambar / svg + xml)

EDIT: Berikut adalah halaman html sederhana yang saya buat untuk membantu menggambarkan masalah saya.

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

Seperti yang Anda lihat, saya mencoba menggunakan file svg di tag img dan di css sebagai gambar latar belakang. Tidak ada yang berfungsi pada pemuatan halaman awal di chrome atau safari. Ketika saya memeriksa elemen klik kanan svg atau klik tautan ke svg memuat di jendela lain file svg akan dirender di tab asli.

google-chrome svg Jason Van Vuren
sumber
1
Dapatkah Anda memberikan contoh atau memposting beberapa kode contoh di sini?
Sirko
Kami benar-benar harus dapat melihat dan mereproduksi ini sendiri jika Anda membutuhkan bantuan.
Phrogz
Kebetulan, apakah "Aged-Brass.svg" Anda berisi gambar yang disematkan? Saya memiliki masalah yang sama, dan itulah yang saya telusuri hingga ...
McGarnagle

Jawaban:

125

Cara yang sederhana dan mudah; menurut https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/ Anda harus membuka file .SVG dengan editor teks (seperti notepad) dan mengubahnya

xlink:href="data:img/png;base64,

untuk:

xlink:href="data:image/png;base64,

itu berhasil untuk saya!

Sharif Yazdian
sumber
9
Ini adalah solusi yang berhasil. Saya mengalami masalah ini saat mengekspor objek vektor pintar sebagai SVG menggunakan photoshop.
Mikhail
10
Ini adalah penyelamat hidup, menghabiskan berjam-jam mencoba mencari tahu apa masalahnya. Terima kasih!!
mhodges
2
Demikian pula, ini memecahkan masalah saya, juga menghabiskan banyak waktu mencoba mencari tahu mengapa gambar itu tidak muncul.
MrEvers
3
Saya tidak memiliki baris kode ini di file SVG, dan menambahkannya di tag <svg> tidak melakukan apa-apa bagi saya.
Pete
2
Ini harus jauh di atas. Anda menyelamatkan hari saya.
Mattia Rasulo
42

Svg-tag membutuhkan atribut namespace xmlns:

<svg xmlns="http://www.w3.org/2000/svg"></svg>
bang
sumber
Ini. Dan saya harus memuatnya sebagai gambar latar div.
casey
1
Svg masih membutuhkan namespace. Pastikan saja itu ditentukan dalam file SVG yang Anda gunakan sebagai latar belakang.
Bang
30

saya datang ke sini karena saya memiliki masalah yang sama, ketika saya memeriksa elemen saya dapat melihat file tersebut, tetapi di situs saya tidak bisa (bahkan ketika menggunakan localhost)

jawaban untuk masalah saya adalah menyimpan file SVG. Jika Anda menyimpannya dari ilustrator pastikan untuk mengklik 'embed' dan bukan 'link'. karena tautan hanya akan merujuk ke file lokal Anda daripada menyertakan data (Jika saya memahaminya dengan benar). masukkan deskripsi gambar di sini

Saya membacanya di situs web adobe yang memiliki beberapa tip berguna lainnya untuk mengekspor http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

Ini berhasil untuk saya, semoga bermanfaat.

MintWelsh
sumber
1
Adakah yang tahu jika ada cara untuk melakukan ini dengan objek pintar di Photoshop? Membuka ilustrator dan mengekspor ulang dengan opsi ini di ilustrator adalah satu-satunya hal yang memungkinkan saya menampilkan svg di chrome, setelah beberapa kali mencoba perbaikan lainnya.
Alex Podworny
2
Apa efek opsi itu pada kode SVG yang sebenarnya?
Jānis Elmeris
19

Saya datang ke sini karena saya memiliki masalah yang sama, gambar tidak ditampilkan. Apa yang saya temukan adalah bahwa header jenis konten dari server pengujian saya tidak benar. Saya memperbaikinya dengan menambahkan yang berikut ini ke file .htaccess saya:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz
pengguna87312
sumber
1
Terima kasih. Mengatur Jenis Konten ke gambar / svg + xml memperbaikinya.
samir105
Perhatikan bahwa image/svgmenawarkan file untuk diunduh, itu harus dimiliki +xml.
Jakub Vrána
10

Gunakan <object>sebagai gantinya (tentu saja, ganti setiap URL dengan milik Anda sendiri):

.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>
Luaskan cuplikan

Essem
sumber
6

Menambahkan atribut lebar ke tag [svg] (dengan mengedit XML sumber svg) berhasil untuk saya: misalnya:

<!-- 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>
Silas Palmer
sumber
3

Saya dapat menggunakan sampel Anda untuk membuat halaman pengujian, dan itu berfungsi dengan baik. Asumsi saya adalah ada yang salah dengan file svg Anda. Bisakah Anda menempelkannya di sini juga? Ini sampel yang saya gunakan.

 <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>
RestingRobot
sumber
3

Sepertinya bug Chrome, saya melakukan sesuatu yang lain karena saya hampir gila karena ini ... menggunakan debugger Chrom jika Anda mengubah css dari objek svg yang ditampilkan di layar.

jadi yang saya lakukan adalah: 1. memeriksa ukuran layar 2. mendengarkan peristiwa "memuat" objek SVG saya 3. ketika elemen dimuat saya mengubah css-nya menggunakan jQuery 4. itu melakukan trik untuk saya

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

Yossi Ben-david
sumber
2

Saya memiliki masalah yang sama dan jawaban yang ada untuk ini tidak berlaku, atau berfungsi tetapi kami tidak dapat menggunakannya karena alasan lain. Jadi saya harus mencari tahu apa yang tidak disukai Chrome tentang SVG kami.

Dalam kasus kami, ternyata idatribut dari symboltag di file SVG memiliki :di dalamnya, yang tidak disukai Chrome. Segera setelah saya melepasnya, :itu bekerja dengan baik.

Buruk:

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

Baik:

<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>
Mike Willis
sumber
2

.svggambar tidak memiliki tinggi dan lebar awal itu. Oleh karena itu tidak terlihat. Anda harus mengaturnya.

Anda dapat melakukan in-line atau dalam file css:

Di barisan:

<img src="../images/Aged-Brass.svg" class="image" alt="logo" style="width: 100px; height: 50px;">

File css:

<img src="../images/Aged-Brass.svg" class="image" alt="logo">

.image {
    width: 100px;
    height: 50px;
}
Krzysztof Janiszewski
sumber
2

Dalam kasus saya, masalah ini tetap ada ketika saya membuat dan menyimpan svg menggunakan Photoshop. Yang membantu, adalah membuka file menggunakan Illustrator dan mengekspor svg sesudahnya.

Niels Vanhorenbeeck
sumber
Apa yang berubah dalam kode SVG yang sebenarnya? Saya tidak menggunakan Photoshop atau Illustrator, saya perlu memperbaiki file SVG yang sudah ada.
Jānis Elmeris
Dalam hal ini coba jawaban @Sharif!
Mattia Rasulo
1

Saya mengekspor svg saya dari Photoshop CC pada awalnya dan harus menambahkan secara manual

version="1.1"ke dalam <svg>tag

untuk menampilkannya di chrome.

Andy Nguyen
sumber
1

Jenis konten di header HTTP dari server adalah masalah bagi saya. Saya memiliki server node.js, menambahkan:

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

pageName adalah variabel lokal saya untuk apa yang diminta.

Dugaan saya ini adalah masalah umum! Saya menggunakan versi Chrome saat ini (Mar 2020).

Badman Goodman
sumber
0

Punya masalah yang sama. Jika server dikonfigurasi dengan benar dan .htacces bukanlah jawabannya, mungkin ingin melihat sumber svg yang Anda sematkan. Milik saya dibuat dengan editor teks, ditampilkan dengan baik di Chrome & Safari di dalam kode html5, setelah disematkan, tidak ada yang terlihat. Menambahkan versi yang benar, dimensi dll ke kode svg dan berfungsi seperti pesona. Juga, semua gaya sebaris.

Yaitu

<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>
Uku
sumber
0

Saya juga mendapat masalah yang sama dengan chrome, setelah menambahkannya DOCTYPEberfungsi seperti yang diharapkan

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Sebelum

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

Setelah

    <?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>
Madan Bhandari
sumber
Apa perbedaan antara kedua cuplikan kode ini? Saya tidak melihatnya.
rgilligan
@rgilligan saya buruk, yang pertama seharusnya tanpa doctype
Madan Bhandari
0

Berhati-hatilah karena Anda tidak memiliki properti css transisi untuk gambar svg

Sekarang saya tidak tahu mengapa, tetapi jika Anda membuat: "transisi: semua kemudahan 0.3s" untuk gambar svg di Chrome gambar tidak muncul

misalnya:

* {
   transition: all ease 0.3s
  }

Chrome tidak merender svg.

Hapus semua properti css transisi dan coba lagi

wilo087
sumber
0

Jika ada masalah, coba buka gambar terlebih dahulu dengan program yang mampu membaca gambar-svg.
Jika gagal, maka gambar-svg entah bagaimana rusak.

Saya memiliki kasus itu dan menyalin svg-paths dalam gambar-svg baru dan menyesuaikan semua detail dari tag-svg.

Saya tidak pernah menguji alasan mengapa itu tidak dirender tetapi anggaplah bahwa beberapa tanda khusus yang tidak terlihat menyebabkan kesalahan render. Terkadang mendapatkan file diedit di Mac Saya sudah mengalami masalah ini di konteks lain.

David
sumber
0

Saya mengalami masalah yang sama dengan gambar SVG yang disertakan melalui tag IMG. Bagi saya, Chrome tidak suka ada baris kosong langsung di bagian atas file.

Saya menghapus baris kosong dan SVG saya segera mulai merender.

pwbred
sumber
0

Saya memastikan bahwa saya menambahkan Style of the Image . Itu berhasil untuk saya

style= "width:320; height:240"

pensebien
sumber
0 
Just replace <img> tag to <object> tag for SVG image.

<object data="assets/twitter-wrap.svg" type="image/svg+xml"></object>
Jay Supeda
sumber