Hvordan designere skal tænke på SVG

De fantastiske ting, du vil oprette med SVG, hvordan det adskiller sig fra anden grafik, og hvorfor eksport kræver nye overvejelser.

Mens jeg forberedte mit nye kursus om SVG-arbejdsgange i Sketch, har jeg talt med en flok designere, både junior og senior, om deres brug af formatet. Og jeg har bemærket en almindelig misforståelse om SVG:

Vi forventer ofte, at SVG opfører sig som en bitmap-grafik - som en PNG med uendelig opløsning. Men det er det virkelig ikke.

For det første er visse ting vanskeligere med SVG. Eksport - eller mere specifikt processen med at gå fra Sketch * til en endelig grafik - kan tage alt fra et par sekunder til 10 minutter. Det afhænger af dit design, og hvordan du planlægger at bruge grafikken. For at oprette en SVG, der imødekommer dine behov perfekt, skal du muligvis tilpasse dine Sketch-lag på bestemte måder eller finpusse den eksporterede markering. Dette kan virke kompliceret og kedeligt, men det er ikke svært, og det åbner en verden af ​​muligheder for, hvordan du bruger en SVG.

For trods dets forskelle har SVG en overflod af fantastiske kvaliteter. Vi gennemgår dem først - fordi de er sjove - så adresserer vi hvordan man begynder at tænke praktisk på SVG.

* Bemærk: Selvom Sketch er mit valgte valg af design, gælder koncepterne i denne artikel lige på Adobe Illustrator og de fleste andre værktøjer.

En kort teknisk definition:

SVG står for skalerbar vektorgrafik. Det er et grafikformat som JPEG eller PDF, og hele ideen bag dem er, at de ikke er begrænset til en bestemt opløsning; fordi i stedet for at være lavet af pixels, er SVG'er lavet af vektorformer. Selvom de kan bruges forskellige steder, er SVG'er mest hjemme på nettet. Følgende eksempler viser sit potentiale.

Hvorfor er SVG så forbløffende?

Mange andre før mig har detaljeret fordelt fordelene ved SVG. (Hvis du er en webudvikler, skal du tjekke Chris Coyiers tale SVG er for alle for en mere teknisk oversigt.) I denne artikel vil jeg fremhæve fem centrale fordele, som de fleste designere vil bekymre sig om.

Enhver størrelse. Ingen pixelering.

SVG'er er som dine tegnebræt i sketch - selvom de har specifikke dimensioner, indeholder de også uendelige detaljer, fordi lagene / elementerne indeni er vektorformer. Så du kan vise en SVG-grafik i alle størrelser, og den vises aldrig pixeleret.

Små filstørrelser

Så længe du ikke bruger SVG'er til fotografier (det er hvad JPEG er til), optager det meste af tiden SVG'er dramatisk mindre plads end en PNG eller JPEG.

Det skyldes, at for et bitmap-billede (som en PNG eller JPEG), er den primære faktor, der bestemmer filstørrelsen, opløsning. Generelt vil et 3000 × 3000 pixel-billede altid være større end et 300 × 300-billede.

Men for en SVG er den primære faktor detaljer: hvor mange lag der er i grafikken, og hvor mange brugerdefinerede gradienter, masker eller effekter der skal beskrives. Dimensionerne på grafikken har næsten ingen indflydelse på filstørrelsen. For de fleste ikoner og andre designelementer er SVG en klar vinder, når det kommer til filstørrelse (og indlæsningstider).

Som en GIF er denne animation over 400 KB. Men som en SVG er det kun 3 KB!

Animeret og dynamisk grafik

Dette er en af ​​mine foretrukne ting ved SVG: Hvis du kender lidt til webudvikling, kan du animere SVG-grafik, som om de var nogen anden del af et websted. Og al den magiske kode kan være indeholdt i selve SVG-filen. Så du kunne have et lille 6 kilobyte-ikon, der kommer til live, som om det var en video.

Du kan endda gøre din grafik dynamisk, som et ur, der kan fortælle tidspunktet, eller et ikon, der matcher farven på enhver tekst, du lægger den ved siden af. SVG'er kan være lydhøre og ændre sig på forskellige måder afhængigt af skærmstørrelse eller pixeltæthed eller tonsvis af andre faktorer. Mulighederne er enorme, og de omdefinerer virkelig, hvordan vi tænker over, hvad en enkelt grafik kan være.

Spritesheets & Icon Sets

Jeg elsker ikoner, og i det sidste år eller to er der kommet flere teknikker til at kombinere flere ikoner i den samme SVG. Det betyder, at du kan placere et helt ikonsæt i en grafik. En lille fil! Denne form for grafik kaldes et spritesheet, og de er utroligt nyttige på Internettet.

Mange andre anvendelser

SVG-grafik kan bruges i en række andre situationer. Måske er du på udkig efter at oprette det fastgjorte faneikon til dit websted eller fremskynde processen med at generere ikonaktiver til din Android-app. Begge af disse understøtter eller kræver SVG, selvom deres strenge specifikationer kræver, at designere bruger specifikke arbejdsgange til at oprette dem (mere om arbejdsgange nedenfor).

Vent, hvordan er alt det muligt? Hvad er egentlig SVG?

For at forstå, hvordan SVG er i stand til så meget, er vi nødt til at opdele, hvordan det iboende er forskelligt fra bitmap-billeder.

Hvordan er SVG'er i modsætning til bitmaps?

Bitmap-grafik, også kendt som rastergrafik, er pixelbaseret. Dette inkluderer formater som JPEG, PNG og GIF. Under hætten er de stort set et gitter med farvede kasser.

For eksempel har dette 3px × 3px bitmap-billede ni pixels: ni farvede firkanter. Disse firkanter kan ikke ændres på nogen måde. De kan ikke afsløre flere detaljer, de kan ikke bevæge sig rundt, og de kan ikke blive til andre farver - de er permanente og vil altid indtage en vis mængde information. Forstør billedet forbi 100%, så vises pixelering.

Vektorgrafik som SVG'er er ikke lavet af farvede pixels; de er beskrivelser af din grafik. De ser sådan ud under hætten:

Da en SVG kun er en beskrivelse af grafikken, kan den vises i alle størrelser; en cirkel er stadig en "cirkel", uanset om den vises på 3 eller 3000 px. Og beskrivelser kan ændre sig. Enhver, der har brugt 15 minutter på at lære webudvikling, kan redigere beskrivelsen af ​​en SVG for at justere for eksempel farven på en form eller tykkelsen på en linje. På mange måder…

SVG'er er levende ting. Bitmaps er fotos af ting.

Det kan også være nyttigt at tænke over, hvad der sker, når du eksporterer fra Sketch. Bitmap-billeder udflader dit design i et enkelt lag. Den resulterende PNG eller JPEG kender ikke navnene på dine lag eller rigtig noget om, hvad de skildrer.

En SVG på den anden side er ikke flad. Det indeholder stadig alle dine lag og masser af oplysninger om dem. Når du eksporterer, forsøger Sketch at oversætte sin egen beskrivelse af dine lag til SVGs sprog. Det er derfor, lejlighedsvis ser SVG-versionen anderledes ud; en del af det, du lavede i Sketch, kunne ikke let beskrives på SVGs sprog.

Da en SVG stadig indeholder al / det meste af informationen om dine lag, kan du manipulere eller tilpasse disse lag til alle anvendelserne ovenfor: animationer, interaktive / dynamiske objekter, ikonsæt osv.

Men hvordan kommer vi derfra med vores Sketch-design?

Hvordan eksporterer Sketch SVG'er?

SVG er et af de formater, du kan vælge, når du eksporterer. Men de fleste af os - og jeg inkluderer mig selv i dette - begår den fejl at tro, at eksport af en SVG vil være så ubesværet som enhver anden type grafik. ”Vi eksporterer bare en 1x PNG, en 2x PNG og hey - hvorfor ikke eksportere også i vektor? SVG. Voila! Vi er færdige! ”Ikke?

Desværre ser den resulterende SVG ikke altid ud, som vi ønsker den, eller filstørrelsen er uforudsigelig, eller måske er filen ikke kompatibel med visse specifikationer, som vores udvikler eller en app kræver.

Dette er ikke Sketchs skyld. Sketch har konstant forbedret deres SVG-eksport, og det er nu ret godt.

Det virkelige spørgsmål er: med alle disse forskellige måder at bruge en SVG på, hvordan ved Sketch nøjagtigt, hvad de skal eksportere?

Det gør det ikke. Det kan ikke. Alt hvad enhver grafisk software kan gøre er at forsøge at oversætte dine lag så længe som muligt til SVG-lag. Hvordan du lavede noget i Sketch, er, hvordan Sketch vil prøve at eksportere det.

Der er visse måder, hvorpå en SVG kan kodes (med andre ord måder, hvorpå lag kan beskrives), der gør det specielt læsbart for udviklere, eller optimeret til små filer, eller let at animere eller passer ind i et ikonsæt. Og disse forskelle går ud over, hvordan det eksporteres; de bestemmes ofte af, hvordan dine lag er grundlæggende konstrueret i Sketch.

Det samme udråbsmærkeikon kunne være lavet af 2 separate standardformer (til venstre), en enkelt kombineret sti (centrum) eller en kantet lodret linje med et afrundet rektangel (højre). Der er også andre muligheder!

Med "konstrueret" mener jeg, hvordan du oprettede, kombinerede og stylede dine lag for at opnå et bestemt resultat. Dette udråbsmærkeeksempel ovenfor kunne laves på nogle få måder. Der er ikke altid en korrekt måde - alt afhænger af, hvordan du har til hensigt at bruge grafikken. Og det afhænger lejlighedsvis af, hvilke funktioner SVG understøtter. Her er et andet eksempel fra mit kursus:

I dette eksempel kunne det have været lettere i Sketch at oprette pinhead med 3 fyld. Men selvom radiale gradienter er godt understøttet i SVG, kræver blandingstilstande og flere udfyldninger pr. Form løsninger, der kan resultere i inkonsekvente resultater.

Ofte er den mest effektive eller bekvemme måde at mockupe en idé i Sketch ikke den mest effektive eller stabile måde at konstruere lagene til SVG på.
Så den første ting, jeg gør, når jeg vil eksportere noget fra Sketch til SVG, er at kopiere tegnebrættet. Det duplikat Artboard er hvor jeg foretager ændringer i lagene - ungroup dem, fjerne masker, flade transformeringer, skitsere tekst, justere rammer, omdøbe alt osv. - alt hvad der sikrer, at den resulterende SVG ser korrekt ud og imødekommer mit projekt behov.

Derfor sagde jeg i begyndelsen af ​​artiklen, at denne "eksport" -proces kan tage alt fra et par sekunder til 10 minutter. Det afhænger af dine specifikke lag og design, og hvordan du har til hensigt at bruge den resulterende SVG.

Du undrer dig sandsynligvis:

Hvad er alle de ændringer, jeg skal bruge til mine Sketch-lag for at producere det ultimative SVG?

Hvis der var et let svar, ville jeg fortælle dem. Sandheden er, at der er omkring et dusin bedste praksis, som jeg stoler på, når jeg tilpasser et Sketch-design til SVG. (Jeg henviste til nogle af dem ovenfor.) Men de er ikke alle nyttige i alle situationer. Jeg har udgivet en gratis web-app-tjekliste over disse bedste fremgangsmåder, og for at forklare årsagen bag dem var jeg nødt til at gå et helt kursus! Det er simpelthen mere, end jeg kunne få et par artikler.

Kurset - som nu er tilgængeligt efter 8 måneders udvikling - er beregnet til at gøre dig komfortabel med SVG, og alle de Sketch-arbejdsgange, du vil bruge til at blive en strømbruger.

Hvad kan du gøre anderledes?

Jeg giver dig et par praktiske tip og take-away.

  • Husk, at SVG'er er som levende ting, der er bestemt til forskellige steder og anvendelser. Som et resultat kan de ofte konstrueres på flere måder.
  • Hvis du ikke får de ønskede resultater, kan du prøve at lave grafikken på en anden måde. Hvis grænser for eksempel ikke ser rigtigt ud, kan du prøve at skitsere dem, før du eksporterer.
  • Medtag ikke bitmap-billeder i din SVG. De besejrer alle dens fordele.
  • Arbejd med en udvikler for at forstå formatet fra både design- og teknikperspektiver, så du ved, hvordan du arbejder det til dine behov.
  • Hvis du vil begynde at forbedre filstørrelsen på dine SVG'er, skal du installere Sketches SVGO-plugin (O står for optimering). Plugin, der kører i baggrunden, når du eksporterer en SVG, forsøger at krympe filen på forskellige små måder. Der er så meget mere, du kan gøre for at reducere en SVG-størrelse, men hvis du ikke er interesseret i at bruge noget tid, er dette plugin bedre end intet.

Uanset om det nye kursus er til dig, håber jeg, at denne artikel har klarlagt, hvad SVG er, hvad det er i stand til, hvordan det fungerer, og hvordan man tænker over det i forhold til andre grafikformater. God design!

Tilmeld mig mit nyhedsbrev for at være den første, der ved, når jeg udgiver nye designartikler og ressourcer.

Hvis du nød denne artikel, vil du elske Sketch Master - mine online træningskurser for fagfolk, der lærer Sketch. Du lærer masser af tricks og praktiske arbejdsgange ved at designe virkelige UI / UX og appikonprojekter.