SVG dosyaları için <img>, <object> veya <embed> kullanabilir miyim?

603

Ben kullanmalı mıyım <img>, <object>ya da <embed>yüklerken bir benzer bir şekilde bir sayfa içine yükleme SVG dosyaları için jpg, gifya png?

Mümkün olduğu kadar iyi çalışmasını sağlamak için her birinin kodu nedir? (Mime türünü dahil etmeye veya araştırmamda yedek SVG oluşturucularına işaret etmeye ve iyi bir teknoloji referansı görmemeye ilişkin referanslar görüyorum).

Modernizr ile SVG desteğini kontrol ettiğimi ve <img>SVG özelliği olmayan tarayıcılar için geri çekildiğini (muhtemelen düz bir etiketle değiştirme yapıyorum) varsayalım .

html  svg  vector-graphics 
— artlung
kaynak
3
— Machado
2
Teorik olarak, <svg>diğer SVG'lere başvurmak istediğiniz bir de olabilir . Bu, örneğin kullanılarak elde edilebilir <image>.
— phk

Yanıtlar:

635

Bu konuyu kapsayan SVG Primer'i (W3C tarafından yayınlanan) önerebilirim: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

Eğer kullanırsanız <object>o zaman serbest * için tarama yedek alıyorum:

<object data="your.svg" type="image/svg+xml">
  <img src="yourfallback.jpg" />
</object>

*) Pekala, tamamen ücretsiz değil, çünkü bazı tarayıcılar her iki kaynağı da indiriyor, bunun üstesinden gelmek için Larry'nin aşağıdaki önerisine bakın.

2014 güncellemesi:

  • Etkileşimli olmayan bir svg istiyorsanız, <img>png sürümüne komut dosyası yedekleriyle kullanın (eski IE ve android <3 için). Bunu yapmanın temiz ve basit bir yolu:

    <img src="your.svg" onerror="this.src='your.png'">.

    Bu bir GIF görüntüsü gibi davranacaktır ve tarayıcınız bildirimsel animasyonları (SMIL) destekliyorsa, bunlar oynatılacaktır.

  • Etkileşimli bir svg istiyorsanız, ya <iframe>da tuşlarını kullanın <object>.

  • Eski tarayıcılara bir svg eklentisi kullanma olanağı sağlamanız gerekiyorsa, kullanın <embed>.

  • Css background-imageve benzeri özelliklerde svg için , modernizr yedek görüntülere geçmek için bir seçimdir, diğeri otomatik olarak yapmak için birden fazla arka plana bağlıdır:

    div {
    background-image: url(fallback.png);
    background-image: url(your.svg), none;
}

    Not : Birden fazla arka plan stratejisi Android 2.3'te çalışmaz, çünkü birden fazla arka planı destekler ancak svg'yi desteklemez.

Ek iyi bir okuma svg yedekleri üzerinde bu blog yazısı .

— Erik Dahlström
kaynak
7
Boyut belirlemenin doğru yolu nedir? Yükseklik ve genişlik özelliklerini ekler miyim yoksa CSS mi kullanırım?
— artlung
5
Css kullanmak iyidir veya gömme öğesinde boyutu ayarlamaktır (yani: iframe, embed, object, img) - ikincisinin yaptığı, boyutu tanımlayan stil sayfasından önce stilsiz içeriğin önüne geçebilir yüklendi. Ayrıca, svg'nin bir viewBox özniteliğine sahip olduğundan emin olun ve svg kök öğesinden width / height niteliklerini kaldırın. Bu size deneyimimdeki en iyi crossbrowser davranışını verecektir.
— Erik Dahlström
8
Bu yöntem her zaman tarama dosyasını indirir. Bu yanıt , yedeklemenin yalnızca eski IE tarayıcılarında istenmesini sağlar.
— Larry
3
Yukarıdakilerin Adobe SVG Eklentisi ile çalışmadığını unutmayın. Ancak, etiketin <param name="src" value="your.svg" />içine eklerseniz her şeyi (modern tarayıcılar + ASV + MSIE) çalıştırabilirsiniz <object>. Bunların nasıl yapılacağını anlamaya çalışmak için çok uzun zaman geçirdim ve sanırım sonunda anladım.
— Christopher Schultz
5
İnsanların eski tarayıcıları desteklemeyi ne kadar hızlı durdurduklarını düşünürsek, tarayıcılarını güncel tutan bir topluluğumuz o kadar hızlı olur, bu da 2012'den itibaren bir tarayıcı ile otomatik olarak geçer. örneğin Windows XP'yi hala destekler (muhtemelen sürüm 52). HER ZAMAN modern ve özgür bir alternatif var.
— Neonit
116

IE9 ve üzeri sürümlerden SVG'yi sıradan bir IMG etiketinde kullanabilirsiniz.

https://caniuse.com/svg-img

<img src="/static/image.svg">
— Christian Landgren
kaynak
35
SVG'nin yüklenmesi için başka kaynaklar gerekiyorsa bu çalışmaz. (Yazı tipleri, resimler, ...)
— TheHippo
10
Bir logo veya simge için yine de anlamsal nedenlerden dolayı bir IMG etiketi kullanmanızı ve SVG'nin sadece bir vektör çizim olduğundan emin olun.
— Christian Landgren
4
Şimdi her yerde kabul edildi. @artlung, buna cevabınızı değiştirmek isteyebilirsiniz.
— SteeveDroz
15
Kullanan herkes <img/> etiketini ekleyerek hakkında bilmek isteyebilir SVG Fragement tanımlayıcıları "örneğin <img src="myimage.svg#svgView(preserveAspectRatio(none))" />sen, en boy oranı tamamlayan bir özelliktir," viewBoxvb satır içi SVG tanımlarıyla aynı. Ölçeklendirme hakkında daha fazla okuma - css-tricks.com/scale-svg
— brichins
101

<object> ve <embed> ilginç bir özelliği vardır: bunlar (hesaba aynı kaynak politikası alarak) mümkün dış belgeden SVG belgesi başvurusu elde etmek olun. Referans daha sonra SVG'yi canlandırmak, stil sayfalarını değiştirmek vb. İçin kullanılabilir.

verilmiş

<object id="svg1" data="/static/image.svg" type="image/svg+xml"></object>

Sonra böyle şeyler yapabilirsiniz

document.getElementById("svg1").addEventListener("load", function() {
    var doc = this.getSVGDocument();
    var rect = doc.querySelector("rect"); // suppose our image contains a <rect>
    rect.setAttribute("fill", "green");
});
— WGH
kaynak
Bir <object> öğesinden bir "load" olayı alacağınızı sanmıyorum. Desteklenmiyor.
— Steve O'Connor
5
@ SteveO'Connor Bilmiyorum, belki de iyi belgelendirilmemiş, ancak kesinlikle Firefox, IE11 ve Chrome'da çalışıyor. En azından harici SVG dosyalarıyla: Veri URI'leriyle çalışmasını sağlayamadım.
— WGH
Harika çalışıyor! İlginç bir şekilde, iki SVG dosyanız olduğunda 'id' alanını eklemek gerekiyor gibi görünüyor, aksi takdirde opera tarayıcımda sadece 1 tane görünecek mi?
— Bram
Hem inline hem de bu yöntemle referans alın.
— Mart'ta Brandito
SVG satıriçi olmadıkça bir SVG içindeki köprülerin çalışmayacağının farkında olmak iyidir .
— Mentalist
26

En iyi seçenek SVG Images'i farklı cihazlarda kullanmaktır :)

<img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'">
— Roberth Solís
kaynak
3
ilginç. ama onerrorsvg işlenmezse yangınların olduğundan emin misiniz ? hangi tarayıcıları test ettiniz?
— artlung
1
Evet, mobil bir Android işletim sisteminde test
— ediyorum
24

kullanım srcset

Günümüzde çoğu tarayıcı srcsetözelliği destekliyor , farklı kullanıcılara farklı resimler belirtmeye izin veren . Örneğin, 1x ve 2x piksel yoğunluğu için kullanabilirsiniz ve tarayıcı doğru dosyayı seçecektir.

Bu durumda, içinde bir SVG belirtirseniz srcsetve tarayıcı bunu desteklemiyorsa src,.

<img src="logo.png" srcset="logo.svg" alt="My logo">

Bu yöntemin diğer çözümlere göre çeşitli faydaları vardır:

  1. Herhangi bir garip saldırıya veya komut dosyasına dayanmıyor
  2. Basit
  3. Yine de alternatif metin ekleyebilirsiniz
  4. Destekleyen tarayıcılar, srcsetyalnızca ihtiyaç duyduğu dosyayı indirebilmesi için nasıl ele alınacağını bilmelidir.
— Scribblemacher
kaynak
5
Bugünlerde herhangi bir tarayıcının SVG'yi destekleme şansı>% 99'dan fazla olduğunda neden rahatsız edesiniz ki?
— Robert Longson
5
HERKESİN sayfayı doğru bir şekilde görebilmesini sağlamanın bir parçası olarak Google sizi daha çok sevecektir!
— Hoots
2
Şu andaki noktada kullanıcıların geri çekilme görüntüsünü ~% 10'a ittiğiniz göz önüne alındığında, bundan daha iyi görünüyor.
— Volker
2
@VolkerE. % 10? caniuse % 2 civarında SVG desteği olmadığını göstermektedir . Hala% 2'yi desteklemesine rağmen cevaptaki gibi srcset kullanıyorum. Gelecekte, tarayıcıların srcset gibi bilgileri alıp yalnızca cihaz boyutu veya dosya formatı desteği değil, performans ve boyut gibi faktörlere göre uygun resmi seçebileceğini umuyorum.
— Scribblemacher
3
Bu çözümle ilgili tek sorun, tarayıcıların SVG'yi desteklemesi ancak srcset'i desteklememesidir. SVG'yi desteklese de varsayılan olarak PNG'ye geri dönen IE11 gibi
— Hego555 24:18
16

SVG'lerinizin CSS ile tamamen şekillendirilebilmesi için DOM'da satır içi olmaları gerekir. Bu, bir HTML öğesini (genellikle bir <img>öğe) sayfa yüklendikten sonra bir SVG dosyasının içeriğiyle değiştirmek için Javascript kullanan SVG enjeksiyonuyla gerçekleştirilebilir .

İşte SVGInject kullanarak minimal bir örnek :

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>

Görüntü yüklendikten sonra onload="SVGInject(this)enjeksiyonu tetikleyecek ve <img>eleman, içinde verilen dosyanın içeriği ile değiştirilecektir.src öznitelikte . Bu, SVG'yi destekleyen tüm tarayıcılarla çalışır.

Feragatname: SVGInject'in ortak yazarıyım

— Waruyama
kaynak
15

Şahsen bir <svg>etiket kullanırdım çünkü eğer yaparsanız üzerinde tam kontrolünüz var . İçinde kullanırsanız <img>SVG'nin iç kısımlarını CSS vb. İle kontrol edemezsiniz.

başka bir şey tarayıcı desteği .

svgDosyanızı açın ve doğrudan şablona yapıştırın.

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3400 2700" preserveAspectRatio="xMidYMid meet" (click)="goHome();">
  <g id="layer101">
    <path d="M1410 2283 c-162 -225 -328 -455 -370 -513 -422 -579 -473 -654 -486 -715 -7 -33 -50 -247 -94 -475 -44 -228 -88 -448 -96 -488 -9 -40 -14 -75 -11 -78 2 -3 87 85 188 196 165 180 189 202 231 215 25 7 129 34 230 60 100 26 184 48 185 49 4 4 43 197 43 212 0 10 -7 13 -22 9 -13 -3 -106 -25 -208 -49 -102 -25 -201 -47 -221 -51 l-37 -7 8 42 c4 23 12 45 16 49 5 4 114 32 243 62 129 30 240 59 246 66 10 10 30 132 22 139 -1 2 -110 -24 -241 -57 -131 -33 -240 -58 -242 -56 -6 6 13 98 22 107 5 4 135 40 289 80 239 61 284 75 307 98 14 15 83 90 153 167 70 77 132 140 139 140 7 0 70 -63 141 -140 70 -77 137 -150 150 -163 17 -19 81 -39 310 -97 159 -41 292 -78 296 -82 8 -9 29 -106 24 -111 -1 -2 -112 24 -245 58 -134 33 -245 58 -248 56 -6 -7 16 -128 25 -136 5 -4 112 -30 238 -59 127 -29 237 -54 246 -57 11 -3 20 -23 27 -57 6 -28 9 -53 8 -54 -1 -1 -38 7 -81 17 -274 66 -379 90 -395 90 -16 0 -16 -6 3 -102 11 -57 21 -104 22 -106 1 -1 96 -27 211 -57 115 -31 220 -60 234 -66 14 -6 104 -101 200 -211 95 -111 175 -197 177 -192 1 5 -40 249 -91 542 l-94 532 -145 203 c-220 309 -446 627 -732 1030 -143 201 -265 366 -271 367 -6 0 -143 -183 -304 -407z m10 -819 l-91 -161 -209 -52 c-115 -29 -214 -51 -219 -49 -6 1 32 55 84 118 l95 115 213 101 c116 55 213 98 215 94 1 -3 -38 -78 -88 -166z m691 77 l214 -99 102 -123 c56 -68 100 -125 99 -127 -4 -3 -435 106 -447 114 -4 2 -37 59 -74 126 -38 68 -79 142 -93 166 -13 23 -22 42 -20 42 2 0 101 -44 219 -99z"/>
    <path d="M1126 2474 c-198 -79 -361 -146 -363 -147 -2 -3 -70 -410 -133 -805 -12 -73 -20 -137 -18 -143 2 -6 26 23 54 63 27 40 224 320 437 622 213 302 386 550 385 551 -2 2 -165 -62 -362 -141z"/>
    <path d="M1982 2549 c25 -35 159 -230 298 -434 139 -203 283 -413 319 -465 37 -52 93 -134 125 -182 59 -87 83 -109 73 -65 -5 20 -50 263 -138 747 -17 91 -36 170 -42 176 -9 8 -571 246 -661 280 -14 6 -7 -10 26 -57z"/>
    <path d="M1679 1291 c-8 -11 -71 -80 -141 -153 l-127 -134 -95 -439 c-52 -242 -92 -442 -90 -445 6 -5 38 28 218 223 l99 107 154 0 c85 0 163 -4 173 -10 10 -5 78 -79 151 -162 73 -84 136 -157 140 -162 18 -21 18 4 -2 85 -11 46 -58 248 -105 448 l-84 364 -87 96 c-108 121 -183 201 -187 201 -2 0 -10 -9 -17 -19z m96 -488 c33 -102 59 -189 57 -192 -2 -6 -244 -2 -251 4 -5 6 120 375 127 375 4 0 34 -84 67 -187z"/>
    </g>
  </svg>

o zaman css'nizde örneğin:

svg {
  fill: red;
}

Bazı kaynaklar: SVG ipuçları

— LazerBanana
kaynak
15

Eğer kullanırsanız <img> etiketleri, ardından tabanlı tarayıcılar WebKit gösterilmeyecektir eşlemli görüntüleri gömülü .

SVG satır içi teklifleri de dahil olmak üzere her türlü gelişmiş SVG kullanımı için en esnekliği sunar.

Internet Explorer ve Edge SVG'yi doğru şekilde yeniden boyutlandırır , ancak hem yüksekliği hem de genişliği belirtmeniz gerekir.

Ekleyebilir vb onmouseover, onclick SVG herhangi şekle, svg içi: onmouseover = "top.myfunction (evt);"

SVG'deki web yazı tiplerini normal stil sayfanıza ekleyerek de kullanabilirsiniz .

Not: SVG'leri Illustrator'dan dışa aktarıyorsanız, web yazı tipi adları yanlış olur. Bunu CSS'nizde düzeltebilir ve SVG'de karışıklıktan kaçınabilirsiniz. Örneğin, Illustrator, Arial'a yanlış ad verir ve bunu şu şekilde düzeltebilirsiniz:

@font-face {    
    font-family: 'ArialMT';    
    src:    
        local('Arial'),    
        local('Arial MT'),    
        local('Arial Regular');    
    font-weight: normal;    
    font-style: normal;    
}

Tüm bunlar 2013'ten beri yayınlanan herhangi bir tarayıcıda çalışır .

Örnek için bkz. Ozake.com . Tüm site, iletişim formu dışında SVG'lerden yapılmıştır.

Uyarı: Web yazı tipleri Safari'de kesin olarak yeniden boyutlandırılmıştır - düz metinden kalın veya italik olarak çok sayıda geçişiniz varsa, geçiş noktalarında az miktarda fazladan veya eksik alan olabilir. Daha fazla bilgi için bu sorudaki cevabıma bakın .

— Andrew Swift
kaynak
Teşekkür ederim. Raster görüntülerin neden etiketimde görünmediğini anlamaya çalışmak için saçımı çekerek 3 saat geçirdim img... Bunun resmi olarak herhangi bir yerde belgelenip belgelenmediğini biliyor musunuz?
— ryebread
@Andrew Swift, dev.ozake.com üzerinde gerçekten güzel görsel sonuçlar elde edersiniz , ancak ciddi erişilebilirlik sorunları vardır: arama motorları muhtemelen siteyi dizine eklemekte zorlanacaklardır (SVG etkinlikleri içinde gizli bağlantıları alacaklarından emin değilim) ; site klavye ile gezinilemez; ekran okuyucuları boğacak gibi görünüyor ...
— interDist
11

İki sentim: 2019 itibariyle, kullanılan tarayıcıların% 93'ü (ve her birinin son iki sürümünün% 100'ü) <img>öğelerde SVG'yi işleyebilir :

resim açıklamasını buraya girin

Kaynak: Kullanabilir miyim

Bu yüzden olabilir kullanmak için hiçbir neden yok olduğunu söylemek <object>artık.

Ancak hala artıları var :

  • İnceleme yaparken (örn. Chrome Dev Araçları ile), biraz kurcalamak ve canlı değişiklikleri görmek istemeniz durumunda tüm SVG işaretlemesiyle karşılaşırsınız.

  • Tarayıcınızın SVG'leri desteklememesi durumunda (sağlam, ancak her biri destekliyorsa) çok sağlam bir geri dönüş uygulaması sağlar ve bu da SVG bulunmazsa çalışır. Bu, betamax veya HD-DVD gibi XHTML2 spesifikasyonunun önemli bir özelliğiydi

Ancak eksileri de vardır :

— ffflabs
kaynak
3

Saf CSS ile ve çift görüntü indirmeden tek bir çözüm bulundu. İstediğim kadar güzel değil ama işe yarıyor.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <style type="text/css">
     .nicolas_cage {
         background: url('nicolas_cage.jpg');
         width: 20px;
         height: 15px;
     }
     .fallback {
     }
    </style>
  </head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
    <style>
    <![CDATA[ 
        .fallback { background: none; background-image: none; display: none; }
    ]]>
    </style>
</svg>

<!-- inline svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
  <switch>
     <circle cx="20" cy="20" r="18" stroke="grey" stroke-width="2" fill="#99FF66" />
     <foreignObject>
         <div class="nicolas_cage fallback"></div>
     </foreignObject>
  </switch>
</svg>
<hr/>
<!-- external svg -->
    <object type="image/svg+xml" data="circle_orange.svg">
        <div class="nicolas_cage fallback"></div>
    </object>
</body>
</html>

Fikir, geri dönüş stiliyle özel SVG eklemektir.

Blogumda daha fazla ayrıntı ve test süreci bulabilirsiniz .

— Artru
kaynak
0

Bu jQuery işlevi svg görüntülerdeki tüm hataları yakalar ve dosya uzantısını alternatif bir uzantıyla değiştirir

Görüntü svg yüklenirken hata görmek için lütfen konsolu açın

(function($){
  $('img').on('error', function(){
    var image = $(this).attr('src');
    if ( /(\.svg)$/i.test( image )) {
      $(this).attr('src', image.replace('.svg', '.png'));
    }
  })  
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="https://jsfiddle.net/img/logo.svg">
Snippet'i genişlet

— Andres Separ
kaynak
-1

Şunların kombinasyonunu kullanmanızı öneririm:

<svg viewBox="" width="" height="">
<path fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
</svg>
— Grv97
kaynak
bu ayarları neden kullanacağınız ve diğer yanıtlardan neden farklı olduğu hakkında ayrıntılı bilgi verebilir misiniz?
— kvantour
-1

Kullanarak dolaylı olarak bir SVG ekleyebilirsiniz <img>HTML etiketini ve bu, StackOverflow'da aşağıda açıklananları izleyerek mümkündür:

Bilgisayarımda SVG dosyası var

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="350" viewBox="0 0 350 350">

  <title>SVG 3 Circles Intersection </title>

    <circle cx="110" cy="110" r="100"
            stroke="red"
            stroke-width="3"
            fill="none"
            />
    <text x="110" y="110" 
          text-anchor="middle"
          stroke="red"
          stroke-width="1px"
          > Label
    </text>
    <circle cx="240" cy="110" r="100" 
            stroke="blue" 
            stroke-width="3"
            fill="none"
            />
    <text x="240" y="110" 
          text-anchor="middle" 
          stroke="blue" 
          stroke-width="1px"
          > Ticket
    </text>
    <circle cx="170" cy="240" r="100" 
            stroke="green" 
            stroke-width="3" 
            fill="none"
            />
    <text x="170" y="240" 
          text-anchor="middle" 
          stroke="green" 
          stroke-width="1px"
          > Vecto
    </text>
</svg>

Bu resmi https://svgur.com adresine yükledim

Yükleme sona erdikten sonra şu URL'yi aldım: 

https://svgshare.com/i/H7d.svg

Sonra html etiketi aşağıdaki MANUALLY (IMAGE simge kullanmadan) ekledim

<img src="https://svgshare.com/i/Kyp.svg"/>

ve sonuç hemen altında

Şüphe duyan kullanıcılar için, SVG resmi ekleyerek StackOverflow'un cevabını takiben düzenlemede ne yaptığımı görmek mümkün

HATIRLATMA-1: SVG dosyasında <?xml?>eleman bulunmalıdır . Başlangıçta, doğrudan <svg>etiketle başlayan bir SVG dosyası oluşturdum ve hiçbir şey işe yaramadı!

HATIRLATMA-2: başlangıçta, IMAGEsimgesini kullanarak bir resim eklemeye çalıştım Edit Toolbar. SVG dosyamın URL'sini yapıştırıyorum ancak StackOverflow bu yöntemi kabul etmiyor. <img>Etiket, manuel eklenmesi gerekir.

Umarım bu cevap diğer kullanıcılara yardımcı olabilir.

— schlebe
kaynak
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.