Gráficos SVG o Gráficos Vectoriales Escalables le permiten dibujar imágenes mucho más complejas y tenerlas renderizadas en páginas web. Pero no puede simplemente tomar las etiquetas SVG y pegarlas en su HTML. No aparecerán y su página no será válida. En su lugar, debe utilizar uno de los tres métodos.
Índice de contenidos
Usar la etiqueta de objeto para incrustar SVG
La etiqueta HTML incrustará un gráfico SVG en su página web. Escriba la etiqueta de objeto con un atributo de datos para definir el archivo SVG que desea abrir. También debe incluir atributos de ancho y alto para definir el ancho y alto de su imagen SVG (en píxeles).
Para compatibilidad entre navegadores, debe incluir el atributo type, que debe decir:
type="image/svg+xml"
y un código base para navegadores que no lo soportan (Internet Explorer 8 y versiones posteriores). Su base de código apuntaría a un plugin SVG para navegadores que no soportan gráficos SVG. El plugin más utilizado es el de Adobe en http://www.adobe.com/svg/viewer/install/. Sin embargo, este plugin ya no es compatible con Adobe. Otra opción es el plugin Ssrc SVG de Savarese Software Research en http://www.savarese.com/software/svgplugin/.
Tu objeto se vería así:
Consejos para usar objetos para Gráficos SVG
- Asegúrese de que el ancho y la altura son al menos tan grandes como la imagen que está incrustando. De lo contrario, su imagen podría estar recortada.
- Es posible que su SVG no se muestre correctamente si no incluye el tipo de contenido correcto (
type="image/svg+xml"
), por lo que no recomiendo que lo omita.
- Puede incluir información complementaria en la etiqueta
object
de los navegadores que no muestran archivos SVG.
- También puede configurar la fuente de su SVG y el tipo de contenido en los parámetros. Esto puede funcionar mejor en IE 6 y 7:
class 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.
Incrustar SVG con la etiqueta de incrustación
Otra opción que tiene para incluir SVG es usar la etiqueta. Se utilizan casi los mismos atributos que la etiqueta de objeto, incluyendo width<, height, type, and codebase>. La única diferencia es que en lugar de
En el caso de un documento SVG, coloque la URL de su documento SVG en el atributo src.
Tu incrustación se vería así:
Consejos para usar incrustación para SVG
- La etiqueta embed no es válida en HTML4, pero es válida en HTML5, así que si la usas en una página HTML4, debes recordar que tu página no se validará.
- Utilice un nombre de dominio totalmente cualificado en el atributo src para obtener la mejor compatibilidad.
- También hay algunos informes de que el uso de la etiqueta embed con el plugin de Adobe bloqueará las versiones 1.0 a 1.4 de Mozilla.
Ver un SVG en un ejemplo de etiqueta de incrustación.
Utilice un iframe para Incluir Gráficos SVG
Los iframes son otra forma fácil de incluir una imagen SVG en sus páginas web. Sólo requiere tres atributos: ancho y alto como de costumbre, y src apuntando a la ubicación de su archivo SVG.
Su iframe se vería así:
Consejos para usar iframe para Gráficos SVG.
El iframe se mostrará con un borde alrededor de su imagen a menos que elimine el borde con un estilo, como
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
El iframe no especifica una ubicación del plugin, por lo que si el navegador de un cliente no tiene el plugin, puede que no vea nada en absoluto, o puede que vea un mensaje de error.
