Lerret vs svg i html

SVG og lerret er begge HTML5 -teknologier som brukes til å lage grafikk, bilder og former. SVG og lerret er grunnleggende forskjellige, men begge brukes til å skape en utrolig visuell opplevelse. Denne oppskrivningen vil presentere en omfattende sammenligning av SVG- og lerretelementet. Dessuten gir det et par eksempler for en bedre forståelse av hvordan du bruker lerret og SVG i HTML.

Lerret

Canvas er et element i HTML som brukes til å tegne grafikken på nettsteder ved hjelp av JavaScript. Canvas regnes som en beholder, så uten JavaScript, kan vi ikke lage noen tegning i lerret.

1. Canvas har en veldig enkel og lettfattelig syntaks.
2. Canvas er et element i HTML som har mange metoder for å tegne linjer, sirkler, bilder osv.
3. Lerretbilder kan lagres i .png eller .JPG -format.
4. Det anbefales å bruke lerretgrafikk for spillapplikasjoner.
5. Canvas bruker Bitmap-bildeformat og blir referert til som pikselbasert teknologi.
6. Det er veldig avhengig av oppløsningene, derfor ikke anbefalt for store skjermer som Google Maps.
7. Lerret kan bare endres via skript, og det har ingen støtte for hendelsesbehandlerne.
8. Canvas gir bedre ytelse med mindre overflater eller et stort antall objekter.

Eksempel

Den undergitte koden vil gi en dyp forståelse av lerretet. Den vil beskrive hvordan du tegner en sirkel på lerret:

I ovennevnte utdrag er det for det første opprettet et lerretelement, og vi tildeler en ID til det. Neste, i JavaScript, benyttet vi GetElementById () -metoden for å finne lerretelementet. Etterpå opprettet vi et objekt ved hjelp av getContext () og til slutt tegnet vi et rektangel på lerretet:

Svg

SVG ble utviklet for å lage vektorgrafikk, og det er et XML-basert vektorbildeformat for interaktivitet.

1. I motsetning til lerret, er SVG oppløsningsuavhengig og skalerbar, så det anbefales å bruke på store skjermbrukergrensesnitt som Google Maps.
2. SVG -grafikk er mer fleksibel ettersom størrelsen kan utvides
3. SVG kan endres fra skriptet så vel som fra CSS
4. SVG gir støtte til hendelsesbehandlere.
5. SVG gir høy ytelse med store overflater eller et lite antall objekter.
6. SVG er ikke egnet for spillapplikasjoner.

Eksempel

Det undergitte utdraget viser hvordan du lager en sirkel i SVG:

SVG -bilde støttes ikke!

SVG -taggen spesifiserer bredde og høyde som 300px, og innen taggen bruker vi en tag. x (horisontalt) og y (vertikale) koordinater for sirkelen er satt som 100px og sirkelen til sirkelen er 50px.

Over kodebit genererer følgende utdata:

Den blåfargede SVG-sirkelen med et rødt slag verifiserer at SVG-grafikken er implementert.

Konklusjon

SVG og lerret brukes begge til å lage grafikk, bilder og former, men begge tar i bruk forskjellige tilnærminger. SVG er basert på skalerbar vektorteknologi, så den gir bilder av høy kvalitet mens lerret er pikselbasert teknologi Derfor hvis noen zoomer bildet, er det en mulighet for at det påvirker bildens kvalitet.