Mám pre súbory SVG použiť , alebo ?

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
Edited question 10 september 2018 в 4:05
Programovanie
svg vector-graphics html
18 december 2010 в 3:50
51 zobrazenia
Riešenie

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 ``, potom získate raster fallback zadarmo*:

*) 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 `` so spätnými skriptmi na verziu png (pre starší IE a android
Erik Dahlström
Edited answer 5 február 2015 в 8:04
Komentáre (24)

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

https://caniuse.com/svg-img

Volker E.
Edited answer 16 marec 2018 в 3:21
Komentáre (4)

a 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

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.setAttribute("fill", "green");
});
Komentáre (5)