Uključivanje SVG-a u projekt

  • Uključivanje SVG-a u HTML dokument omogućava naknadno stiliziranje grafike putem CSS-a, ali i manipulaciju JavaScript-om. Tako možemo promijeniti svojstva, kao što su: boja pozadine, teksta, okvira, na isti način kao i za bilo koji HTML element. 

  • Zbog toga je omogućeno i animirati sve SVG objekte preko JavaScript biblioteke kao što je jQuerry. Sve promjene unutar samog koda SVG grafike, moguće je mijenjati preko bilo kakvog tekstualnog editora ili programa za obradu vektorske grafike. 

  • Sama SVG datoteka većinom je manje težine u usporedbi sa Bitmap rasterskom slikom, koja posjeduje otprilike iste rezoluciju i grafički prikaz.

  • Element SVG definira platno za grafiku i kreira interni mrežasti sustav.

  • Za iscrtavanje grafike izravno u pregledniku možemo se koristiti oznakama <svg> i <canvas>.

  • Kada jednostavne grafičke elemente poput logotipa, ikonica, crteža, dijagrama i sl. iscrtavamo izravno u pregledniku s pomoću elemenata unutar oznake <svg>, smanjujemo količinu podataka koja se učitava pri renderiranju stranice, čime se povećava brzina njezina otvaranja. Za složene slike s mnogo detalja crtanje s pomoću <svg> nije dobro rješenje.

  • Svojstvo SVG slike jest da je na svim veličinama zaslona jednake kvalitete.

 

Primjer ugradnje:

Svemir... CSS HTML

 

 

 

 

 

 

 

 

 

 

 

SVG se može uključiti kao i obična slika, preko  <img> oznake: 

<img src=”bg-1.svg” alt=”Background image” height=”auto” width=”100%”>

Na taj način SVG je tretiran kao obična slika, što znači da SVG-om uključen na ovaj način ne možemo manipulirati kao nizom HTML elemenata.

SVG u HTML možemo uključiti i preko <iframe> ili <embed> oznake: 

<iframe src=”blog.svg”>Your browser does not support iframes</iframe>

<embed type=”image/svg+xml” src=”blog.svg” />

Ovo nije najbolja praksa, zbog ograničenosti nekih mogućnosti i nedostatka podrške nekih web preglednika.

Jedan od najčešćih i najboljih načina uključivanja SVG-a u HTML je pomoću oznake <object>: 

<object type=”image/svg+xml” data=”bg-1.svg”>Your browser does not support SVGs</object>

Uvod                                                                                                                                                                                                                        SVG elementi

Skip to content