Sådan designes, kodes og animeres SVG'er

Du kan tænke på skalerbar vektorgrafik (SVG'er) som lydhør grafik. SVG er et XML-baseret format, der giver dig mulighed for at oprette et billede ved hjælp af definerede tags og attributter. Din kode gengiver et billede, som du kan redigere lige i din kodeditor.

Her er et eksempel på SVG. Hvis du ser på dens kode, vil du bemærke, at den består af tags og attributter, ligesom et HTML-dokument. Det hele er indeholdt i -tagget. Først er der et -tag med sorte streger og hvidt fyld. Og indeni der er der en ellipse (næsten en cirkel, men bemærk ry og rx-attributterne), der er fyldt med rød farve.

Vi kan bruge SVG på internettet på to måder. Vi kan bruge SVG-filer som src-attribut for tags. Så du kan have som du ville gøre med PNG'er og JPEG'er.

Men det mere interessante tilfælde (i tilfælde af at du har bemærket, at tags har en id-attribut som HTML) er, at vi direkte kan indsætte kilden til SVG i en

inde i vores HTML. Vi kan derefter style disse divs som individuelle byggeklodser - eller endda grupper af byggeklodser - som vi ønsker. Vi kan anvende CSS, animationer eller endda tilføje interaktivitet ved hjælp af JavaScript. Dette er hvad der gør SVG'er til et af de mest alsidige og hotteste elementer lige nu i HTML.

SVG'er er uendeligt skalerbare, lydhøre, har mindre filstørrelse, er fremtidssikre for næste generation af tætte skærme med bazillion-pixel og kan styles, animeres og interageres med brug af kendte webteknologier - nemlig CSS og JavaScript.

Bemærk, at alle disse ting tidligere kun var muligt med en Flash-indlejring - hvilket krævede en flash-afspiller og masser af specialiseret arbejde. Og der er ingen kærlighed der går rundt i Flash i disse dage.

Vector vs Raster-billeder

Rasterbilleder består af pixels for at danne et komplet billede. JPEG'er, GIF'er og PNG'er er almindelige rasterbilledtyper. Næsten alle de billeder, der findes på Internettet, er rasterbilleder.

Rasterbilleder består af et fast antal pixels, så det er ikke muligt at ændre størrelsen på dem uden at påvirke deres opløsning. Du har måske bemærket, at ændring af størrelse på de fleste billeder giver dem et kornet og sløret look. Det er på grund af deres faste pixeltælling.

Her er hvad der sker, når du zoomer ind på et rasterbillede:

Vektorbilleder er på den anden side fleksible og uafhængige af opløsningen. De er konstrueret ved hjælp af geometriske former - linjer, rektangler, kurver - eller en række kommandoer. Du kan redigere deres attributter, såsom farve, udfyldning og kontur.

En almindelig anvendelse til vektorbilleder er ikoner og små ikonanimationer. Disse vil fremstå skarpe, selv på skærme med den højeste tæthed, såsom kommende 4k smartphones.

Her er hvad der sker, når du zoomer ind på et vektorbillede:

SVG-tags

-koden integrerer et SVG-dokument i det aktuelle dokument, f.eks. HTML. Mærket har sine egne x- og y-koordinater, højde og bredde og sit eget unikke id.

Sådan ser et -mærke ud:

-taggen grupperer elementerne sammen og fungerer som en container til relaterede grafiske elementer. Et element kan endda indeholde andre elementer, der er indlejret i det.

Her er et eksempel på et -tag:

  baggrund      

Elementet er en SVG-grundform, der repræsenterer et rektangel. Elementet kan have forskellige attributter, såsom koordinater, højde, bredde, fyldfarve, stregfarve og skarpe eller afrundede hjørner.

Her er et eksempel på et -tag:

Elementet giver dig mulighed for at klone og genbruge de grafiske SVG-elementer inklusive andre elementer som såvel som andre elementer.

Her er et eksempel på et -tag:

 sort    rød    blå  

Elementet definerer en sti med koordinater for en form. Koden til stien tag kan virke kryptisk, men ikke blive truet. Følgende eksempelkode kan læses sådan:
1. “M150 o” - Gå til (150,0)

2. ”L75 200” - Tegn en linje til (75.200) fra sidste position (som var (150,0)

3. “L255 200” - Tegn en linje til (225.200) fra sidste position (hvilket var (75.200)

4. “Z” - Luk løkken (træk til udgangspunkt)

Du behøver sandsynligvis ikke at lære dette, da koden til sti kan genereres i enhver SVG-editor, men det er sejt at vide det.

Her er et eksempel på et tag:

  

Endelig definerer -elementet symboler, der kan genanvendes. Disse symboler kan kun gengives, når de kaldes af -elementet.

Her er et eksempel på et tag:

        

Oprettelse af SVG'er

Der er masser af SVG-redaktører tilgængelige som Adobe Illustrator og Inkscape, som er gratis og open source. Da SVG-filer er almindelig XML-tekst, kan du også kode en i en klemme.

Til dette eksempel bruger jeg en simpel online-editor, hvor du kan designe SVG'er uden at skulle installere noget.

  1. Opret først en cirkel

2. Tilføj derefter flere cirkler, og gem kildekoden

CSS3-animationer

SVG'er kan animeres ved at tilføje en id eller en klasse til SVG-stien i koden og derefter style den i CSS3 som ethvert andet dokument. Nedenfor er et eksempel på, hvordan SVG'er kan animeres.

CSS3-animation tilbyder en række animationstyper, som du kan vælge imellem. Line animation er en anden cool attribut af SVG.

For dette næste eksempel skrev jeg teksten "Hej, jeg er Surbhi" ved hjælp af pen i redigeringsprogrammet. Derefter brugte jeg CSS3 keyframes igen for at animere slagtilfældet.

Bemærk, at hver sti har et unikt id. Dette skyldes, at forsinkelsen i animationen er vigtig, når du animerer et slag med mere end et ord.

tag animationerne

er et animationsmærke indbygget i selve SVG-elementet. Den definerer, hvordan attributten for et element ændres fra den oprindelige værdi til slutværdien i den specificerede animationsvarighed. Dette bruges til at animere egenskaber, der ikke kan animeres af CSS alene.

De almindelige elementer i det animerede tag er farve, bevægelse og transformation.

Det animerede tag er indlejret inde i formmærket på det objekt, der skal animeres. Det fungerer ikke på stinkoordinaterne, men kun inden i objekttaggerne. Bemærk additivattributten. Det betyder, at animationerne ikke tilsidesætter hinanden, men i stedet fungerer sammen på samme tid.

Her er et eksempel på at animere en SVG ved hjælp af HTML5-animat-tagget:

JavaScript-baserede animationer og interaktivitet

Da SVG kun er et dokument med tags, kan vi også bruge JavaScript til at interagere med individuelle elementer i SVG'erne ved at få fat i deres vælgere (id eller klasse).

Bortset fra vanilla JS er der forskellige JavaScript-biblioteker til rådighed til at animere og interagere med SVG'er som Vivus.js, Snap.svg, RaphaelJS og Velocity.js.

I det følgende eksempel har jeg brugt biblioteket Vivus.js sammen med jQuery til at opnå en linjeslaganimation.

Hvorfor ikke bruge SVG'er til alle billeder?

SVG'er er mest velegnede til billeder, der kan konstrueres med få geometriske former og formler. Selvom du i princippet kan konvertere noget som dit foto til SVG, ville størrelsen på billedet være flere megabyte og således besejre det pladsbesparende formål med at bruge SVG'er. Du har det bedre med at bruge SVG'er til ikoner, logoer og små animationer.

Her er noget, jeg oprettede, mens jeg lærte om SVG'er, ved hjælp af CSS og SVG'er uden biblioteker. (Døm ikke!) Https://github.com/surbhioberoi/surbhi.me

Oprindeligt offentliggjort på surbhioberoi.com den 12. juli 2016.