Hoe om SVG Graphics op jou webblad te plaas

SVG of Scalable Vector Graphics laat jou baie meer komplekse beelde teken en hulle op webbladsye vertoon. Maar jy kan nie net die SVG-etikette neem en dit in jou HTML klap nie. Hulle sal nie verskyn nie en jou bladsy sal ongeldig wees. In plaas daarvan moet jy een van drie metodes gebruik.

Gebruik die Object-tag om SVG in te sluit

Die HTML-tag sal 'n SVG-grafiese in jou webbladsy insluit. Jy skryf die voorwerp-tag met 'n data-kenmerk om die SVG-lêer te definieer wat jy wil oopmaak. U moet ook breedte- en hoogte-eienskappe insluit om die breedte en hoogte van u SVG-beeld te definieer (in pixels).

Vir kruisblaaierkompatibiliteit, moet u die tipe kenmerk insluit, wat moet lees:

type = "image / SVG + xml"

en 'n kodebasis vir blaaiers wat dit nie ondersteun nie (Internet Explorer 8 en laer). Jou kodebasis sal dui op 'n SVG-invoegtoepassing vir blaaiers wat nie SVG ondersteun nie. Die mees gebruikte plugin is van Adobe op http://www.adobe.com/svg/viewer/install/. Hierdie inprop word egter nie meer deur Adobe ondersteun nie. Nog 'n opsie is die Ssrc SVG plugin van Savarese Software Research by http://www.savarese.com/software/svgplugin/.

Jou voorwerp sal so lyk:

Wenke vir die gebruik van voorwerpe vir SVG

  • Maak seker dat die breedte en hoogte minstens so groot is as die prent wat jy inbedel. Andersins kan u prent geknip word.
  • Jou SVG word moontlik nie korrek vertoon as jy nie die korrekte inhoudstipe (tipe = "image / svg + xml") bevat nie, dus ek beveel dit nie aan om dit uit te laat nie.
  • U kan terugvalinligting in die objekkode vir blaaiers insluit wat nie SVG-lêers sal vertoon nie.
  • U kan ook die bron van u SVG en die inhoudstipe in parameters instel. Dit kan beter werk in IE 6 en 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" code base = "http://www.savarese.com/software/svgplugin/">

Let daarop dat dit 'n klaskamer vereis om dit te laat werk.

Bekyk 'n SVG in 'n voorwerp tag voorbeeld.

Sluit SVG in met die Embed Tag

Nog 'n opsie wat jy vir SVG insluit, is om die merker te gebruik. Jy gebruik byna dieselfde eienskappe as die voorwerpkode, insluitend breedte <, hoogte, tipe en kodebasis>. Die enigste verskil is dat jy in plaas van data jou SVG-dokument-URL in die src-kenmerk plaas.

Jou inbedding sal só lyk:

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

Wenke vir die gebruik van inbedding vir SVG

  • Die inbedding-tag is nie geldig HTML4 nie, maar dit is geldig HTML5, dus as jy dit op 'n HTML4-bladsy gebruik, moet jy onthou dat jou bladsy nie sal valideer nie.
  • Gebruik 'n volledige quoalified domeinnaam in die src kenmerk vir die beste verenigbaarheid.
  • Daar is ook berigte dat die gebruik van die embed-tag met die Adobe-invoegtoepassing Mozilla-weergawes 1.0 tot 1.4 sal verslaan.

Bekyk 'n SVG in 'n embedding-tagvoorbeeld.

Gebruik 'n iframe om SVG in te sluit

Iframes is nog 'n maklike manier om 'n SVG-beeld op jou webblaaie in te sluit. Dit vereis slegs drie eienskappe: breedte en hoogte soos gewoonlik, en src wys na die ligging van jou SVG-lêer.

Jou iframe sal soos volg lyk: