Sut i Rhoi Graffeg SVG ar Eich Gwefan

Graffeg Vector SVG neu Scalable yn gadael i chi dynnu lluniau llawer mwy cymhleth a chael eu rendro ar dudalennau gwe. Ond ni allwch chi gymryd y tagiau SVG yn syml a'u slapio i mewn i'ch HTML. Ni fyddant yn ymddangos a bydd eich tudalen yn annilys. Yn lle hynny, mae'n rhaid i chi ddefnyddio un o dri dull.

Defnyddiwch y Tag Gwrthod i Embedd SVG

Bydd y tag HTML yn ymgorffori graffeg SVG yn eich tudalen we. Rydych chi'n ysgrifennu'r tag gwrthrych gyda phriodoledd data i ddiffinio'r ffeil SVG yr ydych am ei agor. Dylech hefyd gynnwys nodweddion lled a thaldra i ddiffinio lled ac uchder eich delwedd SVG (mewn picsel).

Ar gyfer cydweddoldeb traws-borwr, dylech gynnwys y priodwedd math, a ddylai ddarllen:

type = "image / svg + xml"

a chod cod ar gyfer porwyr nad ydynt yn ei gefnogi (Internet Explorer 8 ac is). Byddai'ch cod cod yn cyfeirio at ychwanegyn SVG ar gyfer porwyr nad ydynt yn cefnogi SVG. Ychwanegiad mwyaf cyffredin yw Adobe ar http://www.adobe.com/svg/viewer/install/. Fodd bynnag, nid yw'r ategyn hwn bellach yn cael ei gefnogi gan Adobe. Yr opsiwn arall yw ychwanegyn Ssrc SVG o Savarese Software Research yn http://www.savarese.com/software/svgplugin/.

Byddai'ch gwrthrych yn edrych fel hyn:

Cynghorion ar gyfer defnyddio gwrthrych ar gyfer SVG

  • Gwnewch yn siŵr bod y lled a'r uchder o leiaf mor fawr â'r ddelwedd rydych chi'n ei ymgorffori. Fel arall, gellid clipio eich llun.
  • Efallai na fydd eich SVG yn arddangos yn gywir os na fyddwch yn cynnwys y math cynnwys cywir (type = "image / svg + xml"), felly nid wyf yn argymell ei adael.
  • Gallwch gynnwys gwybodaeth wrth gefn y tu mewn i'r tag gwrthrych ar gyfer porwyr na fyddant yn arddangos ffeiliau SVG.
  • Gallwch hefyd osod ffynhonnell eich SVG a'r math o gynnwys mewn paramedrau. Efallai y bydd hyn yn gweithio'n well yn IE 6 a 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Sylwch fod hyn yn ei gwneud yn ofynnol i ddosbarthwr ei wneud yn gweithio.

Gweld SVG mewn enghraifft tag gwrthrych.

Embed SVG gyda'r Tag Embed

Yr opsiwn arall sydd gennych ar gyfer cynnwys SVG yw defnyddio'r tag. Rydych chi'n defnyddio bron yr un nodweddion â'r tag gwrthrych, gan gynnwys lled <, uchder, math, a codebase>. Yr unig wahaniaeth yw, yn hytrach na data, eich bod yn gosod eich URL SVG yn y priodwedd src.

Byddai'ch ymgorffori yn edrych fel hyn:

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

Awgrymiadau ar gyfer Defnyddio Embedd ar gyfer SVG

  • Nid yw'r tag embed yn ddilys HTML4, ond mae'n HTML5 dilys, felly os ydych chi'n ei ddefnyddio mewn tudalen HTML4, dylech gofio na fydd eich tudalen yn dilysu.
  • Defnyddiwch enw parth cwblogedig yn y priodwedd src ar gyfer cydweddoldeb gorau.
  • Mae yna rai adroddiadau hefyd y bydd defnyddio'r tag ymgorffori ag ategyn Adobe yn chwalu fersiynau Mozilla 1.0 i 1.4.

Gweld SVG mewn enghraifft tag mewnosod.

Defnyddiwch iframe i gynnwys SVG

Mae Iframes yn ffordd hawdd arall o gynnwys delwedd SVG ar eich tudalennau gwe. Dim ond tri phriodoledd sydd ei hangen: lled ac uchder fel arfer, a src sy'n cyfeirio at leoliad eich ffeil SVG.

Byddai'ch iframe yn edrych fel hyn: