Hvordan (og hvorfor) SVG skal ta over i 2018

/2019-11-08 21:00:22/
Irving
/Grafikk/

2018 blir SVGs år. Bildefilformatet har vokst i popularitet og bruk jevnlig de siste årene, men 2018 er da det virkelig vil slå igjennom.

Du har en kombinasjon av brukere med høyoppløselige skjermer og behovet for en lynrask belastningstid for å takke. Og mens overgangen til SVG kan høres ut som en stor sak; det er ikke.

SVG er enkel å bruke og implementere, og du trenger ikke å endre eksisterende filer; bare legg til nye bilder som SVG. Her er alt du trenger å være kjent når det gjelder SVG.

Utforsk designressurser

SVG er laget for nettet

Mozilla beskriver det slik:

SVG er et XML-basert språk for å beskrive vektorbilder. Det er i utgangspunktet markering, som HTML, bortsett fra at du har mange forskjellige elementer for å definere figurene du vil vises i bildet ditt, og effektene du vil bruke på disse figurene. SVG er for å merke opp grafikk, ikke innhold. I den enkleste enden av spekteret har du elementer for å lage enkle former, som og. Mer avanserte SVG-funksjoner inkluderer (transformer farger ved hjelp av en transformasjonsmatrise, ) (animer deler av vektorgrafikken din) og (bruk en maske på toppen av bildet.)

Sentrale fordeler med SVG for webdesignere inkluderer muligheten til å lage enkle SVG-gjengivelser i en kode eller tekstredigerer, mens kompleks grafikk kan tegnes i et program som Adobe Illustrator; SVG-tekst er tilgjengelig; SVG-er er enkle å style og manus; og du lager med et vektorformat som gjengis godt i alle størrelser. SVG-formater støttes av moderne nettlesere, er fremtidssikre og meget komprimerbare.

Noen av ulempene er at utforming av SVG-er kan bli komplisert og er litt vanskeligere å lage i utgangspunktet. Det andre problemet er at noen degraderte nettlesere bare ikke forstår hva de er.

Trenger du en bedre forståelse av SVG? Vi har en nybegynnerguide til SVG.

Hvordan designere bruker SVG

En av fordelene med SVG er at du kan gjøre mange forskjellige ting med det. SVG kan brukes til:

logoer
Bakgrunner, mønstre og teksturer
animasjon
Responsive bilder
ikoner

Designere kan bruke SVG for et hvilket som helst element i et design der et vektorformat er en relevant løsning. Kan erstatte JPG, PNG og GIF, blant andre formater.

Vektorformater regel

Det er en god sjanse for at du bruker flere vektorformater. SVG er uavhengig av oppløsning. Og det er en enorm bonus fordi du vet at bildene dine vil se bra ut hvor som helst.

Det som er spesielt fint med å jobbe med SVG-bilder er at du ikke virkelig trenger å endre arbeidsflyten for å implementere dem. Hvis du designer i programvare som Illustrator eller Sketch, er prosessen - annet enn endelig eksport - identisk. Den første fangsten er at du sannsynligvis vil gjøre tekstelementer om til konturer i Illustrator, men mange gjør det allerede.

Når du prepper SVG-filer, er det en nøkkel ting å huske. For å holde dem så bittesmå som mulig, sørg for å slette søppel som du ikke trenger. (Fjern det skiltet!) SVG på nettet har noen gode tips for å tegne elementer og lagre SVG-filer på best mulig måte.

Tekstbasert format er bra for SEO

Å bruke SVG kommer med litt av en bonus for kunnskapsrike designere i søkemotoren også. Fordi SVG bruker faktisk tekst i formateringen, kan søkemotorer bedre lese bildene.

Ja, du kan legge til alt informasjon med andre bilder, men det er bare så mye rom for nøkkelord. Med SVG kan du lage mer søkevennlige bilder og bare laste opp. Google indekserer alt SVG-innhold, inkludert frittstående filer og når SVG-er er innebygd direkte i HTML.

SVG er lett

I motsetning til noen andre vektorbaserte filtyper som kan bli tunge fort, er SVG-er kode. Koden er rask. Så enkelt er det. Vel… nesten.

Når det gjelder de fancy vektortegningene du har lagret som SVG, må du sjekke filstørrelsene før du kommer for langt. Mens PNG-formater kan vokse nesten eksponentielt når transparens legges til, har SVG-er en tendens til å vokse basert på antall stier og fyll i bildet.

Hvis SVG er enorm, bør du vurdere å eksportere den og en JPG eller PNG. (Selv om det virker motstridende. Realiteten er at de fleste designere vil fortsette å bruke en blanding av filtyper med bilder; bare forvent å bruke mer SVG enn du har gjort tidligere.)

Redigering er enkelt

Hvis du er vant til å tegne ikoner eller logoer eller hva som helst i programvare for vektortegning, endres ingenting om redigeringsprosessen for deg.

Men hvis du skriver SVG, er du inne på en godbit. Bare endre ordet eller koordinater eller farge i tekstredigeringsprogrammet og bom, endringen er gjort. Det er vanskelig å gjøre redigering noe enklere enn det.

Lag stillbilder eller animerte bilder med SVG

I motsetning til de fleste andre bildeformater, som lar deg ha et stillbilde eller et bevegelig bilde, tillater SVG det. Du kan lage et stillbilde eller en animasjon. Og det hele fungerer stort sett på samme måte. (Dette praktfulle eksemplet er en tutorial om hvordan du animerer et element langs en SVG-bane!)

Disse små fordelene er med på å skyve SVG i forkant av designernes sinn. Du trenger ikke å lære et nytt verktøy eller teknikk; du har allerede alt du trenger til rådighet hos SVG.

Konklusjon

Her er den store grunnen til at 2018 blir året SVG begynner å overta: det er praktisk.

Med alle som bruker høyoppløselige skjermer, er vektorformater virkelig veien å gå. Alt skalerer feilfritt, og du trenger ikke å bekymre deg for pixelering. SVG-er lager flotte logoer (statiske eller responsive), grafer og bakgrunner, ikoner og små bilder og animasjoner. Filene er små og lastes raskt, og det er ikke en enorm læringskurve når det gjelder implementering av SVGer i webdesignen din.

Du kan bokstavelig talt begynne å bruke SVG-bilder akkurat nå.