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:
Svg>
Avaan nyt saman SVG: n Sketchissä ja vietän sen uudelleen. Tässä on uusi SVG-koodi:

xml version = "1.0" encoding = "UTF-8" standalone = "no"?>
ic_build_black_24px title>
Luotu luonnoksella.
defs>
G> G> G> G> Svg>
Tajuttu vika?
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?
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.
Android Studion työkalu, joka muuntaa SVG-tiedostot Vector Drawables -sovellukseksi, lukee
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.
Kuinka luoda oikeita SVG-tiedostoja?
Se ei oikeastaan ole kovaa, jos noudatat näitä vaiheita varoen. Se voi olla vähän tylsiä, mutta lopputulokset ovat sen arvoisia.
1. Luo kuvataulu
Tee kuvataulu samankokoiseksi vietäväksi osoitetun kuvakkeen / kuvan kanssa.

2. Luo kuvakkeesi
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.
Sääntö 1: Yritä tehdä muotoja täyteaineilla. Täytteet viedään helposti vektoreihin.
Sääntö 2: Jos muodollasi on reunus, käytä keskimmäistä reunaa. Sisä- tai ulkoreunoilla vietyjä SVG-tiedostoja ei muuteta vektoreiksi.
Varoitukset, jotka näytetään yritettäessä viedä piirrettyyn:
VAROITUS @ rivi 14 Emme mittaa iskun leveyttä! VAROITUS @ rivi 15 Emme mittaa iskun leveyttä! VAROITUS @ rivi 16 Emme mittaa iskun leveyttä!
Sääntö 3: Älä käytä naamioita. Naamioituja kerroksia ei tunnisteta vektoreissa.
Sääntö 4: Ei ryhmiä. Luo paljon ei-toivottua koodia, joka aiheuttaa sotkun, kun se muunnetaan vektoreiksi.
Sääntö 5: Ei kiertoa. Ei läppä. Ei muutosta.
Lopullisen taulun tulee näyttää hieman samanlaiselta kuin tämä.

Tässä on Sketchistä viety puhdas SVG, joka ylläpitää yllä olevia sääntöjä.
xml version = "1.0" encoding = "UTF-8" standalone = "no"?>
24x24 dp Luotu luonnoksella.
Maski> Defs> G> G>
Svg>
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.