HTML SVG tutvustus
Piltide kasutamine HTML-is on multimeediumirikaste veebisaitide jaoks fantastiline. Peate vaid lisama HTML-koodile sildi ja vioola, brauser kuvab teie valitud pildi ja lisab sellele isegi lingi. See tekitab pisut muret olukordades, kus teate, et pilti või diagrammi suurendatakse, kuna JPG.webp või PNG ei näita enam üksikasju, kui see on oma resolutsioonile eelneval suumitud. SVG on lahendus sellele probleemile. SVG tähistab skaleeritavat vektorgraafikat. Nagu nimigi ütleb, saab neid suumida nii palju kui vaja ja üksikasjad ei kao kunagi. SVG-d ei ole ainuüksi veebitehnoloogia jaoks, kuid nende HTML-is kasutamise võimalus on tõesti puhas.
SVG on kasulik brauseri diagrammide, vektorite, diagrammide ja graafikute jaoks. Siit saate teada, kuidas saate neid üksikasjalikult kasutada.
SVG HTML-i manustamise süntaks
Lõuendi HTML5-vormingus kasutamise lihtsustamiseks on olemas lihtne silt, mille abil saate SVG-d HTML5-lehtedele manustada. Süntaks on järgmine:
…. …. …. ….
HTML-i SVG-de näited
Vaatame nüüd mõnda näidet vektoritest, mida saab luua ja HTML5-sse manustada:
Näide nr 1 - ristküliku joonistamine SVG kaudu HTML-is
Kood:
Sorry but this browser does not support inline SVG.
Väljund:
Näide 2 - ümardatud nurkadega ruudu joonistamine SVG-s
Ümarate nurkadega ruudu korral peame nurkade raadiuse määrama ruudu suuruse ja mõõtmete kõrval rx, ry abil.
Kood:
Sorry but this browser does not support inline SVG.
Väljund:
Näide 3 - ringi joonistamine SVG-s, mille sees on kontuur ja värvilahendus
Kood:
Sorry but this browser does not support inline SVG.
Väljund:
Näide 4 - SVG-ga sirge joone joonistamine HTML5-s
Sildi abil saab HTML5 SVG-des sirgjoont tõmmata, määratleda saab ka värvi, joone paksuse ja asukoha.
Kood:
Väljund:
Näide # 5 - varjutuse joonistamine SVG kaudu HTML5-s
HTML5 SVG-desse saab eclipse'i joonistamiseks kasutada silti, selle värvi ja asukoha saab määratleda ka stantsi ja raadiusega.
Kood:
Sorry but this browser does not support inline SVG.
Väljund:
Näide 6 - SVG-ga polügooni loomine HTML5-s
Märgendit saab SVG-des kasutada hulknurkade loomiseks. Sildis peame märkima iga punkti asukoha. Koodis saab määratleda ka täitevärvid, kontuuri paksuse jms.
Kood:
Sorry but this browser does not support inline SVG.
Väljund:
Näide # 7 - polügooni loomine SVG-ga HTML5-s
Polüliiniga joonistatakse kuju, mis koosneb ainult sirgjoonest. Pidage meeles, et ka need liinid peavad olema ühendatud. Siin on näide polüeliini rakendamisest HTML5-s.
Kood:
Sorry but this browser does not support inline SVG.
Väljund:
Näide # 8 - SVG-ga teksti joonistamine HTML5-s
Tekst võib paljudes olukordades olla vajalik ükskõik millises SVG-s, näiteks diagrammi märgistamisel jne. SVG-s on õnneks olemas silt, mida saab kasutada. Teksti saab seada SVG suvalisse kohta ja saate kohandada ka selle värvi ja muid üksikasju.
Kood:
Here is an example, it's very examply
Sorry but this browser does not support inline SVG.
Väljund:
Näide nr 9 - Tähe joonistamine SVG abil HTML5-s
Nüüd, kus põhitõed on lõppenud, loome tähe, mis valmib SVG abiga.
Kood:
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.
Väljund:
Näide # 10 - Lineaarse gradiendi kasutamine SVG-s
SVG-line HTML lõuendis saate kasutada lineaarset ja radiaalset gradienti. Gradient peab olema sildis pesastatud. Seejärel märgitakse see silt SVG-sildisse, et tähistada selle kasutamist. Vaatame näidet, mis kasutab Gradienti eclipse'is.
Kood:
Sorry but this browser does not support inline SVG.
Väljund:
Järeldus
Saidide puhul, kus tuleb kasutada diagramme ja diagramme, on SVG-d elupäästjad. Enamik tänapäevaseid veebibrausereid toetab ka SVG-d ja on skaleeritav. Veel üks SVG kasutamise eelis on faili suurus. Kuna tegemist on vaid natuke koodiga, võib SVG-dega võrreldes traditsiooniliste piltidega olla väga väike mälumaht ja ribalaius.
Soovitatavad artiklid
See on HTML SVG juhend. Siin käsitleme HTML SVG sissejuhatust ja 10 parimat näidet koos selgituse ja koodi rakendamisega. Lisateabe saamiseks võite vaadata ka järgmisi artikleid -
- Html5 uued elemendid
- SVG vs EPS
- HTML-plokid
- HTML-raamid