SVG w stronie HTML

Plik SVG można wstawić do dokumentu HTML za pomocą etykiet: <embed>, <object> lub <iframe>.

SVG w stronie HTML

Poniżej zobaczysz trzy różne metody wstawiania plików SVG do strony HTML.

Użycie etykiety <embed>

Etykieta <embed> jest wspierana przez wszystkie główne przeglądarki i pozwala na użycie skryptów.

Uwaga:Użycie etykiety <embed> do wstawiania SVG w stronę HTML jest zalecanym sposobem przez Adobe SVG Viewer! Jednakże, jeśli chcesz stworzyć poprawny XHTML, nie możesz używać etykiety <embed>. Etykieta <embed> nie jest zdefiniowana w żadnej specyfikacji HTML.

Gramatyka:

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

Uwaga:Atrybut pluginspage wskazuje URL do pobrania wtyczki.

Użycie etykiety <object>

Etykieta <object> jest standardem HTML 4, wspierana przez wszystkie nowsze przeglądarki. Jej wadą jest to, że nie pozwala na użycie skryptów.

Uwaga:Jeśli zainstalowałeś najnowszą wersję Adobe SVG Viewer, to plik SVG nie działa poprawnie przy użyciu etykiety <object> (co najmniej nie w przeglądarce IE)!

Gramatyka:

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

Uwaga:Atrybut codebase wskazuje URL do pobrania wtyczki.

Użycie tagu <iframe>

Tag <iframe> działa w większości przeglądarek.

Gramatyka:

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

Mam nadzieję...

Byłoby świetnie, gdyby można było dodać elementy SVG między HTML, poprzez odniesienie się do przestrzeni nazw SVG, tak jak tutaj:

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