Sketches strålende nye måde at eksportere grænser på som SVG

Sketch er netop frigivet version 43, og der er en forbedring, der er så bemærkelsesværdig, at jeg har brug for råb fra tagene med glæde.

Det har at gøre med eksport af SVG'er.

SVG er et strålende og kapabelt grafikformat, men det har endnu ikke understøttet inden for eller uden for grænser.

Som et resultat skal enhver designsoftware, der eksporterer SVG, løse dette problem:

Hvis dit design bruger inden for eller uden for grænser, hvordan kan disse lag gendannes på en identisk, men alligevel SVG-venlig måde?

Der har været tre hovedmetoder:

  1. Skitse grænserne: vend dem til udfyldte figurer i stedet for linjer.
  2. Skift til midterste kanter, men opret en maske, der skjuler den indre eller ydre halvdel.
  3. Skift til centrerede rammer, og flyt derefter manuelt punkterne i stien (let for basale figurer, tidskrævende for buede eller kombinerede figurer).

Alternativ 1 producerer en pålidelig identisk SVG, men har et par ulemper, såsom en større filstørrelse. Mere om disse ulemper i “Side note” nedenfor.

Valgmulighed 2 øger både SVG's kompleksitet og filstørrelse og er tilbøjelig til at bryde (ser ikke pålideligt ud som dit design).

Alternativ 3 producerer rene SVG'er, små filstørrelser og pålideligt identiske resultater. Selvom dette helt klart er den bedste mulighed, kan det være tidskrævende at manuelt genskabe ikke-basale former før eksport (som vist nedenfor).

Valgmulighed 3: At genskabe en indvendig / udvendig kant identisk - men med en centreret kant - kræver ofte at flytte hvert vektorpunkt, hvilket er besværligt med komplekse former.

Før vi går videre, er det vigtigt at bemærke, at SVG bruger udtrykket slagtilfælde i stedet for grænsen. De er faktisk den samme ting, men jeg prøver at bruge ramme, når jeg taler om Sketch (dvs. et lag, før det er blevet eksporteret) og slagtilfælde, når jeg taler om SVG (det eksporterede resultat).

Hvilke muligheder bruger forskellige designværktøjer?

Adobe Illustrator skitserer inden for / uden for grænser under SVG-eksport, Figma bruger en forvirrende kombination af skitsering og maskering, Affinity Designer bruger skitsering, og - før version 43 - Skitse anvendt maskering.

Her er den store nyhed:

Skitse gør nu mulighed 3 automatisk for dig under SVG-eksport.

Fra version 43 rekonstruerer Sketch laget og dets kant til at være perfekt identiske, mens man bruger centrerede SVG-streger.

Ingen anden designsoftware gør dette, og det har gjort Sketches SVG'er langt mere pålidelige og mindre i filstørrelse.

Jeg har testet Sketch 43 i de sidste par uger og eksporteret tonsvis af SVG'er, og denne nye funktion har fungeret godt. I et design bemærkede jeg en sjælden bug, hvor en genskabt SVG-sti fra en ydre grænse havde et ekstra vektorpunkt - men det var let at arbejde omkring, og Sketch-teamet er opmærksom på fejlen.

Side note: Jeg er altid overrasket over, hvor mange mennesker, der fremmer tanken om, at SVG'er ikke burde have slagtilfælde - at de altid skal skitseres, som beskrevet ovenfor i valgmulighed 1. Som en altomfattende erklæring er det simpelthen ikke sandt. Visse programmer, der accepterer SVG'er, kan kræve dette, men skitsering af grænser har ulemper: især øges det filstørrelse og forhindrer dig i at ændre stregbredde senere. Desuden har skitserede rammer ( elementer) nøjagtig den samme browserstøtte som SVG-streger, og skitsering er ikke påkrævet for at bruge CSS til at ændre farven på et ikon. Jeg diskuterer dette mere på mit nye kursus i Sketch & SVG.

Kun for SVG Nerds ...

Hvis du nogensinde har åbnet en SVG for at se eller redigere dens kode (eller, "markup"), er der en ting mere, du skal vide om Sketchs nye grænsefunktion.

Når et lag i Sketch har en kant og en udfyldning, ændres SVG-markeringen en smule. Forestil dig, at laget er en lysegrøn cirkel med en grøn kant. Hvis denne grænse er centreret, placerer den resulterende SVG en udfyldning og en stregattribut på det samme -element, som du kunne forvente. Men hvis grænsen er inden for eller uden for, ændres SVG-markeringen markant: Skitse adskiller udfyldningen og streget i separate -elementer. Derudover flyttes den cirkel, der er ansvarlig for udfyldningen, ind i -elementet og henvises senere til et -element. Her er et forenklet eksempel:

Udfyld + centreret kant:
(Dette er, hvad du ville forvente.)


  
    

Udfyld + indvendig / udvendig kant:
(Virker ikke dette lidt overdreven?)


  
     
  
  
    
     
  

Der kan være meget sjældne tilfælde, hvor du ønsker separate SVG-elementer til din udfyldning og kant, men disse kan let forberedes som 2 lag før eksport. Det meste af tiden ønsker du bare, at din SVG-grafik skal være identisk med dit Sketch-design og have den mindst mulige filstørrelse.

Som du kan se i kodestykkerne ovenfor, vil lag med en udfyldning + inden / udvendig kant altid være større i filstørrelse end dem med centrerede rammer. Men der er også en anden ulempe: antialiaserende artefakter omkring den delte kant af grænsen og fyldlag.

Med andre ord, det visuelle udseende af dit design ændres faktisk, når du adskiller et slag / kant og en udfyldning i diskrete elementer. Det skyldes, at de har de samme kanter, og selvom det ser ud til at være lufttæt, trækker baggrundsfarverne igennem, når en computer gengiver designet til pixels for at vises på din skærm. Det får ganske enkelt dine ikoner eller grafik til at se dårligt ud.

Sådan rettes dette:

Hvis du er fortrolig med at redigere SVG-kode, er løsningen temmelig enkel: tilføj fyldattributten til elementet med et strejke, og slet derefter fyld -elementet og hvad det refererede til i . Resultatet er identisk, men har ikke antialiaseringsproblemet, og det bruger betydeligt mindre kode:


  
    

For at være klar er dette et meget mindre problem, og det er helt valgfrit at rette det. Din SVG vises pålideligt på begge måder. Og det er ikke teknisk en fejl - jeg har diskuteret alt dette med Sketch-teamet, og de har besluttet at holde sig til deres tilgang i øjeblikket. Mine forslag er "en optimering" for folk, der ønsker perfekt visuel og mindre filstørrelse.

Et værktøj, der gør dette for dig!

Jeg har oprettet en simpel web-app kaldet SVGito, der udfører denne udfyldning + grænseoptimering (sammen med et par andre Sketch-relaterede SVG-optimeringer) automatisk til dig. Brug af det er så simpelt som at indsætte i din SVG-markering og derefter kopiere den optimerede version!

Du kan lære mere om det og de optimeringer, der er inkluderet, i denne artikel.

Det er ikke beregnet til at erstatte andre SVG-optimizers, som Sketches SVGO-plugin eller SVGOMG, men snarere at give dig yderligere optimeringer, som du ikke finder i de andre. SVGito er tilgængelig nu, og ja - det er gratis. :)

Sketch 43's forbedringer strækker sig ud over denne fantastiske SVG-grænsefunktion, så sørg for at tjekke deres artikel om, hvad der er nyt.

Jeg har lige udgivet mit nye kursus, SVG Workflows in Sketch, der inspirerede denne artikel i første omgang. Det dykker ud på alle de måder, du kan forberede dine lag til at imødekomme SVG's begrænsninger, det grundlæggende om, hvordan SVG fungerer under hætten, avancerede tricks til at arbejde med vektorformer, og hvordan du optimerer den SVG, du eksporterer, så den passer perfekt til din projekt.

Tak for at have læst!

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.