Paano Ilagay ang SVG Graphics sa Iyong Webpage

Ang SVG o Scalable Vector Graphics ay nagpapahintulot sa iyo na gumuhit ng mas kumplikadong mga imahe at ipasa ang mga ito sa mga web page. Ngunit hindi mo maaaring kunin ang mga tag na SVG at ibaril ang mga ito sa iyong HTML. Hindi sila magpapakita at ang iyong pahina ay hindi wasto. Sa halip, kailangan mong gamitin ang isa sa tatlong paraan.

Gamitin ang Tag ng Bagay upang I-embed ang SVG

Ang HTML tag ay maglalagay ng isang SVG graphic sa iyong web page. Isinulat mo ang object tag na may isang attribute ng data upang tukuyin ang SVG file na nais mong buksan. Dapat mo ring isama ang mga katangian ng lapad at taas upang tukuyin ang lapad at taas ng iyong imahe ng SVG (sa pixel).

Para sa compatibility ng cross-browser, dapat mong isama ang uri ng katangian, na dapat basahin:

type = "image / svg + xml"

at isang codebase para sa mga browser na hindi sumusuporta dito (Internet Explorer 8 at mas mababa). Ang iyong codebase ay tumutukoy sa isang SVG plugin para sa mga browser na hindi sumusuporta sa SVG. Ang pinaka karaniwang ginagamit na plugin ay mula sa Adobe sa http://www.adobe.com/svg/viewer/install/. Gayunpaman, ang plugin na ito ay hindi na suportado ng Adobe. Ang isa pang pagpipilian ay ang Ssrc SVG plugin mula sa Savarese Software Research sa http://www.savarese.com/software/svgplugin/.

Ang iyong bagay ay magiging ganito:

Mga Tip para sa Paggamit ng bagay para sa SVG

  • Siguraduhin na ang lapad at taas ay hindi bababa sa kasing dami ng larawan na iyong isinasama. Kung hindi man, ang iyong imahe ay maaaring pinutol.
  • Maaaring hindi maipakita nang tama ang iyong SVG kung hindi mo isama ang tamang uri ng nilalaman (type = "image / svg + xml"), kaya hindi ko inirerekumenda na iwanan ito.
  • Maaari mong isama ang impormasyon ng fallback sa loob ng tag ng bagay para sa mga browser na hindi magpapakita ng mga file ng SVG.
  • Maaari mo ring itakda ang pinagmulan ng iyong SVG at ang uri ng nilalaman sa mga parameter. Ito ay maaaring mas mahusay sa IE 6 at 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Tandaan na ito ay nangangailangan ng isang classid upang gawin itong gumagana.

Tingnan ang isang SVG sa isang halimbawa ng tag ng bagay.

I-embed ang SVG gamit ang I-embed na Tag

Ang isa pang opsyon na mayroon ka para sa pagsasama ng SVG ay ang paggamit ng tag. Ginagamit mo ang halos parehong mga katangian ng tag ng bagay, kabilang ang width <, taas, uri, at codebase>. Ang pagkakaiba lamang ay sa halip na data, inilalagay mo ang iyong dokumento ng SVG na dokumento sa src na katangian.

Ang iyong pag-embed ay magiging ganito:

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

Mga Tip para sa Paggamit ng I-embed para sa SVG

  • Ang naka-embed na tag ay hindi wastong HTML4, ngunit ito ay wastong HTML5, kaya kung gagamitin mo ito sa isang pahina ng HTML4, dapat mong tandaan na hindi mapatunayan ang iyong pahina.
  • Gumamit ng isang ganap na quoalified na domain name sa src attribute para sa pinakamahusay na compatibility.
  • Mayroon ding ilang mga ulat na ang paggamit ng naka-embed na tag sa Adobe plugin ay mag-crash ng mga bersyon ng Mozilla 1.0 hanggang 1.4.

Tingnan ang isang SVG sa isang halimbawa ng naka-embed na tag.

Gumamit ng isang iframe upang Isama ang SVG

Ang mga iframe ay isa pang madaling paraan upang isama ang isang imahe ng SVG sa iyong mga web page. Nangangailangan lamang ito ng tatlong mga katangian: lapad at taas gaya ng dati, at src na tumuturo sa lokasyon ng iyong SVG file.

Ang iyong iframe ay magiging ganito: