Kā ievietot SVG grafiku savā tīmekļa vietnē

SVG vai Scalable Vector Graphics ļauj jums izdarīt daudz sarežģītākus attēlus un padarīt tos padarīt tīmekļa lapās. Bet jūs nevarat vienkārši uzņemt SVG tagus un ielīmēt tos savā HTML formātā. Tās netiks rādītas, un jūsu lapa būs nederīga. Tā vietā jums jāizmanto viena no trim metodēm.

Izmantojiet objekta tagu, lai ievietotu SVG

HTML tagā jūsu tīmekļa lapā tiks ievietota SVG grafika. Jūs rakstāt objekta tagu ar datu atribūtu, lai noteiktu SVG failu, kuru vēlaties atvērt. Jums jāiekļauj arī platuma un augstuma atribūti, lai noteiktu SVG attēla platumu un augstumu (pikseļos).

Pārrobežu pārlūku saderībai jāiekļauj tipa atribūts, kas jālasa sekojoši:

type = "image / svg + xml"

un pārlūkprogrammu koda bāze, kas to neatbalsta (Internet Explorer 8 un jaunāka versija). Jūsu koda bāzē norādīts uz SVG spraudni pārlūkiem, kas neatbalsta SVG. Visbiežāk izmantotais spraudnis ir no Adobe vietnē http://www.adobe.com/svg/viewer/install/. Tomēr šis spraudnis Adobe vairs netiek atbalstīts. Vēl viena iespēja ir Ssrc SVG spraudnis no Savarese Software Research vietnē http://www.savarese.com/software/svgplugin/.

Jūsu objekts izskatās šādi:

Padomi, kā izmantot SVG objektu

  • Pārliecinieties, ka platums un augstums ir vismaz tik lieli kā jūsu ievietotais attēls. Pretējā gadījumā jūsu attēls var tikt izgriezts.
  • Jūsu SVG var neparādīties pareizi, ja neiekļaujat pareizo satura veidu (type = "image / svg + xml"), tādēļ es neiesakām to atstāt.
  • Objekta tagā varat iekļaut aizmugurējo informāciju pārlūkprogrammām, kuras neparādīs SVG failus.
  • Varat arī iestatīt SVG avotu un satura tipu parametriem. Tas var labāk darboties IE 6 un 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Ņemiet vērā, ka tas prasa classid, lai tas darbotos.

Objekta taga piemērā skatīt SVG.

Iegult SVG ar Embed tagu

Vēl viena iespēja SVG iekļaušanai ir izmantot tagu. Jūs izmantojat gandrīz tādus pašus atribūtus kā objekta tagu, tostarp platumu <, augstumu, tipu un koda bāzi>. Vienīgā atšķirība ir tā, ka datu vietā jūs ievietojat SVG dokumenta URL ar atribūtu src.

Jūsu embeds izskatās šādi:

src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com / svg / skatītājs / instalēt "/>

Padomi par Ievietošanas izmantošanu SVG

  • Ievadītais tags nav derīgs HTML4, taču tas ir derīgs HTML5, tādēļ, ja to izmantojat HTML4 lapā, jums jāatceras, ka jūsu lapa netiks validēta.
  • Lai vislabākā saderība, izmantojiet atribūtu src pilnībā izlīdzinātu domēna nosaukumu.
  • Ir arī daži ziņojumi, ka, izmantojot iegulto tagu, izmantojot Adobe spraudni, tiks pārtraukta Mozilla versijas no 1.0 līdz 1.4.

Skatīt emuāra tagu piemērā SVG.

Izmantojiet iframe, lai iekļautu SVG

Iframes ir vēl viens vienkāršs veids SVG attēla pievienošanai jūsu tīmekļa lapās. Tam vajag tikai trīs atribūtus: platums un augstums, kā parasti, un src, kas norāda uz jūsu SVG faila atrašanās vietu.

Jūsu iframe būtu šāds: