kzen.dev
Viac na
Question

Mám pre súbory SVG použiť <img>, <object> alebo <embed>?

Mám na načítanie súborov SVG do stránky použiť <img>, <object> alebo <embed> podobne ako pri načítaní súborov jpg, gif alebo png?

Aký je kód pre každý z nich, aby sa zabezpečilo čo najlepšie fungovanie? (pri svojom výskume vidím odkazy na zahrnutie mimetypu alebo poukázanie na náhradné vykresľovače SVG a nevidím dobrý odkaz na súčasný stav).

Predpokladám, že kontrolujem podporu SVG pomocou Modernizr a v prípade prehliadačov, ktoré nepodporujú SVG, sa vraciam späť (pravdepodobne vykonám nahradenie obyčajným tagom <img>)do pôvodného stavu.

artlung
artlung
Edited question 10 september 2018 в 4:05
Programovanie
svg
vector-graphics
html
This question has 1 odpoveď in English, to read them log in to your account.
Solution / Answer

Môžem odporučiť SVG Primer (vydaný W3C), ktorý sa zaoberá touto témou: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

Ak použijete <object>, potom získate raster fallback zadarmo*:

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

*) No, nie celkom zadarmo, pretože niektoré prehliadače sťahujú oba zdroje, pozri Larryho návrh nižšie, ako to obísť.

Aktualizácia z roku 2014:

  • Ak chcete neinteraktívny svg, použite <img> so spätnými skriptmi na verziu png (pre starší IE a android <3). Jeden čistý a jednoduchý spôsob, ako to urobiť:

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

Bude sa to správať podobne ako obrázok GIF, a ak váš prehliadač podporuje deklaratívne animácie (SMIL), budú sa prehrávať.

  • Ak chcete interaktívny svg, použite buď <iframe> alebo <object>.

  • Ak potrebujete poskytnúť starším prehliadačom možnosť používať zásuvný modul svg, potom použite <embed>.

  • Pre svg v css background-image a podobných vlastnostiach je modernizr jednou z možností prepínania na záložné obrázky, druhou je závislosť od viacerých pozadí, ktoré to robia automaticky:

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

    Poznámka: stratégia viacerých pozadí nefunguje v systéme Android 2.3, pretože podporuje viacero pozadí, ale nie svg.

Ďalším dobrým čítaním je tento blogpost o svg fallbackoch.

Erik Dahlstr&#246;m
Erik Dahlström
Edited answer 5 február 2015 в 8:04
597
Artificial intelligence to parse product page
productapi.dev

Od IE9 a vyššie môžete použiť SVG v obyčajnej značke IMG.

https://caniuse.com/svg-img

<img src="/static/image.svg">
Volker E.
Volker E.
Edited answer 16 marec 2018 в 3:21
104
Artificial intelligence to parse product page
productapi.dev

<object> a <embed> majú zaujímavú vlastnosť: umožňujú získať odkaz na SVG dokument z vonkajšieho dokumentu (pri zohľadnení politiky rovnakého pôvodu). Tento odkaz sa potom môže použiť na animáciu SVG, zmenu jeho súborov štýlov atď.

Vzhľadom na adresu

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

Potom môžete robiť veci ako

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");
});
94