Cómo poner gráficos SVG en tu página web

SVG o Gráficos vectoriales escalables le permiten dibujar imágenes mucho más complejas y hacer que se procesen en páginas web. Pero no puede simplemente tomar las etiquetas SVG y pegarlas en su HTML.

SVG o Gráficos vectoriales escalables le permiten dibujar imágenes mucho más complejas y hacer que se procesen en páginas web. Pero no puede simplemente tomar las etiquetas SVG y pegarlas en su HTML. No se mostrarán y su página no será válida. En cambio, debe usar uno de los tres métodos.

Use la etiqueta de objeto para incrustar SVG

La etiqueta HTML incrustará un gráfico SVG en su página web. Usted escribe la etiqueta del 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 la compatibilidad entre navegadores, debe incluir el atributo type, que debería leer:

 type = "image/svg + xml" 

y una base de código para navegadores que no lo admiten (Internet Explorer 8 y versiones anteriores). Su base de código apuntaría a un complemento SVG para navegadores que no admiten SVG. El complemento más utilizado es 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 Ssrc SVG de Savarese Software Research en http://www.savarese.com/software/svgplugin/.

Su 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 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 omitirlo.

  • Puede incluir información alternativa dentro de la etiqueta

     object 

    para los navegadores que no mostrarán archivos SVG.

  • También puede establecer la fuente de su SVG y el tipo de contenido en los 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.

Incrustar SVG con la etiqueta Incrustar

Otra opción que tiene para incluir SVG es usar la etiqueta. Utiliza casi los mismos atributos que la etiqueta del objeto, incluido el ancho. La única diferencia es que en lugar de

, coloca la URL de su documento SVG en el atributo src.

Su inserció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 Insertar para SVG

  • La etiqueta incrustada no es HTML4 válida, pero es HTML5 válido, por lo que si la usa en una página HTML4, debe recordar que su página no se validará.
  • Utilice un nombre de dominio completo en el atributo src para obtener 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 de Mozilla 1.0 a 1.4.

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 apuntando a la ubicación de su archivo SVG.

Su 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 una ubicación de complemento, por lo que si el navegador de un cliente no tiene el complemento, es posible que no vean nada o que vean un mensaje de error.

Rate article
labsfabs.com
Add a comment