Kuinka viedä puhtaita .svg-kuvakkeita Sketchillä
Suunnittelijoina pyrimme ratkaisemaan ongelmat joka päivä. Haluan henkilökohtaisesti istua kehittäjien kanssa ja kokeilla uusia ratkaisuja. Tutkiessamme Practon kuluttajasovelluksen lähdetiedostoja, huomasin, että 30% siitä koostui piirustuksista (kuvat, kuvakkeet, fontit). Tämä on noin 3,2 Mt. Yli 200 vetolaitetta. Jokainen piirrettävä 6 muunnelmassa. Jokaiselle dpi: lle. Lisäksi suurta osaa heistä ei edes käytetty. Png-arvojen ottaminen vetolaitteille saattaa olla helppo tapa, mutta ei varmasti paras tapa.
Android julkaisi äskettäin resurssinsa SVG-yhteensopivuuden aikaisemmille versioille. Siksi jatkoimme tätä ylämäkeen liittyvää tehtävää selvittääksemme edut SVG: ien käytöstä PNG: ien sijasta vedettävissä.
Mikä on SVG?
Skaalautuva vektorigrafiikka (SVG) on XML-pohjainen vektorikuvamuoto kaksiulotteiselle grafiikalle interaktiivisuuden ja animaation tuella.
Piirrettävä vektoriin?
Vetopiirrokset auttavat sinua luomaan piirustuksen, joka perustuu XML-vektorigrafiikkaan. Yksinkertaisesti sanottuna kaikki SVG-tiedostot on muunnettava vektoreita varten ja pakattava .apk-tiedostoon.
Miksi meidän pitäisi käyttää SVG: tä?
- Tarkkuudesta riippumaton vektorigrafiikka. Ei tarvitse tehdä kuvakkeita 6: lle eri DPI: lle.
- Helpoin tapa tehdä animaatioita ja vuorovaikutuksia.
- Säästää paljon tilaa. 80–95% tilaa säästää käyttämällä svg: tä png: n sijasta (24x24 dp: n järjestelmäkuvaketta varten)
- Helppo hallita. Repon tekeminen on sitäkin helpompaa.
- Tarvitsetko vain yhden värisen tiedoston. Voit lisätä värejä tien päällä kehittämisen aikana.
- Tarjous toimimaan kaikille Android-laitteille. Android julkaisi äskettäin SVG-kuvakkeiden yhteensopivan taaksepäin.
- Kaikkien vetoominaisuuksien saaminen vektorimuodossa on iso iso siunaus yhteistyöhön.
Sketch SVG -viennin nykyiset ongelmat
Kun tein kuvakkeita keskusrepolle, keksin valtavan virheen. Viedyillä SVG-ryhmillä ei ole mitään ongelmia. Avaa heidät Chromessa tai esikatsele niitä Macissa, ne näyttävät samanlaisilta kuin odotat heidän olevan. Ongelma ilmenee, kun muutat ne vektoreiksi.
Näin näyttää google-kuvakkeesta ladattu SVG:
Avaan nyt saman SVG: n Sketchissä ja vietän sen uudelleen. Tässä on uusi SVG-koodi:
ic_build_black_24px </ title></pre><pre><desc> Luotu luonnoksella. </desc></pre><pre><Defs> </ defs></pre><pre><g id = "Page-1" stroke = "none" stroke-width = "1" fill = "none" fill-rule = "evenodd"></pre><pre><g id = "city" transform = "kääntää (-171.000000, -375.000000)"></pre><pre><g id = "ic_build_black_24px" transform = "kääntää (170.000000, 374.000000)"></pre><pre><g id = "ryhmä"></pre><pre><polygon id = "Shape" points = "0 0 24 0 24 24 0 24"> </polygon></pre><pre><polku d = "M22.7,19 L13,6,9,9 C14,5,7,6 14,4,9 12,1,3 C10,1,1 7,1,0,6 4,7,1,7 L9,6 L6,9 L1,6,4,7 C0. 4,7,1 0,9,10,1 2,9,12,1 C4,8,14 7,5, 14,5 9,8,13,6 L18,9,22,7 C19,3,23,1 19,9,23,1 20,3,22,7 L22.6,20,4 C23,1,20 23,1,19,3 22,7 , 19 L22.7,19 Z "id =" Shape "fill =" # 000000 "> </path></pre><pre></ G> </ G> </ G> </ G> </ Svg></pre><h4>Tajuttu vika?</h4><p>Jos näet tarkasti, korkeus ja leveys ensimmäisessä svg: ssä on 24. Jopa näyttöruutu on ”0 0 24 24”. Toinen svg muutti vain korkeuden ja leveyden arvoon 22. Viewbox on “0 0 22 22”. Miten se tapahtui?</p><p>Ok, joten Sketch vie vain vyöhykkeen todellisella kuvakkeella näyttöruudun alueeksi. Ja kompensoimiseksi, heillä on monikulmion muoto, joka on ”0 0 24 24”. Ongelma tapahtuu, kun yrität muuntaa tämän svg: n vetopiirrettäväksi.</p><p>Android Studion työkalu, joka muuntaa SVG-tiedostot Vector Drawables -sovellukseksi, lukee <svg> -tagin ja niihin liittyvät tulot. Koska Sketchin svg-sovelluksessa on viallinen näyttölaatikko, vetovetopiirros osoittautuu pienemmäksi ja siten väärin.</p><p>Ja huomasitko, että Sketch on viety paska. Tarpeettomat muodot ja ryhmät. Syynä tähän ongelmaan on se, että Sketch sekoittaa toisinaan peitetyt, ryhmitetyt tai piilotetut tasot tunnistaessaan svg-tiedostoa.</p><h4>Kuinka luoda oikeita SVG-tiedostoja?</h4><p>Se ei oikeastaan ole kovaa, jos noudatat näitä vaiheita varoen. Se voi olla vähän tylsiä, mutta lopputulokset ovat sen arvoisia.</p><h4>1. Luo kuvataulu</h4><p>Tee kuvataulu samankokoiseksi vietäväksi osoitetun kuvakkeen / kuvan kanssa.</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1567199140579.png" /><h4>2. Luo kuvakkeesi</h4><p>Luonnos on erittäin tehokas työkalu kuvakkeiden tekemiseen. Puhdas, nopea ja helppo. Mutta on olemassa muutamia sääntöjä, joita haluat noudattaa, jos haluat viedä tuotteen puhtaasti.</p><p>Sääntö 1: Yritä tehdä muotoja täyteaineilla. Täytteet viedään helposti vektoreihin.</p><p>Sääntö 2: Jos muodollasi on reunus, käytä keskimmäistä reunaa. Sisä- tai ulkoreunoilla vietyjä SVG-tiedostoja ei muuteta vektoreiksi.</p><p>Varoitukset, jotka näytetään yritettäessä viedä piirrettyyn:</p><pre>VAROITUS @ rivi 14 Emme mittaa iskun leveyttä! VAROITUS @ rivi 15 Emme mittaa iskun leveyttä! VAROITUS @ rivi 16 Emme mittaa iskun leveyttä!</pre><p>Sääntö 3: Älä käytä naamioita. Naamioituja kerroksia ei tunnisteta vektoreissa.</p><p>Sääntö 4: Ei ryhmiä. Luo paljon ei-toivottua koodia, joka aiheuttaa sotkun, kun se muunnetaan vektoreiksi.</p><p>Sääntö 5: Ei kiertoa. Ei läppä. Ei muutosta.</p><p>Lopullisen taulun tulee näyttää hieman samanlaiselta kuin tämä.</p><img alt="Tämä muoto noudattaa kaikkia sääntöjä. Täytä, sisäraja, ei naamiota, ei ryhmiä eikä muutosta." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1567199142508.png" /><p>Tässä on Sketchistä viety puhdas SVG, joka ylläpitää yllä olevia sääntöjä.</p><pre><? xml version = "1.0" encoding = "UTF-8" standalone = "no"?></pre><pre><svg width = "24px" korkeus = "24px" viewBox = "0 0 24 24" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http: / /www.w3.org/1999/xlink "></pre><pre> <! - Generaattori: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -></pre><pre><title> 24x24 dp Luotu luonnoksella.
Tämä pitkä ja huolellinen prosessi varmistaa, että vietämäsi SVG-tiedostot muuntuvat puhtaiksi vektoreiksi. Kaikkien 200+ kuvakkeen muuntaminen SVG-tiedostoiksi vei meidät varmasti joskus. Mutta valoisammalta puolelta, ladattava sovelluskoko pieneni 30%.
Päivitys: Luonnokseen 43 on lisätty joitain tärkeitä ominaisuuksia. Niistä kirjoitetaan pian.