Introduksjon til HTML SVG
Å bruke bilder i HTML er kjempebra for multimedia-rik nettsteder. Alt du trenger å gjøre er å legge til en kode til HTML-koden og bratsj, nettleseren din vil vise og til og med legge til en lenke til bildet du ønsker. Det blir litt urovekkende i situasjoner hvor du vet at bildet eller diagrammet vil bli zoomet inn fordi en JPG.webp eller PNG ikke vil vise ytterligere detaljer når det er zoomet inn forbi oppløsningen. SVG er løsningen på dette problemet. SVG står for skalerbar vektorgrafikk. Som navnet antyder, kan disse zoomes inn så mye som nødvendig, og detaljene forsvinner aldri. SVG-er er ikke eksklusivt for webteknologi, men det er veldig pent å kunne bruke dem i HTML.
SVG er nyttig for diagrammer, vektorer, diagrammer og grafer i nettleseren. La oss lære om hvordan du kan bruke dem i detalj her.
Syntaks for å legge inn SVG i HTML
I samsvar med å bruke lerret i HTML5, er det en enkel tagg som du kan bruke til å legge inn SVG på HTML5-sider. Syntaksen følger:
…. …. …. ….
Eksempler på SVG-er i HTML
La oss ta en titt på noen eksempelvektorer som kan opprettes og innebygdes i HTML5:
Eksempel 1 - Tegne et rektangel via SVG i HTML
Kode:
Sorry but this browser does not support inline SVG.
Produksjon:
Eksempel 2 - Tegning av en firkant med avrundede hjørner i SVG
For en firkant med avrundede hjørner, må vi definere hjørnens radius ved bruk av rx, bortsett fra størrelsen og dimensjonene på torget.
Kode:
Sorry but this browser does not support inline SVG.
Produksjon:
Eksempel 3 - Tegning av en sirkel i SVG med omriss og arkivering av farger inni seg
Kode:
Sorry but this browser does not support inline SVG.
Produksjon:
Eksempel 4 - Tegn en rett linje med SVG i HTML5
Vi kan bruke taggen til å tegne en rett linje i HTML5 SVGs, farge, tykkelse på linjen og plasseringen av den kan også defineres.
Kode:
Produksjon:
Eksempel 5 - Å tegne en formørkelse via SVG i HTML5
Vi kan bruke taggen til å tegne en formørkelse i HTML5 SVG-er, fargen og plasseringen til den kan defineres sammen med dens radius også.
Kode:
Sorry but this browser does not support inline SVG.
Produksjon:
Eksempel 6 - Opprette en polygon med SVG i HTML5
Koden kan brukes i SVG-er for å lage polygoner. I taggen må vi nevne posisjonene til hvert punkt. Fylling av farger, konturtykkelse, etc. kan også defineres i koden.
Kode:
Sorry but this browser does not support inline SVG.
Produksjon:
Eksempel 7 - Opprette en polyline med SVG i HTML5
Polyline brukes til å tegne en form som bare vil bestå av en rett linje. Husk at disse linjene også må være koblet til. Her er et eksempel på en polylineimplementering i HTML5.
Kode:
Sorry but this browser does not support inline SVG.
Produksjon:
Eksempel 8 - Tegne tekst med SVG i HTML5
Tekst kan være nødvendig i enhver SVG i mange situasjoner, for eksempel merke et diagram, etc. Heldigvis finnes det en kode i SVG som kan brukes. Teksten kan angis hvor som helst i SVG, og du kan også tilpasse fargen og andre detaljer.
Kode:
Here is an example, it's very examply
Sorry but this browser does not support inline SVG.
Produksjon:
Eksempel 9 - Å tegne en stjerne med SVG i HTML5
Nå som vi er ferdige med det grunnleggende, la oss lage en stjerne som vil bli laget med hjelp av 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.
Produksjon:
Eksempel 10 - Bruke lineær gradient i SVG
Du kan bruke lineær og radiell gradient i SVG mye HTML-lerret. Gradienten må nestes i koden. Denne koden merkes deretter i SVG-koden for å betegne bruken. La oss se på et eksempel som bruker Gradient i en formørkelse.
Kode:
Sorry but this browser does not support inline SVG.
Produksjon:
Konklusjon
Når det gjelder nettsteder der diagrammer og diagrammer skal brukes, er SVG-er en livredder. De fleste moderne nettlesere støtter SVG også og bortsett fra å være skalerbare. En annen fordel med å bruke SVG er filstørrelsen. Fordi det bare er litt kode, kan SVG-er ha et veldig lite fotavtrykk i minnet og båndbredden sammenlignet med tradisjonelle bilder.
Anbefalte artikler
Dette er en guide til HTML SVG. Her diskuterer vi introduksjonen og topp 10 eksempler på HTML SVG med forklaring og kodeimplementering. Du kan også se på følgende artikler for å lære mer -
- Html5 Nye elementer
- SVG vs EPS
- HTML-blokker
- HTML-rammer