Unsaon Paghatag sa SVG Graphics sa Imong Webpage

Ang SVG o Scalable Vector Graphics makahimo ka og mas komplikado nga mga hulagway ug ipasulat kini sa mga web page. Apan dili ka makahimo sa pagkuha sa SVG tags ug pagsagpa sa imong HTML. Sila dili magpakita ug dili mahimo ang imong panid. Hinunoa, kinahanglan nimong gamiton ang usa sa tulo ka pamaagi.

Gamita ang Tag sa Mga Butang aron I-embed ang SVG

Ang tag sa HTML mag-embed sa usa ka SVG graphic sa imong web page. Gisulat nimo ang tag sa usa ka butang nga may hiyas sa datos aron mahibal-an ang SVG file nga gusto nimo nga ablihan. Kinahanglan mo usab nga ilakip ang gilapdon ug gitas-on nga mga kinaiya aron ipaila ang gilapdon ug gitas-on sa imong SVG image (sa pixel).

Alang sa kompidensiyal sa cross-browser, kinahanglang ilakip nimo ang type attribute, nga angay basahon:

type = "image / svg + xml"

ug usa ka codebase alang sa mga browser nga wala magsuporta niini (Internet Explorer 8 ug ubos). Ang imong codebase magpunting sa usa ka SVG plugin alang sa mga browser nga wala mosuporta sa SVG. Ang labing kasagarang gigamit nga plugin gikan sa Adobe sa http://www.adobe.com/svg/viewer/install/. Apan, kini nga plugin wala na suportado sa Adobe. Ang laing kapilian mao ang Ssrc SVG plugin gikan sa Savarese Software Research sa http://www.savarese.com/software/svgplugin/.

Ang imong tumong mao kini:

Mga Sugyot sa Paggamit sa butang alang sa SVG

  • Siguraduha nga ang gilapdon ug gitas-on labing menos sama sa dagway nga imong gipakita. Kay kon dili, ang imong larawan mahimong maputol.
  • Ang imong SVG dili mahimong ipakita sa husto kon wala nimo ilakip ang husto nga tipo sa sulod (type = "image / svg + xml"), mao nga wala ko girekomendar nga gibiyaan kini.
  • Mahimong maglakip sa impormasyon sa fallback sulod sa tag sa mga butang alang sa mga browser nga dili magpakita sa mga file sa SVG.
  • Mahimo usab nimo ibutang ang tinubdan sa imong SVG ug ang tipo nga sulod sa mga parameter. Mahimo kini nga mas maayo sa IE 6 ug 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Timan-i nga kini nagkinahanglan sa usa ka classid aron kini mahimo.

Tan-awa ang usa ka SVG sa usa ka pananglitan sa tag sa panid.

I-embed ang SVG uban sa I-embed nga Tag

Ang laing kapilian nga imong nalakip sa pag-apil sa SVG mao ang paggamit sa tag. Gigamit nimo ang hapit parehas nga mga hiyas sama sa tag sa butang, lakip ang lapad <, gitas-on, type, ug codebase>. Ang bugtong kalainan mao nga sa baylo sa datos, imong ibutang ang imong SVG nga dokumento nga URL sa src attribute.

Ang imong pag-embed morag ingon niini:

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 sa Paggamit sa Pag-embed alang sa SVG

  • Ang embed nga tag dili balido nga HTML4, apan kini balido nga HTML5, busa kon imong gamiton kini sa usa ka pahina sa HTML4, kinahanglan nimong hinumdoman nga ang imong panid dili mapamatud-an.
  • Paggamit sa usa ka hingpit nga quoalified ngalan sa domain sa src nga kinaiya alang sa labing maayo nga compatibility.
  • Adunay usab mga pipila ka mga taho nga ang paggamit sa embed nga tag uban sa Adobe plugin makaguba sa Mozilla nga mga bersyon 1.0 ngadto sa 1.4.

Pagtan-aw sa usa ka SVG sa usa ka embed nga pananglitan nga tag.

Paggamit sa usa ka iframe nga Maglakip sa SVG

Ang mga iframe lain usab nga paagi sa pag-apil sa usa ka SVG image sa imong mga web pages. Nagkinahanglan lamang kini og tulo ka mga kinaiya: ang gilapdon ug gitas-on sama sa naandan, ug ang src nagatudlo sa nahimutangan sa imong SVG file.

Ang imong iframe mahimong ingon niini: