De beste manier om een ​​SVG vanuit Sketch te exporteren

En wat u moet weten voordat u SVG-code kopiëren gebruikt.

Het exporteren van een SVG-bestand vanuit Sketch is eenvoudig - maar het proces van het maken van een efficiënte en betrouwbare SVG, afgestemd op uw behoeften, is een veel groter onderwerp. Het is eigenlijk zo'n complex onderwerp dat ik er een hele cursus over heb gemaakt, die ik vandaag na 8 maanden ontwikkeling vrijgeef! Maar dit artikel is geen verkooppraatje; het is een technische gids voor een veelgestelde vraag die ontwerpers stellen.

Een veelgestelde vraag bij het exporteren van SVG's vanuit Sketch is: “Welke functie moet ik gebruiken om te exporteren? SVG-code kopiëren? De knop Exporteren? Iets anders?"

Ik heb elk van deze functies grondig onderzocht en mijn bevindingen en aanbevelingen voor u in dit artikel verzameld.

Als het gaat om bitmapindelingen, maakt het niet uit of u uw lagen in een segment of een tekengebied had; of u het ontwerp voor uw gemak uit de Lagenlijst hebt gesleept of de knop Exporteren in het infovenster hebt gebruikt. Uw uiteindelijke afbeelding zal hetzelfde zijn.

Maar SVG's zijn anders. Het zijn beschrijvingen van je ontwerp, met tonnen informatie over je lagen. En er zijn subtiele manieren waarop die beschrijvingen veranderen op basis van hoe u de SVG uit Sketch haalt. Uw afbeeldingen zien er hetzelfde uit, maar de onderstaande code kan variëren.

De belangrijkste variabelen zijn:

Welke functie doet het exporteren?
Gebruikt u de knop Exporteren in de Inspector, de functie SVG-code kopiëren of sleept u uit de exportlijst van de Lagenlijst of de Inspector?

Wat u exporteert
Exporteert u een tekengebied, een laag of een segment? Als u alleen geselecteerde lagen of segmenten exporteert, bevinden ze zich dan in een tekengebied of zweven ze rond in het canvas?

Andere processen
Vertrouw je op de SVGO Compressor-plug-in van Sketch om het bestand te optimaliseren?

In combinatie bieden deze variabelen minimaal een dozijn manieren om een ​​SVG uit uw ontwerp te exporteren. Dus wat is het beste?

Take-Aways & Aanbevelingen

Als u niet geïnteresseerd bent in technische details, zijn hier mijn tips voor uw SVG-exportworkflow:

  • Tekengebieden staan ​​centraal. Plaats altijd een tekengebied rond uw lagen en exporteer het tekengebied in plaats van de lagen of plakjes erin.
  • Gebruik de knop Exporteren in de Inspector of de functie SVG-code kopiëren in het menu Bewerken - maar gebruik ze opnieuw op uw tekengebied.
  • Kopieer SVG-code sluit een paar kleine dingen uit die u misschien in uw SVG wilt, zoals een titelelement (om de toegankelijkheid te verbeteren) of een XML-verklaring (wat aan te raden is voor SVG's die als onafhankelijke grafische afbeeldingen worden gebruikt).
  • Als u de SVGO Compressor-plug-in van Sketch graag wilt gebruiken, onthoud dan dat deze opzettelijk alleen werkt met de knop Exporteren en niet met SVG-code kopiëren.
  • Bekijk de onderstaande tip voor sneltoetsen om uw efficiëntie te vergroten!

Om te begrijpen hoe ik tot deze conclusies ben gekomen en wat de specifieke verschillen zijn tussen elke exportmethode, moeten we begrijpen hoe lagen in een SVG zijn geplaatst.

"Ik ben van daar, maar ik ben hierheen verhuisd"

Elke SVG heeft een raster of 'coördinatensysteem' waarin elementen worden geplaatst. Dit is van fundamenteel belang voor de manier waarop SVG's werken.

SVG's hebben ook iets dat een viewBox wordt genoemd, en het lijkt een beetje op een tekengebied in Sketch. De viewBox bepaalt welk deel van het raster van de SVG in uw definitieve afbeelding wordt weergegeven: alles binnenin is zichtbaar en alles buiten wordt uitgesneden.

Als een algemeen aanvaarde praktijk wordt de viewBox vaak op de oorsprong van het raster geplaatst. Met andere woorden, de linkerbovenhoek van de viewBox staat op 0,0 (nul op zowel de x- als de y-as). Het kan overal op het rooster worden geplaatst, maar de meeste scenario's profiteren ervan om zich aan deze conventie te houden.

Bij het exporteren van een afbeelding uit Sketch (in elk formaat), zijn er enkele benaderingen waarmee u, de gebruiker, de afmetingen van uw afbeelding kunt definiëren, en andere waarin Sketch de dimensies voor u bepaalt. Als u bijvoorbeeld een tekengebied of een segment exporteert, heeft u de controle. Als u een laag selecteert en op Exporteerbaar maken klikt, heeft Sketch de controle en maakt een afbeelding die exact de grootte heeft van de geselecteerde laag (plus de schaduwen en randen).

Als we alleen deze rode rechthoeklaag als een SVG exporteren, is er geen extra ruimte rond de rechthoek - de viewBox heeft dezelfde grootte als de rechthoek. Je zou dus verwachten dat Sketch zowel de viewBox als de rechthoek op 0,0 in het nieuwe SVG-raster plaatst.

Het nadeel van die benadering is dat u de informatie verliest over waar die rechthoek in het tekengebied was geplaatst. Gelukkig is Sketch het erover eens dat de posities van uw SVG-elementen grotendeels hetzelfde moeten zijn als uw lagen in een tekengebied.

Dus bij het exporteren van alleen die rode rechthoek, maakt Sketch een viewBox met de afmetingen van de rechthoek, maar houdt de viewBox op 0,0. Sketch respecteert ook de oorspronkelijke positie van de rechthoek in het tekengebied en gebruikt een truc om de rechthoek naar 0,0 te verplaatsen zonder de kenmerken van de kernpositie te wijzigen.

Die truc wordt een vertaaltransformatie genoemd. Er zijn veel soorten transformaties, zoals schaal en roteren, maar vertalen is de meest elementaire: het verplaatst eenvoudig een element. Yup - "vertalen" is gewoon een fraai woord voor "verplaatsen".

Het klinkt misschien overbodig om een ​​element op één plaats te maken en het vervolgens onmiddellijk ergens anders te verplaatsen. Maar dit tweestapsproces is noodzakelijk om de oorspronkelijke positie-informatie van de rechthoek te behouden, terwijl ook wordt vastgehouden aan de conventie van het hebben van een viewBox op 0,0 in het raster van de SVG. Dat klinkt misschien als dwaze redenen, maar ze kunnen belangrijk zijn wanneer u daadwerkelijk met de SVG-code werkt. Hier is een realistisch scenario:

Wanneer vertaaltransformaties nuttig zijn

Mijn ervaring is dat er één scenario is waarin het essentieel is om SVG-elementen te positioneren op de plaats waar hun bijbehorende schetslagen zich bevonden: wanneer u lagen wijzigt of toevoegt aan een bestaande SVG-afbeelding.

Stel je voor dat je het immer schattige pictogram 'Monsieur Whale' als een SVG hebt geëxporteerd en tijd hebt besteed aan het optimaliseren, aanpassen en misschien animeren of in een spritesheet plaatsen. Maar dan breng je enkele wijzigingen aan….

Na het veranderen van het pad van de mond en het toevoegen van de spuitlijnen, wilt u die veranderingen weer opnemen in uw zorgvuldig ontworpen SVG. Als u SVG-code kopiëren of alleen op de nieuwe lagen gebruikt, genereert Sketch een SVG die zowel geldig is als een grafische afbeelding en ook bruikbaar is voor het kopiëren van een select gedeelte om terug te nemen in uw originele SVG. Het laatste doen is eenvoudig omdat de transformatie wordt toegepast op een groep; uw ontwerpelementen binnenin hebben hun oorspronkelijke posities en zijn klaar om te kopiëren.

Een grove vereenvoudiging van de nieuwe SVG-code:

  
    
    
    
    ...
  
(Vet = wijzigingen die u terug naar het origineel zou kopiëren)
De nieuwe vectorpaden bevinden zich allemaal in hetzelfde SVG-raster als het origineel, zodat ze gemakkelijk kunnen worden geplakt. Het herhalen van een SVG - zelfs nadat het Sketch is verlaten - wordt bijna moeiteloos.

Ik stel voor om alleen deze workflow per laag te gebruiken bij het wijzigen van een afbeelding die je al hebt gemaakt. Zoals vermeld in het gedeelte Take-Aways hierboven, is het het beste om nieuwe SVG's te starten door het Artboard te exporteren - op die manier vertaalt transformaties je riante SVG niet.

Een opmerking over optimalisatie

Als u SVG-code kopiëren gebruikt voor geselecteerde lagen en deze opneemt in een bestaande SVG (zoals hierboven beschreven), wees dan voorzichtig wanneer u die gekopieerde code door een optimizer zoals SVGOMG plaatst.

Ik ben een grote fan van SVGOMG, en behandel alle opties in mijn cursus, maar sommige optimalisaties zullen de transformatie van transformatie herschikken of afvlakken - degene die niet zou moeten worden gekopieerd wanneer je een element terug in je bestaande SVG opneemt . Optimalisaties zoals nutteloze groepen samenvouwen en attrs verplaatsen van groepen naar elementen kunnen het transformattribuut verplaatsen naar het element dat u wilt kopiëren (in plaats van het in de containergroep te laten). In dat geval is het nog steeds vrij eenvoudig te verwijderen. Maar de optimalisatie van Round / Rewrite Paths kan de transformatie in de vectorpunten van dat element afvlakken - waardoor het effectief permanent wordt.

Het is geen slechte zaak om uw gekopieerde SVG-code door SVGOMG te laten lopen - zorg er gewoon voor dat u die vertaaltransformatie nog steeds kunt vinden. En als u lagen kopieert die in -elementen veranderen, kunt u beter het hele tekengebied kopiëren, zodat er helemaal geen vertaaltransformatie is.

Sneltoetsen Tip

Als u SVG-code kopiëren en gebruiken gaat gebruiken, is hier een tip om uw workflow nog efficiënter te maken.

Installeer de geweldige Sketch Commands-plug-in; het voegt een functie toe om het tekengebied te selecteren van de laag waarmee u werkt. Maak vervolgens aangepaste sneltoetsen in Systeemvoorkeuren voor die huidige tekenopdracht en voor SVG-code kopiëren. De toetsen die u kiest, zijn een kwestie van persoonlijke voorkeur. Ik heb deze in kaart gebracht om ⌘ A te vervangen (ter vervanging van Sketch’s Select All Artboards-functie) en besturingsoptie ⌘ S, respectievelijk.

Met deze nieuwe snelkoppelingen kunt u het tekengebied in één toetsaanslag selecteren en de SVG-code naar een andere kopiëren!

Hoe elke methode werkt

Als je nieuwsgierig bent naar de exacte verschillen tussen de exportfuncties van Sketch en alle bovengenoemde variabelen, heb ik de resultaten van mijn tests hier beschikbaar gesteld:

De SVG-export van Sketch is het afgelopen jaar enorm verbeterd - en zelfs met de laatste paar updates. Maar bepaalde best practices blijven waar: gebruik altijd een tekengebied rond uw lagen en exporteer of kopieer het tekengebied in plaats van afzonderlijke lagen of segmenten. De functie SVG-code kopiëren is niet langer inferieur aan de knop Exporteren; als u weet wanneer en hoe het te gebruiken, kan het uw ontwerpworkflow aanzienlijk verbeteren.

Dit artikel is geïnspireerd op mijn nieuwe cursus SVG Workflows in Sketch. Ik wou dat ik dit soort bronnen had toen ik SVG aan het leren was, dus ik ben vastbesloten om sommige van die ontbrekende stukken aan andere ontwerpers te bieden. De cursus is bedoeld om de kloof te overbruggen tussen wat je weet in Sketch en de verbazingwekkende dingen die je met SVG maakt.

Je kunt je ook aanmelden voor mijn nieuwsbrief om als eerste te weten wanneer ik nieuwe designartikelen en bronnen publiceer.