Uvod u HTML SVG
Upotreba slika u HTML-u fenomenalna je za web stranice koje su bogate multimedijskim sadržajima. Sve što trebate učiniti je dodati oznaku u HTML kod i violu, vaš preglednik će prikazati, pa čak i dodati vezu do slike po vašem izboru. Postaje malo zabrinjavajuće u situacijama u kojima znate da će slika ili dijagram biti zumirani jer JPG.webp ili PNG neće pokazati nikakve daljnje detalje nakon što se zumiraju u svoju prošlu razlučivost. SVG je rješenje ovog problema. SVG označava skalabilnu vektorsku grafiku. Kao što ime sugerira, one se mogu zumirati koliko god je potrebno, a detalji nikada ne nestaju. SVG-ovi nisu ekskluzivni za web tehnologiju, ali biti u mogućnosti koristiti ih u HTML-u zaista je uredno.
SVG je koristan za dijagrame, vektore, grafikone i grafikone u pregledniku. Doznajmo ovdje kako ih možete detaljno koristiti ovdje.
Sintaksa ugradnje SVG u HTML
Usporedno s korištenjem platna u HTML5, postoji jednostavna oznaka koju možete koristiti za umetanje SVG-a u HTML5 stranice. Sintaksa je sljedeća:
…. …. …. ….
Primjeri SVG-ova u HTML-u
Pogledajmo nekoliko primjera vektora koji se mogu stvoriti i uklopiti u HTML5:
Primjer br. 1 - Crtanje pravokutnika pomoću SVG-a u HTML-u
Kodirati:
Sorry but this browser does not support inline SVG.
Izlaz:
Primjer br. 2 - Crtanje kvadrata sa zaobljenim uglovima u SVG-u
Za kvadrat sa zaobljenim uglovima morat ćemo definirati polumjer uglova pomoću rx, osim na veličinu i dimenzije kvadrata.
Kodirati:
Sorry but this browser does not support inline SVG.
Izlaz:
Primjer br. 3 - Crtanje kruga u SVG-u s obrisom i bojom u njemu
Kodirati:
Sorry but this browser does not support inline SVG.
Izlaz:
Primjer br. 4 - Crtanje ravne linije sa SVG u HTML5
Oznaku možemo koristiti za crtanje ravne linije u HTML5 SVGsima, također se mogu definirati boja, debljina crte i položaj istih.
Kodirati:
Izlaz:
Primjer br. 5 - Crtanje pomračenja putem SVG-a u HTML5
Oznaku možemo iskoristiti za crtanje pomrčine u HTML5 SVG-ima, a boja i položaj iste mogu se definirati zajedno s dielom i njegovim polumjerom.
Kodirati:
Sorry but this browser does not support inline SVG.
Izlaz:
Primjer 6 - Izrada poligona sa SVG u HTML5
Oznaka se može koristiti u SVG-ovima za stvaranje poligona. U oznaci moramo spomenuti položaje svake točke. Boje za punjenje, debljina obrisa itd. Mogu se definirati i u kodu.
Kodirati:
Sorry but this browser does not support inline SVG.
Izlaz:
Primjer br. 7 - Stvaranje polarne linije sa SVG u HTML5
Polilin se koristi za crtanje oblika koji će se sastojati samo od ravne linije. Imajte na umu da i ti vodovi moraju biti povezani. Evo primjera polilinarske implementacije u HTML5.
Kodirati:
Sorry but this browser does not support inline SVG.
Izlaz:
Primjer br. 8 - Crtanje teksta sa SVG u HTML5
Tekst bi mogao biti potreban u bilo kojem SVG-u u mnogim situacijama, poput označavanja grafikona, itd. Srećom, u SVG-u postoji oznaka koja se može koristiti. Tekst se može postaviti na bilo koji položaj u SVG-u, a možete prilagoditi i njegovu boju i druge detalje.
Kodirati:
Here is an example, it's very examply
Sorry but this browser does not support inline SVG.
Izlaz:
Primjer # 9 - Crtanje zvijezde pomoću SVG u HTML5
Sad kad smo gotovi s osnovama, napravimo zvijezdu koja će se napraviti uz pomoć SVG-a.
Kodirati:
style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG.
style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG.
Izlaz:
Primjer br. 10 - Upotreba linearnog gradijenta u SVG-u
Možete koristiti linearni i radijalni gradijent u SVG liniji HTML platna. Gradijent mora biti ugniježđen u oznaci. Ta je oznaka tada označena u SVG oznaci da označi njezinu upotrebu. Pogledajmo primjer koji koristi Gradient u pomračenju.
Kodirati:
Sorry but this browser does not support inline SVG.
Izlaz:
Zaključak
U slučaju mjesta koja se koriste dijagrami i grafikoni, SVG-ovi su spasilački život. Većina modernih web preglednika također podržava SVG, a osim toga što ih je skalabilan. Još jedna prednost korištenja SVG-a je njegova veličina datoteke. Budući da je to samo malo koda, SVG-ovi mogu imati vrlo mali trag u potrošnji memorije i propusnog opsega u usporedbi s tradicionalnim slikama.
Preporučeni članci
Ovo je vodič za HTML SVG. Ovdje smo raspravljali o uvodu i prvih 10 primjera HTML SVG s objašnjenjem i implementacijom koda. Možete pogledati i sljedeće članke da biste saznali više -
- Html5 Novi elementi
- SVG vs EPS
- HTML Blokovi
- HTML okviri
