Introduktion til SVG
Der er flere formater, i hvilke der kunne eksistere billeder, der varierer baseret på billedets egenskaber. Billedet kan være et uigennemsigtigt billede, det gennemsigtige og så videre, og alle sådanne funktioner på billederne kan defineres efter det format, det har. Nogle af de meget almindeligt anvendte formater af billeder er JPEG.webp, PNG, GIF osv. Blandt de forskellige formater er der en vigtig form, der oprettes ved hjælp af kodelinjen i XML eller HTML, kaldet SVG. I denne artikel lærer vi om SVG, hvordan det oprettes, hvilke ekstramateriale dette format har og lignende ting. Selvom det ikke er det almindeligt anvendte format af billederne, spiller det en vigtig rolle i den moderne webapplikation, der kræver kvalitet sammen med et attraktivt interface.
Definition af SVG
SVG står for skalerbar vektorgrafik. Det kan defineres som formatet på billeder, der er produceret ved hjælp af XML- eller HTML-tags. Det er meget nyttigt at designe todimensionel grafik og kan forbedre brugernes interaktionsoplevelse. Det blev udviklet af World Web Web Consortium tyve år tilbage i 1999. Den seneste version af SVG er 1.1, som blev frigivet i 2011. Det er meget forskellig fra billederne fra andre formater, da de krævede grafiske design applikationer skal designes, men grafikken med SVG-udvidelse er faktisk udviklet ved hjælp af koder eller tags. Det er meget interaktivt og kan tillade design af todimensionel grafik.
Et vigtigt punkt, man skal vide om skalerbar vektorgrafik, er, at det ikke kan downloades på lignende måde som JPEG.webp- eller PNG-formatbilleder. Når vi henter billeder med JPEG.webp- eller PNG-udvidelse, gemmer det en kopi af det billede, der kan redigeres ved hjælp af de grafiske designværktøjer som Adobe Photoshop, maling osv., Mens SVG-billedet kræves redigeret ved at ændre koder. I den moderne tidsalder, hvor webapplikationer formodes at være perfekte på enhver måde, tilføjer SVG-grafik en fantastisk kvalitet til det. Fra at designe blot en cirkel til at designe en kompleks grafik, skal man bruge tags, hvis de ønsker, at grafikken skal udvikles ved hjælp af SVG.
Hvordan gør SVG at arbejde så let?
Der er flere punkter, hvor SVG faktisk gør tingene meget nemme. Som vi diskuterede tidligere, er det meget nyttigt, når det kommer til at designe den webapplikation, der formodes at have en fantastisk udsigt. Grafikken oprettet med SVG-format gør det meget interaktivt for brugeren at arbejde med applikationen. Det er meget nyttigt, når du skal bruge den grafiske komponent overalt på webapplikationen. Sammen med HTML-koder skal man skrive SVG-mærket for at bringe dens funktionalitet på websiden. Hvis man ønsker at tegne den enkle grænseflade, kunne det gøres i få numre på linjen, men i tilfælde af, at grafikken formodes at være lidt kompliceret, vil det kræve, at der skrives en lang HTML- eller XML-kode. Ved at integrere de enklere grafiske komponenter som en cirkel, firkant, rektangel og så videre, kan man designe en kompleks grafik.
Arbejder med SVG
For at lære at arbejde med SVG vil vi gennemgå den linje med koder, der skal skrives for at udvikle SVG-grafikken. Vi vil overveje et eksempel, hvor vi designer en enkel cirkel med en rød farve udfyldt i den og med en sort kant. Vi skriver koder i HTML og bruger SVG-mærket til at introducere grafikken på websiden.
I ovenstående kode har vi skrevet SVG-grafik ved hjælp af SVG-tagget og dets vigtige attributter. I den første linje med SVG-mærket har vi nævnt cirkelens bredde og højde. På den anden linje har vi brugt cirkelmærket, der kan bruges som undermærket under SVG-mærket. Cx er attributten for cirkelmærket, der bruges til at definere, hvor mange pixels den cirkel skal dække i x-aksen. Cy er attributten for cirkelmærket, der bruges til at definere, hvor mange pixels den cirkel skal dække i y-aksen. Attributten r definerer cirkelens radius.
Slag definerer farven på grænsen, der er sort i vores tilfælde. Den næste attributstrækbredde definerer bredden på den cirkel, som man kan give i pixels. Den sidste attribut i cirkelmærket udfyldes, der bruges til at definere, hvilken farve der skal udfyldes i cirklen. Vi har valgt rødt, så i output kan du se, at cirklen har den røde farve udfyldt i den. Hvis du vil arbejde med SVG-koden, kan du bare kopiere koden fra ovenstående billede, gemme den med HTML-udvidelse og se, hvad du finder som output. Du kan fortsætte med at ændre dem for at lære eller udforske mere.
Nødvendige færdigheder
For at arbejde med SVG skal du vide, hvordan du arbejder med HTML-tags. I HTML implementeres det ved hjælp af SVG-mærket, som yderligere har de undermærker, der kan bruges under SVG-mærket for at designe grafikken. Hvis du allerede har arbejdet som en webapplikation designet, kan du have det nemt at arbejde med SVG. Selvom det ikke handler om at give strukturen på siden til at ændre udseendet på HTML-elementerne, har du brug for lidt øvelse, før du kan begynde at arbejde med SVG. Hvis du har en god idé om grafikdesign, vil det tilføje en kant, der får dig til at arbejde med eller lære SVG på kort tid.
Konklusion
Skalerbar vektorgrafik er det specielle format på billeder, der har to-dimensionel grafik. Baseret på kravet kan man bruge billeder med et hvilket som helst af formaterne, men ved hjælp af SVG vil det være en smule anderledes, da det er udviklet ved hjælp af kodelinjer snarere end ved hjælp af de grafiske designværktøjer. Det bruges hovedsageligt i webapplikationen, da det skal skrives ved hjælp af XML eller HTML-tagget. Man kan bruge det til at gøre webapplikationen temmelig interaktiv for at forbedre brugernes oplevelse.
Anbefalede artikler
Dette er en guide til Hvad er SVG. Her diskuterer vi definitionen, koncepter, arbejde og hvordan SVG gør arbejdet let. Du kan også gennemgå vores andre foreslåede artikler for at lære mere -
- Grid Layout i Java
- PHP-strengfunktioner
- Anvendelser af HTML
- Karriere i ASP.NET