SVG em página HTML

Os arquivos SVG podem ser embedidos no documento HTML usando as tags <embed>, <object> ou <iframe>.

SVG em página HTML

A seguir, você verá três métodos diferentes para embedding arquivos SVG em páginas HTML.

Ao usar a tag <embed>

A tag <embed> é suportada por todos os navegadores populares e permite o uso de scripts.

Notas:Ao embedding SVG em uma página HTML, a tag <embed> é o método recomendado pelo Adobe SVG Viewer! No entanto, se precisar criar XHTML válido, não pode usar <embed>. A tag <embed> não existe em nenhum padrão HTML.

Sintaxe:

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

Notas:A propriedade pluginspage aponta para a URL de download do plugin.

Ao usar a tag <object>

A tag <object> é um padrão do HTML 4, suportado por todos os navegadores mais novos. Sua desvantagem é que não permite o uso de scripts.

Notas:Se você instalou a versão mais recente do Adobe SVG Viewer, ao usar a tag <object>, os arquivos SVG não funcionarão (pelo menos não no IE)!

Sintaxe:

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

Notas:A propriedade codebase aponta para a URL de download do plugin.

Uso do tag <iframe>

O tag <iframe> funciona em quase todos os navegadores.

Sintaxe:

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

Eu espero...

Se pudéssemos adicionar elementos SVG entre si apenas por referência ao namespace do SVG, seria ótimo, assim:

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>Este é um parágrafo HTML</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>