Los gráficos vectoriales SVG o escalables le permiten dibujar imágenes mucho más complejas y renderizarlas en páginas web. Pero no puedes simplemente tomar las etiquetas SVG y pegarlas en tu HTML. No aparecerán y tu página no será válida. En su lugar, tienes que usar uno de los tres métodos.
Utilice la etiqueta de objeto para incrustar SVG
La etiqueta HTML incrustará un gráfico SVG en su página web. Usted escribe la etiqueta de objeto con un atributo de datos para definir el archivo SVG que desea abrir. También debe incluir los atributos de ancho y alto para definir el ancho y el alto de su imagen SVG (en píxeles).
Para la compatibilidad entre navegadores, debe incluir el atributo de tipo, que debe leer:
type = "image / svg + xml"
y una base de código para los navegadores que no la admiten (Internet Explorer 8 y versiones inferiores). Su base de código apuntaría a un complemento SVG para los navegadores que no son compatibles con SVG. El complemento más utilizado es el de Adobe en http://www.adobe.com/svg/viewer/install/. Sin embargo, este complemento ya no es compatible con Adobe. Otra opción es el complemento SVG de Ssrc de Savarese Software Research en http://www.savarese.com/software/svgplugin/.
Tu objeto se vería así:
Consejos para usar objetos para SVG
- Asegúrese de que el ancho y la altura sean al menos tan grandes como la imagen que está incrustando. De lo contrario, su imagen podría ser recortada.
- Es posible que su SVG no se muestre correctamente si no incluye el tipo de contenido correcto (
type = "image / svg + xml"), así que no recomiendo dejarlo fuera. - Puede incluir información de respaldo dentro del
objetoetiqueta para los navegadores que no muestran los archivos SVG. - También puede establecer la fuente de su SVG y el tipo de contenido en parámetros. Esto puede funcionar mejor en IE 6 y 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">
Tenga en cuenta que esto requiere un classid para que funcione.
Ver un SVG en un ejemplo de etiqueta de objeto.
Insertar SVG con la etiqueta Insertar
Otra opción que tienes para incluir SVG es usar la etiqueta. Utiliza casi los mismos atributos que la etiqueta de objeto, incluido el ancho <, altura, tipo y base de código>. La única diferencia es que en lugar de datos, coloque la URL de su documento SVG en el atributo src.
Tu incrustación se vería así:
src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com / svg / viewer / install "/>
Consejos para usar Incrustar para SVG
- La etiqueta de inserción no es válida para HTML4, pero es válida para HTML5, por lo tanto, si la usa en una página HTML4, debe recordar que su página no se validará.
- Use un nombre de dominio completamente quoalificado en el atributo src para la mejor compatibilidad.
- También hay algunos informes de que el uso de la etiqueta de inserción con el complemento de Adobe bloqueará las versiones 1.0 a 1.4 de Mozilla.
Ver un SVG en un ejemplo de etiqueta de inserción.
Use un iframe para incluir SVG
Los iframes son otra forma fácil de incluir una imagen SVG en sus páginas web. Solo requiere tres atributos: ancho y alto como de costumbre, y src apunta a la ubicación de su archivo SVG.
Tu iframe se vería así:
Consejos para usar iframe para SVG
El iframe se mostrará con un borde alrededor de su imagen a menos que elimine el borde con un estilo, como
style = "border: none;"
El iframe no especifica la ubicación de un complemento, por lo que si el navegador de un cliente no tiene el complemento, es posible que no vea nada en absoluto, o que aparezca un mensaje de error.
Ver un SVG en un ejemplo de etiqueta de iframe.
