Med Figmas nye SVG-eksport, mindre = mere

Hvorfor vi flyttede væk fra SVG-romaner

Billede oprettet til Figma af Peter Herbert Barnaba

Her er en stor lektion, vi har lært siden lanceringen af ​​samarbejdsdesignværktøj Figma: når det kommer til SVG Export, er mindre mere. I lang tid sidder vi så meget information som muligt i vores SVG-filer i håb om, at det ville hjælpe andre værktøjer med at gengive og importere design nøjagtigt.

Drivet af feedback fra vores samfund har vi haft en ændring i hjertet og har gradvist finjusteret Export-formatet i de sidste par måneder. Som vores udgivelsesnotat-junkies har bemærket, er vores SVG'er nu enklere, mere kompakte og kompatible med flere værktøjer (som Android Studio). Læs videre for en hurtig primer på SVG og detaljer om, hvad vi ændrede.

Hvorfor værktøjer gengiver de samme SVG'er så forskelligt

SVG - der står for skalerbar vektorgrafik - er et stadig mere populært billedformat til 2D-vektorgrafik. Det fremkom i 2001 som en åben specifikation, der primært var beregnet til brug i webbrowsere. I modsætning til traditionelle bitmap-billedformater som JPG og PNG, der bliver slørede, når de ændres i størrelse, er SVG designet til altid at forblive krystalklar.

Det skyldes, at SVG'er effektivt er instruktioner, der beskriver, hvordan man male et billede fra bunden, mens bitmappebilleder er statiske snapshots af det endelige resultat. SVG er perfekt til aktiver som logoer og ikoner på nettet, hvor de muligvis vises overalt fra en enorm skærm til en netopskærm med høj opløsning på en telefon.

Her er dog gnider: der er ingen standardiseret måde at konvertere SVG-markeringen til pixels på skærmen.

Her er dog gnider: der er ingen standardiseret måde at konvertere SVG-markeringen til pixels på skærmen. De fleste værktøjer har deres egne brugerdefinerede SVG-importører eller -udbydere, og kvaliteten af ​​disse implementeringer varierer meget. SVG-specifikationen er også tilstrækkelig kompliceret til, at de fleste værktøjer kun forstår en undergruppe og har fejl, selv når de håndterer den delmængde, som de hævder at understøtte.

For eksempel har SVG en flot funktion, der giver dig mulighed for at definere instruktioner i en -blok og henvise dem gentagne gange til -elementet. Da vi lærte den hårde måde, understøtter Android Studio ikke dette i de fleste tilfælde.

Ud over at kvæle mange importører oppustede vores komplicerede og udvendige markup også filstørrelsen og gjorde output vanskeligt at fordøje for mennesker. Mange af vores brugere havde ty til efterbehandling med værktøjer som SVGO og svgito eller, endnu værre, ved manuelt at rense filen op for hånd.

Fra Figmas SVG-naivitet ... til vores nye pragmatiske tilgang

Folk har bedt om mindre, enklere SVG'er fra Figma i lang tid. Vi modsatte os at foretage ændringen, fordi vi håbede, at SVG ville blive de facto dataoverførselsformat mellem designværktøjer. I denne utopi kunne du nemt sprede din designarbejdsgang over forskellige designværktøjer afhængigt af, hvad der var den bedste pasform til hvert trin.

Vi accepterer nu, at det var en smule pie-i-himmel-naivitet, og vores nye SVG-eksportør tager en mere pragmatisk tilgang.

Lad os starte med et tilsyneladende uskyldigt eksempel: en ramme, der indeholder et enkelt sort rektangel med en grå inderslag.

Med vores gamle SVG-eksportør genererede vi denne pinlige roman:


 Ramme 
 Oprettet ved hjælp af Figma 




















Efter meget hårdt arbejde har vi formået at presse alt dette ned til en tweet:



Lad os gennemgå de større ændringer én efter én:

primitiver

Til enkle figurer som rektangler og cirkler bruger vi nu de let forståelige SVG-form primitiver i stedet for kryptiske stier.

Indvendige / udvendige slagtilfælde

Da SVG kun understøtter center-streger, har designværktøjer været nødt til at udtænke forskellige løsninger for at simulere streger inden for og uden. Tidligere gjorde vi det ved at bruge centerstrøg med en fordoblet slagbredde. Det svarer visuelt til at have både et indvendigt og udvendigt slag, så vi brugte en til at skjule den unødvendige halvdel. Denne fremgangsmåde oppustede filstørrelsen kraftigt og komplicerede markeringen.

Vi forsøger nu at justere punkterne i stien, så det visuelle resultat ligner et indvendigt eller udvendigt slag, mens vi bruger center-streger med den originale slagbredde. For eksempel kan et rektangel med et indre streg repræsenteres som mindre rektangel med et centralt slag.




Minimal markering

Vi udsender ikke længere rent oplysende elementer som og <g> eller attributter som id og version.</p><p>Vi tilføjede også nogle smarts for at undgå markering, når de ikke har nogen effekt. F.eks. Brugte vi altid en <clipPath> til klippede rammer, men nu gør vi det kun, når klipning faktisk er nødvendig.</p><p>Endelig tegner vi nu SVG-elementer, hvor vi tidligere havde en <brug> henvisning til et dedupliceret element defineret i <defs> -blokken. Selvom vi mistede deduplicering, viser det sig, at den forenklede struktur faktisk reducerer den samlede filstørrelse i de fleste tilfælde. Dette gælder især, når SVG'erne komprimeres med noget som gzip.</p><p>Eksportindstillinger</p><p>De nye standarder for SVG Export er optimeret til de mest almindelige brugspriser. For eksempel vil de fleste af vores brugere ikke gå glip af id-attributterne, men for dem af jer der gør det, gik vi videre og tilføjede en mulighed. Vi har også en mulighed for at kontrollere markeringen for streger og tekstobjekter.</p><p>Vi håber, at Figmas nye korte 'n søde SVG'er har behandlet dig godt. Hvis du har feedback, så lad os vide det i kommentarerne herunder!</p></div><div class="neighbor-articles"><h4 class="ui header">Se også</h4><a href="/design/gravit-designer-3-1-just-landed-4f8463/" title="Gravit Designer 3.1 er lige kommet i land">Gravit Designer 3.1 er lige kommet i land</a><a href="/design/5-myths-about-design-management-b3af27/" title="5 myter om designstyring">5 myter om designstyring</a><a href="/design/the-one-minute-presentation-test-8c64ec/" title="Præsentationstesten på 1 minut">Præsentationstesten på 1 minut</a><a href="/design/one-video-article-or-side-project-can-change-your-life-1f498e/" title="Én video, artikel eller sideprojekt kan ændre dit liv.">Én video, artikel eller sideprojekt kan ændre dit liv.</a><a href="/design/beyond-engagement-the-content-performance-quotient-8b64e8/" title="Beyond Engagement: Content Quotient for indholdsresultater">Beyond Engagement: Content Quotient for indholdsresultater</a></div></main><div class="push"></div></div><footer style="height:50px">highresolution-wallpapers.net<!-- --> © <!-- -->2019<!-- --> <a href="https://el.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e" title="https://highresolution-wallpapers.net">highresolution-wallpapers.net</a></footer></div></div></div><script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script><script> window.cookieconsent.initialise({ "palette": { "popup": { "background": "#eaf7f7", "text": "#5c7291" }, "button": { "background": "#56cbdb", "text": "#ffffff" } }, "showLink": false }); </script><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-3845662922897763", enable_page_level_ads: true }); </script></body></html>