Chrome, <img> etiketi aracılığıyla referans gösterilen SVG'yi oluşturmuyor


95

Google chrome ile svg'yi bir img etiketiyle oluşturmama konusunda sorunlar yaşıyorum. Bu, sayfa yenilenirken ve ilk sayfa yüklemesi sırasında olur. "Eleman İnceleniyor" ve ardından svg dosyasına sağ tıklayıp svg dosyasını yeni bir sekmede açarak görüntünün gösterilmesini sağlayabilirim. Daha sonra svg resmi orijinal sayfada görüntülenecektir.

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

Sorunun ne olduğu konusunda burada tamamen kayıp. Svg resmi, Chrome veya Safari'de değil, IE9 ve FF'de iyi işliyor.

MIME türlerimi de ayarladım. (resim / svg + xml)

DÜZENLEME: Sorunumu göstermeye yardımcı olması için oluşturduğum basit bir html sayfası.

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

Gördüğünüz gibi bir svg dosyasını hem img etiketinde hem de css'de arka plan görüntüsü olarak kullanmaya çalışıyorum. Chrome veya safari'de ilk sayfa yüklemesinde çalışmayın. Öğeyi incelediğimde svg'ye sağ tıkladığımda veya başka bir pencerede svg yüklemesine bağlantıya tıkladığımda svg dosyası orijinal sekmede görüntülenecektir.


1
Buraya bir örnek koyabilir veya örnek bir kod gönderebilir misiniz?
Sirko

Yardım istiyorsanız, bunu gerçekten kendimiz görebilmemiz ve yeniden üretebilmemiz gerekiyor.
Phrogz

Şans eseri, "Aged-Brass.svg" dosyanız gömülü bir resim içeriyor muydu? Bende de aynı problem vardı ve ben de bunu
izledim

Yanıtlar:


125

Basit ve kolay bir yol; https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/ uyarınca .SVG dosyasını bir metin düzenleyiciyle (not defteri gibi) açmalı ve değiştirmelisiniz

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

to:

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

benim için çalıştı!


9
Bu çalışan bir çözümdür. Photoshop kullanarak akıllı vektör nesnesini SVG olarak dışa aktarırken bu sorunla karşılaştım.
Mikhail

10
Bu bir hayat kurtarıcıydı, sorunun ne olduğunu anlamaya çalışmak için saatler harcadı. Teşekkür ederim!!
mhodges

2
Aynı şekilde, bu benim sorunumu çözdü, aynı zamanda görüntünün neden görünmediğini anlamaya çalışmak için çok zaman harcadı.
MrEvers

3
SVG dosyasında bu kod satırına sahip değildim ve <svg> etiketine eklemek benim için hiçbir şey yapmadı.
Pete

2
Bu çok yukarıda olmalı. Günümü kurtardın.
Mattia Rasulo

42

Svg-etiketi xmlns ad alanı niteliğine ihtiyaç duyar:

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

Bu. Ve onu bir div'in arka plan görüntüsü olarak yüklemeliydim.
casey

1
Svg'nin hala ad alanına ihtiyacı var. Arka plan olarak kullandığınız SVG dosyasında tanımlandığından emin olun.
patlama

30

buraya geldim çünkü aynı problemi yaşadım, öğeyi incelediğimde dosyayı görebilirim, ancak sitede göremiyorum (localhost kullanırken bile)

sorunumun cevabı SVG dosyasını kaydetmekti. Illustrator'dan kaydettiyseniz, 'bağla'yı değil' yerleştir'i tıkladığınızdan emin olun. bağlantı veriyi içermek yerine sadece yerel dosyalarınıza başvuracaktır (eğer doğru anlarsam). görüntü açıklamasını buraya girin

Http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html'yi dışa aktarmak için başka yararlı ipuçları içeren adobe web sitesinde bunu okudum.

Bu benim için çalıştı, umarım faydalı olmuştur.


1
Photoshop'ta bunu akıllı bir nesneyle yapmanın bir yolu olup olmadığını bilen var mı? Illustrator'ı açmak ve bu seçenekle illustrator'da yeniden dışa aktarmak, diğer düzeltmelerde birçok denemeden sonra svgs'i chrome'da göstermeme izin veren tek şeydi.
Alex Podworny

2
Bu seçeneğin gerçek SVG kodu üzerindeki etkisi nedir?
Jānis Elmeris

19

Buraya geldim çünkü benzer bir problemim vardı, görüntü işlenmiyordu. Öğrendiğim şey, test sunucumun içerik türü başlığının doğru olmadığıydı. Htaccess dosyama aşağıdakileri ekleyerek düzelttim:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

1
Teşekkürler. Content-Type'ı image / svg + xml olarak ayarlamak sorunu çözdü.
samir105

Not image/svgindirmek için dosya, bu olması gerekiyor teklifleri +xml.
Jakub Vrána

10

<object>Bunun yerine kullanın (elbette her URL'yi kendi URL'nizle değiştirin):

.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

Genişlik niteliğini [svg] etiketine eklemek (svg kaynak XML'i düzenleyerek) benim için çalıştı: örneğin:

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

Bir test sayfası oluşturmak için örneğinizi kullanabildim ve gayet iyi çalıştı. Benim varsayımıma göre svg dosyanızda bir sorun var. Bunu da buraya yapıştırabilir misin? İşte kullandığım örnek.

 <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

bir Chrome hatasına benziyor, bu yüzden neredeyse delirdiğim için başka bir şey yaptım ... Ekranda gösterdiği svg nesnesinin css'ini değiştirirseniz Chrom hata ayıklayıcıyı kullanarak.

yaptığım şey şuydu: 1. ekran boyutunu kontrol et 2. SVG nesnemin "load" olayını dinle 3. öğe yüklendiğinde css'ini jQuery kullanarak değiştiriyorum 4. hile yaptı

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

Benzer bir sorun yaşadım ve buna mevcut cevaplar ya uygun değildi ya da işe yaradı, ancak bunları başka nedenlerle kullanamadık. Bu yüzden, Chrome'un SVG'lerimiz hakkında neyi beğenmediğini bulmalıydım.

Bizim durumumuzda , SVG dosyasındaki etiketin idözniteliğinin içinde Chrome'un beğenmediği symbolbir özellik olduğu ortaya çıktı :. Kaldırdığım anda :iyi çalıştı.

Kötü:

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

İyi:

<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

.svgresmin başlangıç ​​yüksekliği ve genişliği yoktur. Bu nedenle görünmez. Ayarlamalısın.

Satır içi veya css dosyasında yapabilirsiniz:

Çizgide:

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

Css dosyası:

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

2

Benim durumumda, svg'yi Photoshop kullanarak oluşturup kaydettiğimde bu sorun devam etti. Yardımcı olan şey, dosyayı Illustrator kullanarak açmak ve daha sonra svg'yi dışa aktarmaktı.


Gerçek SVG kodunda ne değişti? Ne Photoshop ne de Illustrator kullanıyorum, mevcut bir SVG dosyasını düzeltmem gerekiyor.
Jānis Elmeris

Bu durumda @Sharif cevabını deneyin!
Mattia Rasulo

1

Başlangıçta svg'mi Photoshop CC'den dışa aktardım ve manuel olarak eklemek zorunda kaldım

version="1.1"içine <svg>etiketi

Chrome'da gösterilmesini sağlamak için.


1

Sunucudan gelen HTTP başlığındaki içerik türü benim için problemdi. Bir node.js sunucum var, ekledim:

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

pageName, istenen şey için yerel değişkenimdir.

Tahminimce bu yaygın bir problem! Chrome'un güncel sürümünü kullanıyorum (Mart 2020).


0

Aynı sorunu yaşadım. Sunucu doğru yapılandırılmışsa ve .htacces yanıt değilse, katıştırdığınız svg kaynağına bakmak isteyebilirsiniz. Benimki metin editörü ile oluşturuldu, Chrome ve Safari'de html5 kodu içinde iyi işlendi, gömüldükten sonra hiçbir şey görünmüyordu. Svg koduna doğru sürüm, boyutlar vb. Eklendi ve bir cazibe gibi çalışıyor. Ayrıca, tüm stiller satır içi.

Yani

<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

DOCTYPEBeklendiği gibi çalıştığını ekledikten sonra Chrome ile de aynı sorunu yaşadım

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

Önce

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

Sonra

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

Bu iki kod parçacığı arasındaki fark nedir? Ben görmüyorum.
rgilligan

@rgilligan benim hatam, ilki doctype olmadan yapmalıydı
Madan Bhandari

0

Svg resimleriniz için geçiş css özelliğiniz olmadığına dikkat edin

Şimdi neden bilmiyorum, ancak Chrome'daki svg görüntüsü için "geçiş: her şey kolaylaşır 0.3s" yaparsanız görüntüler görünmez

Örneğin:

* {
   transition: all ease 0.3s
  }

Chrome, svg'yi oluşturmaz.

Herhangi bir geçiş css özelliğini kaldırın ve tekrar deneyin


0

Sorunlarda, önce svg görüntülerini okuyabilen bir programla görüntüleri açmayı deneyin.
Bu başarısız olursa, svg görüntüsü bir şekilde bozulur.

Bu davayı aldım ve svg yollarını yeni bir svg resmine kopyaladım ve svg etiketlerinin tüm ayrıntılarını ayarladım.

Oluşturulmama nedenini hiçbir zaman test etmedim, ancak bazı görünmez özel işaretlerin render-hatasına neden olduğunu varsayalım. Mac'te bazen düzenlenmiş dosyaları alıyorum Bu sorunu başka bağlamda zaten yaşadım.


0

IMG etiketi aracılığıyla eklenen bir SVG görüntüsüyle aynı sorunu yaşıyordum. Benim için Chrome'un doğrudan dosyanın üstünde boş bir satır olmasını sevmediği ortaya çıktı.

Boş satırı kaldırdım ve SVG'm hemen oluşturmaya başladı.


0

Görüntünün Stilini eklediğimden emin oluyorum . Benim için çalıştı

style= "width:320; height:240"


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

<object data="assets/twitter-wrap.svg" type="image/svg+xml"></object>
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.