Com posar gràfics SVG a la vostra pàgina web

Els gràfics vectorials SVG o escalables us permeten dibuixar imatges molt més complexes i fer-les representades a les pàgines web. Però no podeu simplement agafar les etiquetes SVG i copiar-les al vostre HTML. No es mostraran i la teva pàgina no serà vàlida. En canvi, heu d'utilitzar un dels tres mètodes.

Utilitzeu l'etiqueta d'objecte per incrustar SVG

L'etiqueta HTML incrustarà un gràfic SVG a la vostra pàgina web. Escriviu l'etiqueta d'objecte amb un atribut de dades per definir el fitxer SVG que voleu obrir. També haureu d'incloure atributs d'amplada i alçada per definir l'amplada i l'alçada de la vostra imatge SVG (en píxels).

Per a la compatibilitat entre navegadors, heu d'incloure l'atribut de tipus, que hauria de llegir:

type = "image / svg + xml"

i una base de codis per a navegadors que no ho admeten (Internet Explorer 8 i inferior). La vostra base de codis apunta a un complement SVG per a navegadors que no admeten SVG. El connector més utilitzat és d'Adobe a http://www.adobe.com/svg/viewer/install/. Tanmateix, aquest complement no és compatible amb Adobe. Una altra opció és el connector SVG Ssrc de Savarese Software Research a http://www.savarese.com/software/svgplugin/.

El vostre objecte quedaria així:

Consells per utilitzar l'objecte per SVG

  • Assegureu-vos que l'amplada i l'alçada són almenys tan grans com la imatge que incrusteu. En cas contrari, es podria retallar la vostra imatge.
  • És possible que el teu SVG no es mostri correctament si no incloeu el tipus de contingut correcte (type = "image / svg + xml"), així que no recomano deixar-ho.
  • Podeu incloure informació de devolució dins de l'etiqueta d'objecte per a navegadors que no mostraran fitxers SVG.
  • També podeu configurar el codi font de l'SVG i el tipus de contingut en els paràmetres. Això pot funcionar millor en IE 6 i 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Tingueu en compte que això requereix un classid perquè funcioni.

Consulteu un SVG en un exemple d'etiqueta d'objectes.

Incrusteu SVG amb la etiqueta incrustat

Una altra opció que teniu per incloure SVG és utilitzar l'etiqueta. Utilitza gairebé els mateixos atributs que l'etiqueta d'objecte, incloent ample <, alçada, tipus i base de codi>. L'única diferència és que, en comptes de dades, col·loqueu l'URL del document SVG a l'atribut src.

La vostra inserció es veuria així:

src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com / svg / viewer / install "/>

Consells per utilitzar Embed per a SVG

  • L'etiqueta d'incrustació no és HTML4 vàlid, però és HTML5 vàlid, per tant, si l'utilitzeu en una pàgina HTML4, recordeu que la vostra pàgina no validarà.
  • Utilitzeu un nom de domini complet en l'atribut src per obtenir la millor compatibilitat.
  • També hi ha alguns informes que l'ús de l'etiqueta d'inserció amb el complement d'Adobe bloquejarà les versions de Mozilla 1.0 a 1.4.

Consulteu un SVG en un exemple d'etiqueta d'inserció.

Utilitzeu un iframe per incloure SVG

Els Iframes són una altra manera fàcil d'incloure una imatge SVG a les vostres pàgines web. Només requereix tres atributs: ample i alt com de costum, i src que indica la ubicació del vostre fitxer SVG.

El vostre iframe es veuria així: