Den beste måten å eksportere en SVG fra Sketch

Og hva du bør vite før du bruker Copy SVG Code.

Det er enkelt å eksportere en SVG-fil fra Sketch - men prosessen med å lage en effektiv og pålitelig SVG, tilpasset dine behov, er et langt større tema. Det er faktisk et så sammensatt tema at jeg har gjort et helt kurs om det, som jeg slipper i dag etter 8 måneders utvikling! Men denne artikkelen er ikke et salgssted; det er en teknisk guide til et vanlig spørsmål designere stiller.

Et vanlig spørsmål når jeg eksporterer SVG-er fra Sketch er: “Hvilken funksjon skal jeg bruke for å eksportere? Kopiere SVG-kode? Eksporter-knappen? Noe annet?"

Jeg har grundig undersøkt hver av disse funksjonene og samlet mine funn og anbefalinger for deg i denne artikkelen.

Når det gjelder bitmappformater, spiller det ingen rolle om du hadde lagene dine i en skive eller et Artboard; om du dro designen ut av laglisten for enkelhets skyld eller brukte Eksporter-knappen i inspektøren. Den endelige grafikken din vil være den samme.

Men SVG-er er forskjellige. De er beskrivelser av designen din, som inneholder massevis av informasjon om lagene dine. Og det er subtile måter disse beskrivelsene endres på, basert på hvordan du får SVG ut av skissen. Grafikken din vil se den samme ut, men koden under vil variere.

De viktigste variablene er:

Hvilken funksjon eksporterer
Bruker du Eksporter-knappen i inspektøren, funksjonen Kopier SVG-kode, eller drar du ut av forhåndsvisningen for lagliste eller inspektør?

Hva du eksporterer
Eksporterer du et tegnebrett, et lag eller en skive? Hvis du bare eksporterer utvalgte lag eller skiver, er de inneholdt i et tavle eller flyter rundt på lerretet?

Andre prosesser
Stoler du på Sketchs SVGO Compressor-plugin for å optimalisere filen?

Når de kombineres, tillater disse variablene minst et dusin måter å eksportere en SVG fra designen din. Så hva er best?

Take-Aways & Anbefalinger

I tilfelle du ikke bryr deg om de nitty-gritty tekniske detaljene, her er tipsene mine for SVG-eksportarbeidsflyten:

  • Artboards er nøkkelen. Ha alltid et tavle rundt lagene dine, og eksporter tavlen i stedet for lagene eller skivene inni det.
  • Bruk gjerne Eksporter-knappen i inspektøren eller Kopier SVG-kodefunksjonen i Rediger-menyen - men igjen, bruk dem på tavlen.
  • Kopier SVG-kode ekskluderer et par små ting du måtte ønske deg i SVG-for eksempel et tittelelement (for å forbedre tilgjengeligheten), eller en XML-erklæring (som er tilrådelig for SVG-er som brukes som uavhengig grafikk).
  • Hvis du liker å bruke Sketchs SVGO-kompressor-plugin, må du huske at den med vilje bare fungerer med Eksporter-knappen - ikke Kopier SVG-kode.
  • Ta en titt på hurtigtastene nedenfor for å øke effektiviteten!

For å forstå hvordan jeg kom til disse konklusjonene, og hva de spesifikke forskjellene er mellom hver eksportmetode, må vi forstå hvordan lag er plassert i en SVG.

"Jeg er derfra, men har flyttet hit"

Hver SVG har et rutenett, eller "koordinatsystem", der elementer er plassert. Dette er grunnleggende for hvordan SVGs fungerer.

SVG-er har også noe som heter en viewBox, og det er litt som et Artboard i Sketch. ViewBox bestemmer hvilken del av SVGs rutenett som vises i den endelige grafikken - alt inni vil være synlig, og alt utenfor vil bli beskåret ut.

Som en allment akseptert praksis er viewBox ofte plassert ved nettets opprinnelse. Med andre ord er det øverste venstre hjørnet av viewBox plassert på 0,0 (null på både x- og y-aksene). Det kan plasseres hvor som helst på nettet, men de fleste scenarier drar nytte av å holde seg til dette stevnet.

Når du eksporterer en grafikk fra Sketch (i hvilket som helst format), er det noen tilnærminger som lar deg, brukeren, definere dimensjonene til grafikken din, og andre der Sketch bestemmer dimensjonene for deg. Hvis du for eksempel eksporterer et tegnebrett eller et stykke, har du kontroll. Hvis du velger et hvilket som helst lag og klikker på Make Exportable, har Sketch kontroll og vil lage en grafikk som er nøyaktig størrelsen på laget du valgte (pluss skygger og rammer).

Hvis vi eksporterer bare dette røde rektangellaget som en SVG, vil det ikke være noen ekstra plass rundt rektangelet - viewBox vil være i samme størrelse som rektangelet. Så du kan forvente at Sketch plasserer både viewBox og rektangel på 0,0 i det nye SVGs rutenettet.

Ulempen med den tilnærmingen er at du mister informasjonen om hvor det rektangelet var plassert i tavlen. Heldigvis er Sketch enig i at posisjonene til SVG-elementene for det meste skal være de samme som lagene dine på et tavle.

Så når du eksporterer akkurat det røde rektangelet, oppretter Sketch en viewBox med rektangelets dimensjoner, men holder viewBox plassert på 0,0. Skisse respekterer også rektangelets opprinnelige plassering i Artboard, og bruker et triks for å flytte rektangelet over til 0,0 uten å endre kjerneposisjonsattributtene.

Det trikset kalles en translate transform. Det er mange typer transformasjoner, som skala og rotering, men oversettelse er den mest grunnleggende: den flytter ganske enkelt et element. Yup - “translate” er bare et fancy ord for “move.”

Det kan høres overflødig ut å lage et element på ett sted, og flytte det umiddelbart et annet sted. Men denne 2-trinns prosessen er nødvendig for å bevare rektangelets opprinnelige posisjonsinformasjon, samtidig som den overholder konvensjonen om å ha en viewBox plassert til 0,0 i SVGs nett. Dette kan høres ut som dumme grunner, men de kan være viktige når du faktisk jobber med SVG-koden. Her er et virkelighetsscenario:

Når oversettelse transformasjoner er nyttige

Etter min erfaring er det ett scenario når det er viktig å plassere SVG-elementer der de tilhørende Sketch-lagene pleide å være: når du endrer eller legger til lag i en eksisterende SVG-grafikk.

Se for deg at du har eksportert det stadig bedårende "Monsieur Whale" -ikonet som en SVG, og brukt tid på å optimalisere, finpusse og kanskje animere det eller plassere det i et spritesheet. Men så gjør du noen endringer….

Etter å ha endret munnveien og lagt sprøytelinjene, vil du integrere disse endringene i den nøye utformede SVG-en. Hvis du eksporterer eller bruker Kopier SVG-kode på bare de nye lagene, genererer Sketch en SVG som både er gyldig som en grafikk på egen hånd, og som også er brukbar for å kopiere en valgt del å innlemme i den opprinnelige SVG-en. Å gjøre det siste er enkelt fordi transformasjonen brukes på en gruppe; designelementene dine inne har originale posisjoner og er klare til å kopiere.

En rå forenkling av den nye SVG-koden:

  
    
    
    
    ...
  
(Fet = Modifikasjoner du vil kopiere tilbake til originalen)
De nye vektorstiene er plassert i samme SVG-rutenett som originalen, slik at de lett kan limes inn. Itertering på en SVG - selv etter at den har forlatt Sketch - blir nesten uanstrengt.

Jeg foreslår at du bare bruker denne arbeidsflyten per lag når du endrer en grafikk du allerede har laget. Som nevnt i Take-Aways-delen ovenfor, er det best å starte nye SVG-er ved å eksportere tegnebrettet - på den måten oversetter transformeringer ikke rotet ditt endelige SVG.

En merknad om optimalisering

Hvis du bruker Kopier SVG-kode for utvalgte lag og inkorporerer dem i en eksisterende SVG (som beskrevet ovenfor), må du være forsiktig når du legger den kopierte koden gjennom en optimalisering som SVGOMG.

Jeg er en stor tilhenger av SVGOMG, og dekker alle alternativene i løpet av meg, men noen optimaliseringer vil omorganisere eller flate ut som oversetter transformasjon - den som ikke skal kopieres når du tar inn et element tilbake i din eksisterende SVG . Optimaliseringer som Skjul ubrukelige grupper og Flytt attr fra grupper til elementer kan flytte transformattributtet til elementet du vil kopiere (i stedet for å legge det igjen i containergruppen). I så fall er det fremdeles ganske enkelt å slette. Men optimaliseringen av Round / Rewrite Paths kan flate transformasjonen til elementets vektorpunkter - og effektivt gjøre den permanent.

Det er ikke en dårlig ting å kjøre den kopierte SVG-koden din gjennom SVGOMG - bare sørg for at du fremdeles er i stand til å finne den oversette transformasjonen. Og hvis du kopierer lag som vil bli til elementer, er det bedre å kopiere hele tavlen slik at det ikke blir noen translatetransformasjon i det hele tatt.

Tastatursnarveier Tips

Hvis du begynner å bruke og elske Copy SVG Code, er her et tips for å gjøre arbeidsflyten enda mer effektiv.

Installer den fantastiske Sketch Commands-plugin; den legger til en funksjon for å velge tegnebrettet til laget du jobber med. Lag deretter egendefinerte tastatursnarveier i Systemvalg for den gjeldende Artboard-kommandoen og for Kopier SVG-kode. Tastene du velger er et spørsmål om personlig preferanse - jeg kartla disse for å skifte ⌘ A (erstatter henholdsvis Sketch's Select All Artboards-funksjon) og kontrollalternativ ⌘ S.

Disse nye snarveiene lar deg velge tegnebrettet i ett tastetrykk, og kopiere SVG-koden til en annen!

Hvordan hver metode fungerer

Hvis du er nysgjerrig på å vite de nøyaktige forskjellene mellom Sketchs eksportfunksjoner og alle de nevnte variablene, har jeg gjort resultatene fra testene mine tilgjengelige her:

Sketchs SVG-eksport har forbedret seg dramatisk det siste året - og til og med med de siste oppdateringene. Men visse beste fremgangsmåter forblir sanne: bruk alltid et tavle rundt lagene dine, og eksporter eller kopier tegnebrettet i stedet for individuelle lag eller skiver. Funksjonen Kopier SVG-kode er ikke lenger under Eksport-knappen. Hvis du vet når og hvordan du bruker den, kan det gi et betydelig effektivitetsøkning for designarbeidsflyten.

Denne artikkelen er inspirert av det nye kurset mitt SVG Workflows in Sketch. Jeg skulle ønske jeg hadde ressurser som dette da jeg lærte SVG, så jeg er fast bestemt på å skaffe noen av de manglende brikkene til andre designere. Kurset tar sikte på å bygge bro mellom det du vet i Sketch, og de fantastiske tingene du vil lage med SVG.

Du kan også registrere deg på nyhetsbrevet mitt for å være den første som vet når jeg publiserer nye designartikler og ressurser.