ELPROS
SVG grafika

SVG grafika

Uvod

.SVG (engl. Scalable Vector Graphics) format je zapisa za vektorske grafike, primarno namijenjen za primjenu na internetu.

Karakteriziraju ga male veličine datoteka, a omogućuje indeksiranje sadržaja za tražilice.

VG (Scalable Vector Graphics) je jezik za opisivanje 2D vektorske grafike. 

Koristi se za definiranje grafike na web-u koja se bazira na vektorima, definira i grafiku u XML format. 

SVG grafika ne gubi na kvaliteti ukoliko se zumira ili promjeni veličina. Neovisno na koliku veličinu povećamo sliku vektorske grafike, ona zadržava svoju kvalitetu. U tome se razlikuje od rasterske grafike koja ima najbolju kvalitetu samo u izvornoj veličini slike

Vektorska grafika zapravo je slika stvorena kodom, odnosno nizom funkcija računalne grafike. Njezina osnovna prednost je svojstvo neograničenog skaliranja slike. 

SVG posjeduje mogućnost uključivanja direktno u HTML dokument, čime preglednik ne mora slati zahtjev za grafički element. Time se postiže puno veća brzina učitavanja stranice. 

Vektorska grafika je definirana vektorima. Svaka linija ima parametre duljinu, smjer i boju. Zatvoreni oblici imaju još i ispunu. 

Nedostatak je u tome što se SVG se ne može koristiti na fotografijama, jer je vektorski format, a koristi se za stvaranje različitih oblika i linija.

SVG marquee image

—————————————————————————————————————————————————————–

Način uključivanja SVG 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 jQuery. 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: Ugradnja <svg> u HTML i oblikovanje CSS-om

—————————————————————————————————————————————————————–

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 <ifreme> 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 

—————————————————————————————————————————————————————–

SVG elementi

Oblici:

  • crte  <line>
  • pravokutnici <rect>
  • krugovi <circle>
  • elipse <elipse>
  • pravokutnik <rect>
  • putanje <path>
  • krivulje <curve>
  • lukovi <arc>
  • povezane linije <polyline>
  • poligon <polygon>

Svaki od elemenata je objekt s vlastitim parametrima čije vrijednosti zadajemo prilikom crtanja. 

Oni se ponašaju kao i svaki drugi elementi HTML5 standarda, no da bi se dobio očekivani rezultat oznake se moraju staviti unutar <svg> oznake.

Putanje:

  • M (Move) pomakni se na zadanu točku
  • L (Line) nacrtaj crtu do zadane točke
  • H (horizontal) nacrtaj vodoravnu crtu
  • V (vertical) nacrtaj okomitu crtu
  • Q (Quadratic) nacrtaj kvadratnu krivulju
  • C (Cubic) nacrtaj kubnu krivulju
  • A (Arc) nacrtaj luk
Literatura:
Slike - https://www.adobe.com/creativecloud/file-types/image/vector/svg-file.html
https://www.w3schools.com/graphics/svg_inhtml.asp
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Introduction
Sadržaj sa Loomena
Skip to content