S novim SVG izvozom tvrtke Figma, manje = više

Zašto smo se odmaknuli od SVG romana

Slika koju je za Figmu stvorio Peter Herbert Barnaba

Evo jedne velike lekcije koju smo naučili od pokretanja alata za kolaborativni dizajn Figma: kada je u pitanju SVG Export, manje je više. Dugo smo ugrađivali što više podataka u naše SVG datoteke, nadajući se da će to pomoći drugim alatima da precizno izvedu i uvedu nacrte.

Potaknute povratnim informacijama iz naše zajednice, promijenili smo srce i postepeno mijenjali izvozni format u posljednjih nekoliko mjeseci. Kao što su primijetili naši narkomani sa izdanjem, naši SVG-ovi sada su jednostavniji, kompaktniji i kompatibilniji s više alata (poput Android Studio-a). Pročitajte brzi primer na SVG-u i detalje o tome što smo promijenili.

Zašto alati prikazuju iste SVG-ove tako različito

SVG - što znači skalabilna vektorska grafika - sve je popularniji format slike za 2D vektorsku grafiku. Pojavila se 2001. kao otvorena specifikacija namijenjena prvenstveno uporabi u web preglednicima. Za razliku od tradicionalnih formata bitmap slike poput JPG i PNG koji postaju mutni kada se mijenjaju, SVG je dizajniran tako da uvijek ostane kristalno čist.

To je zato što su SVG-ovi učinkovito upute koje opisuju kako slikati ispočetka, a bitmapske slike statični su snimci konačnog rezultata. SVG je savršen za sadržaje poput logotipa i ikona na webu, gdje bi se mogli prikazati bilo gdje od ogromnog monitora do zaslona mrežnice visoke rezolucije na telefonu.

Evo tu poteza: ne postoji standardizirani način pretvaranja SVG oznake u piksele na zaslonu.

Evo tu poteza: ne postoji standardizirani način pretvaranja SVG oznake u piksele na zaslonu. Većina alata ima svoje prilagođene SVG uvoznike ili dobavljače, a kvaliteta ovih implementacija uvelike varira. SVG specifikacija je također dovoljno složena da većina alata razumije samo podskup i ima greške čak i kada se bave podskupom za koju tvrde da podržava.

Na primjer, SVG ima sjajnu značajku koja vam omogućuje definiranje uputa u bloku i upućivanje na njih više puta s elementom . Kako smo naučili na teški način, Android Studio to u većini slučajeva ne podržava.

Osim što su ugušili mnoge uvoznike, naša komplicirana i vanjska oznaka također je naduvala veličinu datoteke i otežala probavu rezultata za ljude. Mnogi naši korisnici pribjegli su naknadnoj obradi alata kao što su SVGO i svgito ili, što je još gore, ručnom čišćenju datoteke rukom.

Od Figminog SVG naive… do našeg novog pragmatičnog pristupa

Ljudi već duže vrijeme traže male, jednostavnije SVG-ove od Figme. Odupirali smo se promjeni jer smo se nadali da će SVG postati de facto format prijenosa podataka između alata za dizajn. U ovoj utopiji lako možete širiti svoj tijek dizajna kroz različite alate za dizajn, ovisno o tome što je najbolje odgovaralo svakoj fazi.

Sada prihvaćamo da je to bila pomalo pive u nebu, a naš novi SVG izvoznik zauzima više pragmatičan pristup.

Da bismo razumjeli poboljšanja, započnimo s naizgled nevinim primjerom: okvirom koji sadrži jedan crni pravokutnik sa sivim unutarnjim potezom.

S našim starim izvoznikom SVG stvorili smo ovaj neugodni roman:


 Okvir 
 Napravljeno pomoću Figma 




















Nakon mnogo napornog rada, uspjeli smo sve to prešutnuti na tvit:



Idemo proći kroz veće promjene jednu po jednu:

primitivci

Za jednostavne oblike poput pravokutnika i krugova, sada koristimo razumljive primitive SVG oblika umjesto kriptičnih staza.

Unutarnji / vanjski potezi

Budući da SVG podržava samo središnje poteze, alati za dizajn morali su osmisliti različita načina za simulaciju poteza unutar i izvan. Prije smo to učinili pomoću središnjih poteza s udvostručenom širinom hoda. To je vizualno isto što i unutarnji i vanjski hod, pa smo pomoću sakrili nepotrebnu polovicu. Ovaj pristup uvelike povećao veličinu datoteke i komplicirao označavanje.

Sada pokušavamo prilagoditi točke na putu tako da će vizualni rezultat sličiti unutarnjem ili vanjskom hodu, dok se koriste središnji potezi s izvornom širinom hoda. Na primjer, pravokutnik s unutarnjim hodom može se prikazati kao manji pravokutnik sa središnjim hodom.




Minimalna markacija

Više ne objavljujemo čisto informacijske elemente poput i <g> ili atribute poput id i verzije.</p><p>Također smo dodali neke pametne podatke kako bismo izbjegli markiranje kada nemaju učinka. Primjerice, uvijek smo ispisivali <clipPath> za obrezane okvire, ali sada to radimo samo kad je isječak zapravo potrebno.</p><p>Konačno, sad smo umetnuli SVG elemente gdje smo prethodno imali <use> referencu na deduplicirani element definiran unutar bloka <defs>. Iako smo izgubili deduplikaciju, ispada da pojednostavljena struktura zapravo smanjuje ukupnu veličinu datoteke u većini slučajeva. To je posebno istinito kada su SVG-ovi komprimirani s nečim poput gzipa.</p><p>Opcije izvoza</p><p>Novi zadani SVG izvoz optimizirani su za najčešća područja upotrebe. Na primjer, većina naših korisnika neće propustiti atribute id, ali za one koji to čine, išli smo naprijed i dodali opciju. Također imamo mogućnost upravljanja markupom za poteze i tekstualne objekte.</p><p>Nadamo se da su se Figmini novi kratki n n slatki SVG dobro ophodili s vama. Ako imate povratne informacije, javite nam u komentarima u nastavku!</p></div><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3845662922897763" data-ad-slot="9806544668" data-ad-format="link" data-full-width-responsive="true"></ins><div class="neighbor-articles"><h4 class="ui header">Vidi također</h4><a href="/design/place-ui-kit-the-future-of-augmented-reality-mobile-apps-634a45/" title="Place UI Kit - Budućnost mobilnih aplikacija proširene stvarnosti">Place UI Kit - Budućnost mobilnih aplikacija proširene stvarnosti</a><a href="/design/how-we-ve-built-a-real-time-sketch-to-code-engine-with-live-preview-021464/" title="Kako smo u stvarnom vremenu izgradili motor Sketch-to-Code (s pregledom uživo)">Kako smo u stvarnom vremenu izgradili motor Sketch-to-Code (s pregledom uživo)</a><a href="/design/making-our-own-emoji-e42883/" title="Izrada vlastitog emojija">Izrada vlastitog emojija</a><a href="/design/the-ux-of-getting-started-in-ux-3b3aa5/" title="UX za početak rada u UX-u">UX za početak rada u UX-u</a><a href="/design/design-trends-that-stand-out-ee2bd3/" title="Trendovi dizajna koji se izdvajaju">Trendovi dizajna koji se izdvajaju</a></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://vi.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="vn flag"></i></a><a href="https://uk.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="ua flag"></i></a><a href="https://tr.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="tr flag"></i></a><a href="https://th.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="th flag"></i></a><a href="https://sv.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="ch flag"></i></a><a href="https://sr.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="rs flag"></i></a><a href="https://sl.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="si flag"></i></a><a href="https://sk.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="sk flag"></i></a><a href="https://ru.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="ru flag"></i></a><a href="https://ro.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="ro flag"></i></a><a href="https://pt.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="pt flag"></i></a><a href="https://pl.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="pl flag"></i></a><a href="https://de.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="de flag"></i></a><a href="https://ar.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="sa flag"></i></a><a href="https://bg.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="bg flag"></i></a><a href="https://cs.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="cz flag"></i></a><a href="https://highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="dk flag"></i></a><a href="https://el.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="gr flag"></i></a><a href="https://es.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="es flag"></i></a><a href="https://et.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="ee flag"></i></a><a href="https://fi.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="fi flag"></i></a><a href="https://fr.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="fr flag"></i></a><a href="https://hi.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="in flag"></i></a><a href="https://hu.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="hu flag"></i></a><a href="https://id.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="id flag"></i></a><a href="https://it.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="it flag"></i></a><a href="https://ja.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="jp flag"></i></a><a href="https://ko.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="kr flag"></i></a><a href="https://lt.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="lt flag"></i></a><a href="https://lv.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="lv flag"></i></a><a href="https://ms.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="my flag"></i></a><a href="https://nl.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="nl flag"></i></a><a href="https://no.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="no flag"></i></a><a href="https://uz.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e/"><i class="uz flag"></i></a></div>highresolution-wallpapers.net<!-- --> © <!-- -->2020<!-- --> </footer></div></div></div></body></html>