SVG i HTML-sider

SVG-filer kan indlejres i HTML-dokumenter med følgende tags: <embed>, <object> eller <iframe>.

SVG i HTML-sider

Her vil du se tre forskellige måder at indlejre SVG-filer i HTML-sider på.

Brug af <embed>-tagget

<embed>-tagget understøttes af alle mainstream-browsere og tillader brug af scripter.

Bemærkninger:Det anbefales af Adobe SVG Viewer at bruge <embed>-tagget til at indlejre SVG i HTML-sider! Men hvis du skal oprette lovlig XHTML, kan du ikke bruge <embed>. Der er ingen <embed>-tag i nogen HTML-standard.

Syntaks:

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

Bemærkninger:pluginspage-ejenskaben peger på URL'en til download af plugin.

Brug af <object>-tagget

<object>-tagget er et standardtag i HTML 4 og understøttes af alle nyere browsere. Dets ulempe er, at det ikke tillader brug af scripter.

Bemærkninger:Hvis du har installeret den nyeste version af Adobe SVG Viewer, vil SVG-filer ikke fungere, når du bruger <object>-tagget (mindst ikke i IE)!

Syntaks:

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

Bemærkninger:codebase-egenskaben peger på URL'en til download af plugin.

Brug af <iframe>-tagget

<iframe>-tagget virker på de fleste browsere.

Syntaks:

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

Jeg forventer...

Det ville være fantastisk, hvis man kunne tilføje SVG-elementer til HTML-koden ved blot at referere til SVG-namespace, sådan her:

<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>