Kako staviti SVG grafiku na svoju web stranicu

SVG ili Scalable Vector Graphics vam omogućavaju da izvučete mnogo složenije slike i date ih na web stranicama. Ali ne možete jednostavno uzeti oznake SVG i uništiti ih u svoj HTML. Oni se neće pojaviti i vaša stranica će biti nevažeća. Umesto toga, morate koristiti jedan od tri metoda.

Koristite oznaku objekta da biste dodali SVG

HTML oznaka će ugraditi SVG grafiku na vašu web stranicu. Pišete oznaku objekta sa atributom podataka kako biste definirali SVG datoteku koju želite otvoriti. Takođe treba uključiti atribute širine i visine kako biste definirali širinu i visinu SVG slike (u pikselima).

Za kompatibilnost unakrsnog pretraživača, trebalo bi da uključite atribut tipa koji treba da pročita:

type = "image / svg + xml"

i kodni kod za pretraživače koji ga ne podržavaju (Internet Explorer 8 i niže). Vaša baza podataka bi ukazala na SVG plugin za pregledače koji ne podržavaju SVG. Najčešće korišćeni dodatak je Adobe od http://www.adobe.com/svg/viewer/install/. Međutim, ovaj dodatak više ne podržava Adobe. Druga opcija je Ssrc SVG plugin iz Savarese Software Research na http://www.savarese.com/software/svgplugin/.

Vaš objekat bi izgledao ovako:

Savjeti za korištenje objekta za SVG

  • Uverite se da su širina i visina barem veći kao slika koju ugrađujete. U suprotnom, vaša slika bi mogla biti obeležena.
  • Vaš SVG možda neće biti pravilno prikazan ako ne uključite odgovarajući tip sadržaja (type = "image / svg + xml"), tako da ne preporučujem da ga napustite.
  • Možete uključiti rezervne informacije unutar oznake objekta za pregledače koji neće prikazivati ​​SVG datoteke.
  • Takođe možete postaviti izvor vašeg SVG-a i tipa sadržaja u parametre. Ovo može bolje funkcionirati u IE 6 i 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Imajte na umu da to zahtijeva klasu da bi to učinilo.

Pogledajte SVG u primjeru oznake objekta.

Ugradite SVG sa oznakom Embed

Druga opcija koju imate za uključivanje SVG-a je da koristite oznaku. Koristite gotovo iste atribute kao oznaka objekta, uključujući širinu <, visinu, tip i kodiranje>. Jedina razlika je u tome što umesto podataka stavite SVG URL adresu dokumenta u atribut src.

Vaš ugrađivanje bi izgledalo ovako:

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

Savjeti za korištenje ugraditi za SVG

  • Oznaka za ugrađivanje nije važeća HTML4, ali je važeći HTML5, pa ako ga koristite na HTML4 stranici, morate zapamtiti da vaša stranica neće potvrditi.
  • Koristite potpuno kvalifikovano ime domena u atributu srcu za najbolju kompatibilnost.
  • Postoje i izvještaji da će korištenje ugrađene oznake sa Adobe pluginom srušiti Mozilla verzije 1.0 do 1.4.

Pogledajte SVG u primjeru ugrađene oznake.

Koristite iframe za uključivanje SVG-a

Akorame su još jedan jednostavan način da uključite SVG sliku na svoje web stranice. Potrebno je samo tri atributa: širina i visina kao i obično, a src pokazuje lokaciju vaše SVG datoteke.

Vaš iframe bi izgledao ovako: