SVG en HTML
archivos SVG se pueden incrustar en documentos HTML a través de las siguientes etiquetas: <embed>, <object> o <iframe>.
código SVG se puede integrar directamente en la página HTML, o se puede enlazar directamente con el archivo SVG.
El uso de la etiqueta <embed>
<Insertar>:
- Ventajas: Todos los principales navegadores son compatibles, y permite scripting
- Contras: No se recomienda para su uso en HTML 4 y XHTML (pero permitidos en HTML 5)
sintaxis:
<embed src="circle1.svg" type="image/svg+xml" />
resultados:
El uso de la etiqueta <object>
<Objeto>:
- Ventajas: Todos los principales navegadores son compatibles, y soporte para HTML 4, XHTML y estándar HTML5
- Desventajas: no permite el uso de scripts.
sintaxis:
<object data="circle1.svg"
type="image/svg+xml"></object>
resultados:
Utilice la etiqueta <iframe>
<Iframe>:
- Ventajas: Todos los principales navegadores son compatibles, y permite scripting
- Contras: No se recomienda para su uso en HTML 4 y XHTML (pero permitidos en HTML 5)
sintaxis:
<iframe src="circle1.svg"></iframe>
resultados:
SVG incrustado directamente en código HTML
Firefox, Internet Explorer9, Google Chrome y Safari, puede incrustar código SVG directamente en HTML.
Nota: SVG se puede integrar directamente en Opera.
Ejemplos
<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>
Trate »
Enlace a archivos SVG
También puede vincular a una etiqueta con <a> en formato vectorial: Enlace a archivos SVG
También puede vincular a una etiqueta con archivos SVG <a>:
<a href="circle1.svg">View SVG file</a>
resultados:
Ver Imagen SVG