SVG i HTML | Opplæring med eksempler

HTML5 gir SVG (Acronym of Scalable Vector Graphics) -teknologi for å tegne todimensjonal vektorbasert grafikk på nettsteder. I motsetning til andre bildeformater (for eksempel PNG, JPG, etc.) SVG er ikke avhengige av pikslene i stedet den bruker vektortata.

World Wide Web Consortium (W3C) anbefaler SVG -teknologi for å tegne grafikk på et nettsted. I HTML Tag brukes som en beholder for SVG -grafikk og ved hjelp av SVG kan vi tegne stier, sirkler, rektangler osv. Denne oppskrivningen vil guide deg om hvordan du jobber med SVG-bilder og presenterer en detaljert oversikt i følgende aspekter:

• Grunnleggende om SVG
• Hvordan tegne SVG -linjen i HTML
• Hvordan tegne SVG -sirkel i HTML
• Hvordan tegne SVG rektangel i HTML
• Hvordan tegne SVG avrundet rektangel i HTML
• Hvordan tegne SVG -polygon i HTML
• Hvordan tegne SVG Eclipse HTML

Så la oss starte!

Grunnleggende om SVG

Skalerbar vektorgrafikk Bestem XML-baserte vektorgrafikk/bildeformater for webteknologiene. SVG -filer kan animeres, og vi kan integrere dem med andre W3C -standarder som DOM og XSL. SVG gir bilder av høy kvalitet i.e. Hvis noen zoomer inn i et SVG -bilde, ville ikke kvaliteten på bildet bli berørt.

Hvordan tegne SVG -linjen i HTML

HTML -tag kan brukes i Tag for å tegne en linje. Det undergitte eksemplet lar deg forstå hvordan du tegner en SVG-linje i HTML.

Eksempel

Følgende kode trekker en enkel linje:

SVG -linjen støttes ikke!

Her i ovennevnte utdrag er X1, Y1 startpunktene på linjen, og X2, Y2 er sluttpunktene på linjen. Mens vi spesifiserer linjens farge i stilattributtet:

Utgangen verifiserer at en blåfarget linje trekkes i henhold til stillingene som er satt av dens attributter.

Hvordan tegne SVG -sirkel i HTML

HTML -tag kan brukes i Tag for å tegne en sirkel.

Eksempel
Det undergitte utdraget lar deg veilede for å lage en SVG-sirkel:

SVG -sirkelen støttes ikke!

Vi spesifiserte verdien av henholdsvis x-aksen og y-aksen som 40 og 50 sammen med radius på 30 piksler. Følgende vil være utgangen:

Utgangen verifiserer at sirkelen er tegnet i blå farge og fylt med grå farge.

Hvordan tegne SVG rektangel i HTML

Taggen kan brukes i taggen for å tegne et rektangel.

Eksempel

Følgende kodebit Angir bredden, Høyden på SVG -rektangelet som henholdsvis 250, 100 og rektangelet vil bli fylt med den grå fargen.

Vi spesifiserte slagfarge og slagbredde som henholdsvis blå og 5. Følgende vil være utgangen:

Hvordan tegne SVG avrundet rektangel i HTML

Vi må spesifisere RX, RY -attributter i TAG for å tegne avrundede hjørner SVG rektangel.

Eksempel

La oss utvide det forrige eksemplet litt og angi verdien av Rx, RY som 10px for å tegne de avrundede hjørnene på SVG -rektangelet:

Ovennevnte kodebit viser følgende utdata:

Hvordan tegne SVG -polygon i HTML

HTML gir en tag for å tegne en form som har minst 3 sider. Et attributt som heter “Poeng” kan brukes til å spesifisere x-aksen og y-aksen på alle sidene.

Eksempel

La oss vurdere følgende kodebit for å forstå hvordan du angir x-aksen og y-aksen til en form:

Tag kan brukes til å tegne forskjellige former som en SVG -stjerne, eller annen lukket form.

Hvordan tegne SVG Eclipse HTML

Tag brukes til å tegne en formørkelsesform, den ligner veldig på sirkelen. SVG -sirkelen har en lik horisontal og vertikal radius, men i formørkelsen er den horisontale og vertikale radius forskjellig fra hverandre.

Eksempel

Den undergitte utdraget viser hvordan du tegner en formørkelse i HTML hvor RX = “150” er den horisontale radius og ry = “75” er den vertikale radius av formørkelse:

Ovennevnte kodebit viser følgende resultat:

Den blåfargede grensen/hjerneslaget og gråfylt formørkelsesform bekreftet at taggen fungerte ordentlig.

Konklusjon

Denne oppskrivningen demonstrerte hvordan du tegner grunnleggende SVG-bilder i HTML. Inne i taggen kan forskjellige tagger brukes til å tegne forskjellige SVG -bilder som ,,,, og tagger kan brukes til å tegne henholdsvis SVG -linjer, sirkler, rektangler, polygoner og formørkelsesform. Innenfor disse taggene kan forskjellige attributter som hjerneslag og slagbredde brukes til å sette formenes grense og bredde.