6 grunde til, at du skal bruge SVG

6 grunde til, at du skal bruge SVG

Skalerbar vektorgrafik (SVG'er) er billedtyper, der er universelt understøttet på alle desktop- og mobilbrowsere. Fordelene ved at bruge dem til web- og app-design er enorme - lad os tale dig gennem de seks største grunde.

01. Det er løsningsuafhængigt og lydhørt

Billeder kan skaleres på samme måde, som vi skalerer alle andre elementer i lydhør webdesign . På grund af SVG's vektorkarakter er billedet uafhængig af opløsning. Billedet ser skarpt ud på enhver skærm, fra de smukke ~ 285 ppi pixeldensitetsskærme, der findes på nye smartphones, til ~ 85 ppi standardskærme.

Ved hjælp af SVG kan vi stoppe med at oprette ‘@ 2x. png ’billeder (medmindre du har brug for at understøtte IE8) og oprette en fil til alle vores ikoner. SVG-billeder kan også skaleres på samme måde, som vi skalerer alle andre elementer i responsivt design.

Prisvindende Sarah Drasners websted gør stor brug af SVG

Prisvindende Sarah Drasners websted gør stor brug af SVG

02. Den har en navigerbar DOM

SVG inde i browseren har sin egen DOM. SVG behandles som et separat dokument af browseren og placeres derefter inde i den normale DOM på siden. Dette er vigtigt for egenskaben 'viewBox', da vi kan tegne vores billede på et lærred af enhver størrelse, men derefter vise det i browseren hos en anden uden at opdatere egenskaberne inde i SVG. Denne separate, navigerbare DOM er også, hvordan vi interagerer med elementer i SVG ved hjælp af CSS og JavaScript.

03. Det kan animeres

Elementer inde i SVG kan animeres for at skabe nogle virkelig fantastiske interaktive oplevelser, eller animationen kan bruges til at tilføje pæne, små detaljer til en grænseflade, et billede eller et ikon. Animation kan oprettes ved hjælp af CSS, Web Animations API i Javascript eller ved hjælp af SVG's ' Tag.

SVG animation er på et interessant punkt i udviklingen. Google udfasede SMIL - SVG's animerede tag - i Chrome 45 til fordel for CSS-animationer og Web Animations API, men har siden suspenderet afviklingen.

04. Det er stil-stand

Ved hjælp af klasse navne eller ID'er kan du kun style elementer inde i SVG ved kun at bruge lidt forskellige egenskaber end dem, vi normalt ville bruge; i stedet for 'farve' bruger vi 'udfyld', og i stedet for kant bruger vi 'streg'. Der er nogle grænser for styling af SVG, der kommer fra, hvordan du bruger SVG på siden.

Hvis du bruger en SVG som et billedtag, kan du ikke style elementerne inde i Internet Explorer. Der er dog en polyfyldning - svg4everybody - som løser dette problem.

Bliv en rejsende i dag SVG-animation

05. Det er interaktivt

Ved hjælp af JavaScript kan vi interagere med elementer inde i SVG takket være den navigerbare DOM. Dette giver os mulighed for at oprette interaktive elementer ved hjælp af SVG på samme måde som med HTML og CSS.

hvordan man skaber dybde i illustratoren

Vi kan også anvende animationer via JavaScript ved hjælp af den nye Web Animations API, der tillader programmering af både enkle og komplekse interaktioner og animationer. Der er også et antal JavaScript-biblioteker, vi kan bruge, som er oprettet for at fremskynde SVG-arbejdsgange.

06. Små filstørrelser

På grund af SVG's vektorkarakter (som et billede trukket fra et sæt koordinater) er deres filstørrelser, når de er optimeret små, sammenlignet med næsten enhver anden billedfiltype. Der er en række måder at optimere SVG fra kommandolinjeværktøjer til manuelt at fjerne punkter og grupper, men SVGOMG har en GUI og masser af muligheder for at finjustere, der viser dig visuelt de ændringer, der foretages under optimering.

Da SVG'er kan være lydhøre, animerede og komplekse, er der ingen grund til, at du ikke skal bruge dem til store heltebilleder eller billeder på et blogindlæg eller andre online medier.

Designere - bliv relevante og effektive

Se Dan Mall på Generate New York

Det er ikke længere nok at være Photoshop-mester. Designere har brug for at udvide deres færdigheder for at forblive relevante og effektive, men hvilke er det værd at fokusere på? Bør designere lære at kode, og i så fald kan begrænset kodeviden virkelig gøre en forskel i at arbejde med talentfulde ingeniører? Hvordan kan designere passe ind i Agile arbejdsgange? Betyder projektmetoden overhovedet noget? Hvilken rolle har en designer i at skabe, bruge og vedligeholde designsystemer?

SuperFriendly Director Dan Mall vil dele historier og perspektiver for at besvare disse spørgsmål og mere i sin tale på Generer New York fra 25-27 april 2018 .

Få din billet nu

Denne artikel opstod oprindeligt i nummer 267 af Web Designer, det kreative magasin, der tilbyder ekspertvejledninger, banebrydende funktioner og vigtige ressourcer. Abonner i dag.

Relaterede artikler: