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.
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:
<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.
Od IE9 a vyššie môžete použiť SVG v obyčajnej značke IMG.
<img src="/static/image.svg">
<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");
});