Jinsi ya kuweka picha za SVG kwenye ukurasa wako wa wavuti

SVG au Viliyoagizwa Vector Graphics basi wewe kuteka picha zaidi ngumu na kuwa na tafsiri rendered kwenye kurasa za mtandao. Lakini huwezi kuchukua tu vitambulisho vya SVG na kuzipiga kwenye HTML yako. Haitaonyesha na ukurasa wako utakuwa batili. Badala yake, unapaswa kutumia moja ya njia tatu.

Tumia Kitambulisho cha Kitu cha Kuingiza SVG

Kitambulisho cha HTML kitaingiza picha ya SVG kwenye ukurasa wako wa wavuti. Unaandika kitambulisho cha kitu na sifa ya data ili kufafanua faili ya SVG unayotaka kufungua. Unapaswa pia kuingiza sifa za upana na urefu ili kufafanua upana na urefu wa picha yako ya SVG (kwa pixels).

Kwa utangamano wa mshambuliaji wa msalaba, unapaswa kuingiza sifa ya aina, ambayo inapaswa kusoma:

aina = "picha / svg + xml"

na codebase kwa vivinjari ambavyo haviiunga mkono (Internet Explorer 8 na chini). Codebase yako itaelekeza kwa Plugin ya SVG kwa wasifu ambao hawaunga mkono SVG. Plugin iliyotumiwa mara nyingi ni kutoka Adobe kwenye http://www.adobe.com/svg/viewer/install/. Hata hivyo, programu hii haipatikani tena na Adobe. Chaguo jingine ni Plugin ya Ssrc SVG kutoka kwa Utafiti wa Programu ya Savarese kwenye http://www.savarese.com/software/svgplugin/.

Kitu chako kinaonekana kama hii:

Vidokezo kwa kutumia kitu kwa SVG

  • Hakikisha kwamba upana na urefu ni angalau kubwa kama picha unayoingiza. Vinginevyo, picha yako inaweza kupunguzwa.
  • SVG yako haiwezi kuonyesha kwa usahihi ikiwa hujumuisha aina sahihi ya maudhui (aina = "picha / svg + xml"), kwa hiyo siipendekeza kuachilia.
  • Unaweza kuingiza taarifa ya kurudi ndani ya lebo ya kitu kwa wasifu ambao hautaonyesha faili za SVG.
  • Unaweza pia kuweka chanzo cha SVG yako na aina ya maudhui katika vigezo. Hii inaweza kufanya kazi vizuri zaidi katika IE 6 na 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" urefu = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Kumbuka kuwa hii inahitaji classid ili kufanya kazi.

Angalia SVG katika mfano wa kitambulisho cha kitu.

Embed SVG na Tag Embed

Chingine chaguo unazojumuisha SVG ni kutumia lebo. Unatumia karibu sifa sawa kama tag ya kitu, ikiwa ni pamoja na upana <, urefu, aina, na codebase>. Tofauti pekee ni kwamba badala ya data, huweka URL yako ya hati ya SVG katika sifa ya src.

Uingizaji wako utaonekana kama hii:

src = "http://your-domain.here/z-circle.svg" upana = "210" urefu = "210" aina = "picha / svg + xml" codebase = "http://www.adobe.com / svg / mtazamaji / kufunga "/>

Vidokezo vya Kutumia Embed kwa SVG

  • Kitambulisho cha embed halali HTML4, lakini ni HTML5 halali, kwa hiyo ikiwa unatumia ukurasa wa HTML4, unapaswa kukumbuka kuwa ukurasa wako hautathibitisha.
  • Tumia jina la kikoa kilichokamilika kikamilifu katika sifa ya src kwa utangamano bora.
  • Pia kuna ripoti za kwamba kutumia tambulisho ya embed na Plugin ya Adobe itapoteza matoleo ya Mozilla 1.0 hadi 1.4.

Angalia SVG katika mfano wa lebo ya embed.

Tumia iframe Kuingiza SVG

Majarida ni njia rahisi zaidi ya kuingiza picha ya SVG kwenye kurasa zako za wavuti. Inahitaji tu sifa tatu: upana na urefu kama kawaida, na src inaonyesha eneo la faili yako ya SVG.

Iframe yako ingeonekana kama hii: