SVG i HTML-sidan

SVG-filer kan embeddas i HTML-dokument med följande taggar: <embed>, <object> eller <iframe>.

SVG i HTML-sidan

Nedan kommer du att se tre olika sätt att embedda SVG-filer i en HTML-sida.

Använd <embed>-taggen

<embed>-taggen stöds av alla populära webbläsare och tillåter användning av skript.

Kommentar:När du embeddar SVG i en HTML-sida används <embed>-taggen som rekommenderas av Adobe SVG Viewer! Men om du behöver skapa en giltig XHTML kan du inte använda <embed>. Det finns inget <embed>-tag i någon HTML-standard.

Syntax:

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

Kommentar:pluginspage-attribut pekar på URL:en för att ladda ner tillägget.

Använd <object>-taggen

<object>-taggen är ett standardtag i HTML 4 och stöds av alla nyare webbläsare. Dess nackdel är att det inte är möjligt att använda skript.

Kommentar:Om du har installerat den senaste versionen av Adobe SVG Viewer, fungerar SVG-filer inte när du använder <object>-taggen (minst inte i IE)!

Syntax:

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

Kommentar:egenskapen codebase pekar på URL:en för nedladdning av plugin.

Använd taggen <iframe>

Taggen <iframe> fungerar på de flesta webbläsare.

Syntax:

<iframe src="rect.svg" width="300" height="100">
</iframe>

Jag förväntar mig...

Om det bara var möjligt att lägga till SVG-element mellan HTML-element genom att hänvisa till SVG:s namnrymd, skulle det vara fantastiskt, och det skulle se ut så här:

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>This is an HTML paragraph</p>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>