Kuidas eksportida puhtaid .svg-ikoone visandiga

Disaineritena püüame iga päev probleeme lahendada. Mulle isiklikult meeldib koos arendajatega istuda ja uusi lahendusi proovida. Meie Practo tarbijarakenduse lähtefailidest läbi vaadates mõistsin, et 30% sellest moodustasid tõmbekaubad (pildid, ikoonid, fondid). See on umbes 3,2 MB. 200+ joonistatavat. Kõik joonistatavad kuues variatsioonis. Iga dpi jaoks. Lisaks polnud enamikku neist isegi kasutatud. Lahtrite jaoks png-ide omamine võib olla lihtne väljapääs, kuid kindlasti mitte kõige optimaalsem.

Hiljuti käivitas Android SVG-ühilduvuse ressursi ka tagumiste versioonide jaoks. Seetõttu asusime ülesmäge, et teha kindlaks eelised SVG-de kasutamisest PNG-de asemel tõmbamiseks.

Mis on SVG?

Skaalautuva vektorgraafika (SVG) on kahemõõtmelise graafika XML-põhine vektorkujutise vorming koos interaktiivsuse ja animatsiooni toega.

Vektoriga joonistatav?

Vektorjoonised aitavad teil XML-i vektorgraafikal põhinevat joonistust luua. Lihtsamalt öeldes tuleb kõik SVG-d teisendada vektorjoonisteks ja pakkida .apk-faili.

Miks peaksime kasutama SVG-sid?

  • Resolutsioonist sõltumatu vektorgraafika. 6 erineva DPI jaoks pole vaja ikoone teha.
  • Lihtsam viis animatsioonide ja interaktsioonide tegemiseks.
  • Säästab palju ruumi. 80–95% ruumi kokkuhoid, kui png-i asemel kasutatakse svg-d (süsteemi 24x24 dp ikooni jaoks)
  • Lihtsam hallata. Repo tegemine on seda lihtsam.
  • Vaja ainult ühevärvilist faili. Arenduse ajal saate värve lisada liikvel olles.
  • Sätted töötavad kõigi android-seadmetega. Hiljuti käivitas Android SVG-ikoonide tagumise ühilduvuse.
  • Kõigi draiverite vektorvormingus omamine on ristkoostöö jaoks suur õnnistus.

Sketch SVG ekspordi praegused probleemid

Kui tegin keskrepo jaoks ikoone, mõtlesin välja tohutu vea. Eksporditud SVG-del pole mingeid probleeme. Avage need Chrome'is või vaadake neid Macis eelvaatena, need näevad välja sarnased nende ootustega. Probleem ilmneb siis, kui teisendate need vektorjoonisteks.

Google'i ikoonist allalaaditud SVG näeb välja järgmine:

Nüüd avan sama SVG Sketchil ja eksportin selle uuesti. Siin on uus SVG-kood:

Sketchis avatud Google'i ikoonide hoidlast alla laaditud ikoon
 ic_build_black_24px 
 Loodud visandiga. 
 
 
 




Arvasid viga?

Lähedalt nähes on kõrguse ja laiuse suurus esimeses svg-s 24. Isegi vaatekast on “0 0 24 24”. Teine svg muutis lihtsalt kõrguse ja laiuse väärtuseks 22. Vaatekast on “0 0 22 22”. Kuidas see juhtus?

Ok, nii et Visand võtab tsooni tegeliku ikooniga vaateakna alaks. Kompenseerimiseks on neil hulknurga kuju, mis on „0 0 24 24”. Probleem ilmneb siis, kui proovite seda SVG-d teisendada vektorjoonisteks.

Android Stuudio tööriist, mis teisendab SVG-d vektorjoonisteks, loeb silti ja nendega seotud sisendeid. Kuna Sketchi svg-l on vigane kasti, osutub vektorjoonistamine väiksemaks ja seega valeks.

Ja kas märkasite seda jama, mille Sketch eksportis. Tarbetud kujundid ja rühmad. Selle probleemi põhjuseks on asjaolu, et Sketch segab svg eksportimisel mõnikord maskeeritud, grupeeritud või peidetud kihte.

Kuidas luua õigeid SVG-sid?

See pole tegelikult nii raske, kui järgite neid samme ettevaatlikult. See võib olla pisut tüütu, kuid lõpptulemused on seda väärt.

1. Looge Artboard

Tehke pilt, mille suurus on sama suur kui ikoonil / illustratsioonil, mida soovite eksportida.

2. Looge oma ikoon

Visand on väga võimas tööriist ikoonide tegemisel. Puhas, kiire ja lihtne. Kuid kui soovite eksportida toodet puhtalt, on vaja järgida mõnda reeglit.

Reegel 1: proovige teha täidetega kujundeid. Täidised on hõlpsasti eksporditavad vektoritesse.

Reegel 2: kui teie kujundil on ääris, kasutage keskmist piiri. Sise- või välispiiretega eksporditud SVG-d ei teisendata vektorjoonisteks.

Joonistusse eksportimisel kuvatakse hoiatusi:

HOIATUS @ rida 14 Me ei mõõda käigu laiust!
HOIATUS @ rida 15 Me ei mõõda käigu laiust!
HOIATUS @ rida 16 Me ei mõõda käigu laiust!

Reegel 3: ärge kasutage maske. Maskeeritud kihte vektorjoonistel ei tuvastata.

Reegel 4: rühmi pole. Loob palju soovimatut koodi, mis tekitab jama, teisendades vektorjoonisteks.

Reegel 5: rotatsiooni ei tehta. Ei mingit klappi. Transformatsiooni pole.

Teie lõplik paan peaks välja nägema mõnevõrra sarnane sellele.

See kuju järgib kõiki reegleid. Täitke, sisepiir, mask puudub, rühmi ei tehta ja ümberkujundamine puudub.

Siin on Sketchist eksporditud puhas SVG, hoides ülaltoodud reegleid.

    
 24x24 dp 
 Loodud visandiga. 
 

            
 
        

    

    

        

            
 
        

    

See pikk ja hoolikas protsess tagab, et eksporditavad SVG-d konverteeritakse puhastesse vektoritesse. Kõigi 200+ ikooni teisendamine SVG-deks võttis meil millalgi kindlasti aega. Kuid heledamast küljest on allalaaditav rakenduse suurus vähendatud 30%.

Värskendus: Joonisele 43 on lisatud mõned peamised funktsioonid. Varsti kirjutame neist.