SVG in HTML-pagina

SVG-bestanden kunnen worden ingebed in een HTML-document met de volgende tags: <embed>, <object> of <iframe>.

SVG in HTML-pagina

Hieronder ziet u drie verschillende methoden om SVG-bestanden in een HTML-pagina in te bouwen.

Gebruik van de <embed> tag

De <embed> tag wordt ondersteund door alle gangbare browsers en staat het gebruik van scripts toe.

Opmerking:Het gebruik van de <embed> tag om SVG in een HTML-pagina in te bouwen is de aanbevolen methode door Adobe SVG Viewer! Echter, als u legitieme XHTML moet maken, kan de <embed> tag niet worden gebruikt. Er is geen <embed> tag in enige HTML-specificatie.

Syntax:

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

Opmerking:De pluginspage-eigenschap wijst de URL van de downloadpagina van de plugin aan.

Gebruik van de <object> tag

De <object> tag is een standaard HTML 4 tag die wordt ondersteund door alle nieuwere browsers. Zijn nadeel is dat het het gebruik van scripts niet toestaat.

Opmerking:Als u de nieuwste versie van Adobe SVG Viewer hebt geïnstalleerd, werkt de SVG-bestand niet wanneer u de <object> tag gebruikt (tenminste niet in IE)!

Syntax:

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

Opmerking:De codebase-eigenschap wijst de URL voor het downloaden van de plug-in aan.

Gebruik van het <iframe>-tag

Het <iframe>-tag werkt in de meeste browsers.

Syntax:

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

Ik verwacht...

Als het mogelijk zou zijn om SVG-elementen eenvoudig door de naamruimte van SVG te refereren toe te voegen aan HTML-code, dat zou geweldig zijn, zoals dit:

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>Dit is een HTML-afsnit</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>