Introduktion til HTML SVG
Brug af billeder i HTML er fantastisk til multimedierige websteder. Alt hvad du skal gøre er at tilføje et tag til HTML-koden og viola, din browser vil vise og endda tilføje et link til det valg af billede. Det bliver lidt foruroligende i situationer, hvor du ved, at billedet eller diagrammet vil blive zoomet ind, fordi en JPG.webp eller PNG ikke viser nogen yderligere detaljer, når det zoomes ind forbi dens opløsning. SVG er løsningen på dette problem. SVG står for skalerbar vektorgrafik. Som navnet antyder, kan disse zoomes ind så meget som nødvendigt, og detaljerne forsvinder aldrig. SVG'er er ikke eksklusive til webteknologi, men det er virkelig pænt at kunne bruge dem i HTML.
SVG er nyttigt til diagrammer, vektorer, diagrammer og grafer i browseren. Lad os lære om, hvordan du kan bruge dem i detaljer her.
Syntaks for indlejring af SVG i HTML
Similor til at bruge lærred i HTML5, der er et simpelt tag, som du kan bruge til at indlejre SVG på HTML5 sider. Syntaksen følger:
…. …. …. ….
Eksempler på SVG'er i HTML
Lad os nu se på nogle eksempler på vektorer, der kan oprettes og integreres i HTML5:
Eksempel # 1 - Tegning af et rektangel via SVG i HTML
Kode:
Sorry but this browser does not support inline SVG.
Produktion:
Eksempel 2 - Tegning af en firkant med afrundede hjørner i SVG
For en firkant med afrundede hjørner, bliver vi nødt til at definere hjørnens radius ved hjælp af rx, bortset fra kvadratets størrelse og dimensioner.
Kode:
Sorry but this browser does not support inline SVG.
Produktion:
Eksempel 3 - Tegning af en cirkel i SVG med kontur og farvearkivering inde i det
Kode:
Sorry but this browser does not support inline SVG.
Produktion:
Eksempel 4 - Tegning af en lige linje med SVG i HTML5
Vi kan bruge tagget til at tegne en lige linje i HTML5 SVG'er, farve, linjetykkelse og placering af den kan også defineres.
Kode:
Produktion:
Eksempel 5 - Tegning af en formørkelse via SVG i HTML5
Vi kan bruge tagget til at tegne en formørkelse i HTML5 SVG'er, farven og placeringen af det kan defineres sammen med matrisen med dens radius også.
Kode:
Sorry but this browser does not support inline SVG.
Produktion:
Eksempel 6 - Oprettelse af en polygon med SVG i HTML5
Mærket kan bruges i SVG'er til at oprette polygoner. I mærket skal vi nævne positionerne for hvert punkt. Påfyldning af farver, konturtykkelse osv. Kan også defineres i koden.
Kode:
Sorry but this browser does not support inline SVG.
Produktion:
Eksempel 7 - Oprettelse af en polyline med SVG i HTML5
Polyline bruges til at tegne en form, der kun vil bestå af en lige linje. Husk, at disse linjer også skal være forbundet. Her er et eksempel på en polylineimplementering i HTML5.
Kode:
Sorry but this browser does not support inline SVG.
Produktion:
Eksempel 8 - Tegning af tekst med SVG i HTML5
Tekst kan være nødvendigt i enhver SVG i mange situationer, såsom mærkning af et diagram osv. Heldigvis findes der et tag i SVG, som kan bruges. Teksten kan indstilles på enhver position i SVG, og du kan også tilpasse dens farve og andre detaljer.
Kode:
Here is an example, it's very examply
Sorry but this browser does not support inline SVG.
Produktion:
Eksempel # 9 - Tegning af en stjerne med SVG i HTML5
Nu hvor vi er færdige med det grundlæggende, lad os oprette en stjerne, der vil blive lavet ved hjælp af SVG.
Kode:
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.
Produktion:
Eksempel 10 - Brug af lineær gradient i SVG
Du kan bruge lineær og radial gradient i SVG meget HTML-lærred. Gradienten skal indlejres i tagget. Dette tag markeres derefter i SVG-tagget for at betegne dets anvendelse. Lad os se på et eksempel, der bruger Gradient i en formørkelse.
Kode:
Sorry but this browser does not support inline SVG.
Produktion:
Konklusion
For steder, hvor diagrammer og diagrammer skal bruges, er SVG'er en livredder. De fleste moderne webbrowsere understøtter SVG også og bortset fra at være skalerbare. En anden fordel ved at bruge SVG er dens filstørrelse. Da det kun er en smule kode, kan SVG'er have et meget lille fodaftryk i hukommelse og båndbredde sammenlignet med traditionelle billeder.
Anbefalede artikler
Dette er en guide til HTML SVG. Her diskuterer vi introduktionen og top 10 eksempler på HTML SVG med forklaring og kodeimplementering. Du kan også se på de følgende artikler for at lære mere -
- Html5 Nye elementer
- SVG vs EPS
- HTML-blokke
- HTML-rammer