SVG em HTML
arquivos SVG podem ser incorporados em documentos HTML com as seguintes marcas: <embed>, <object> ou <iframe>.
código SVG pode ser incorporado diretamente na página HTML, ou você pode ligar diretamente para o arquivo SVG.
Usando a tag <embed>
<Embed>:
- Vantagens: Todos os principais navegadores suportados, e permite scripting
- Contras: Não recomendado para uso em HTML4 e XHTML (mas permitidos em HTML5)
sintaxe:
<embed src="circle1.svg" type="image/svg+xml" />
resultados:
Usando a tag <object>
<Object>:
- Vantagens: Todos os principais navegadores são suportados e suporte para HTML4, XHTML e padrão HTML5
- Desvantagens: não permite o uso de scripts.
sintaxe:
<object data="circle1.svg"
type="image/svg+xml"></object>
resultados:
Use tag <iframe>
<Iframe>:
- Vantagens: Todos os principais navegadores suportados, e permite scripting
- Contras: Não recomendado para uso em HTML4 e XHTML (mas permitidos em HTML5)
sintaxe:
<iframe src="circle1.svg"></iframe>
resultados:
SVG embutido diretamente no código HTML
Firefox, Internet Explorer9, Google Chrome e Safari, você pode inserir o código SVG diretamente no HTML.
Nota: SVG pode ser incorporado diretamente no Opera.
Exemplos
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
tente »
Link para arquivos SVG
Você também pode conectar-se a uma etiqueta com <a> arquivos SVG: Link para arquivos SVG
Você também pode conectar-se a uma etiqueta com arquivos SVG <a>:
<a href="circle1.svg">View SVG file</a>
resultados:
Ver arquivo SVG