Como colocar gráficos SVG na súa páxina web

SVG ou Scalable Vector Graphics permítenlle atraer imaxes moito máis complexas e facelas en páxinas web. Pero non podes simplemente levar as etiquetas SVG e facelas boas no teu HTML. Non aparecerán e a túa páxina non será válida. En cambio, ten que empregar un dos tres métodos.

Use a etiqueta de obxecto para inserir SVG

A etiqueta HTML incrustará un gráfico SVG na súa páxina web. Escribe a etiqueta de obxecto cun atributo de datos para definir o ficheiro SVG que desexa abrir. Tamén debería incluír atributos de ancho e alto para definir o ancho e o alto da imaxe SVG (en píxeles).

Para a compatibilidade entre navegadores, debería incluír o atributo type, que debería ler:

type = "image / svg + xml"

e unha base de código para navegadores que non o admiten (Internet Explorer 8 e inferior). A súa base de código apuntaría a un complemento SVG para navegadores que non son compatibles con SVG. O complemento máis usado é Adobe desde http://www.adobe.com/svg/viewer/install/. Non obstante, este complemento xa non é compatible con Adobe. Outra opción é o complemento SVG de Ssrc de Savarese Software Research en http://www.savarese.com/software/svgplugin/.

O teu obxecto quedaría así:

Consellos para usar o obxecto para SVG

  • Asegúrese de que o ancho e a altura sexan polo menos tan grandes como a imaxe que incorpore. En caso contrario, a súa imaxe podería ser cortada.
  • O seu SVG pode non aparecer correctamente se non inclúe o tipo de contido correcto (type = "image / svg + xml"), polo que non recomendo deixalo.
  • Pode incluír información de devolución dentro da etiqueta de obxecto para navegadores que non mostrarán ficheiros SVG.
  • Tamén pode configurar a orixe do SVG eo tipo de contido nos parámetros. Isto pode funcionar mellor en IE 6 e 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Teña en conta que isto require un classid para que funcione.

Ver un SVG nun exemplo de etiqueta de obxecto.

Inserir SVG coa etiqueta incrustada

Outra opción que ten para incluír SVG é usar a etiqueta. Usa case os mesmos atributos que a etiqueta de obxecto, incluíndo ancho <, alto, tipo e base de código>. A única diferenza é que, en vez de datos, coloca o URL do documento SVG no atributo src.

A súa integración serí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 "/>

Consellos para usar Embed para SVG

  • A etiqueta de inserción non é válida HTML4, pero é válido HTML5, polo que se o usa nunha páxina HTML4, recordar que a súa páxina non validará.
  • Use un nome de dominio completamente cuestionario no atributo src para a mellor compatibilidade.
  • Hai tamén algúns informes de que usar a etiqueta de inserción co complemento de Adobe bloqueará as versións de Mozilla 1.0 a 1.4.

Ver un SVG nun exemplo de etiqueta de inserción.

Use un iframe para incluír SVG

Iframes son outro xeito doado de incluír unha imaxe SVG nas túas páxinas web. Só require tres atributos: ancho e alto como de costume e src que indica a localización do ficheiro SVG.

O teu iframe sería así: