25: Rankinis SVG optimizavimas „Illustrator“ CSS-gudrybės

Anonim

Vaizdo įrašas buvo pašalintas iš šio. Netrukus kada nors vėl nušausiu. Jei skaitote tai, bet dar to nepadariau, nedvejodami susisiekite su manimi ir klaidinkite dėl to.

Kartais norimas naudoti SVG „Illustrator“ atrodo visiškai gerai, tačiau ne visai taip norėtumėte jį naudoti žiniatinklyje.

Vienas iš dalykų, į kurį žiūrime šiame vaizdo įraše, yra paprasta forma, kuri, atrodo, būtų viena forma, tačiau iš tikrųjų yra keturios formos, sėdinčios viena ant kitos. Norėdami tai supaprastinti, mes tiesiog pasirenkame visas formas ir naudojame „Illustrator“ įrankius „Pathfinder“, kad sujungtume jas į vieną figūrą. Matome, kad tai iškart atsispindi kode. Kartais labai smagu, kad SVG failas atidaromas tiek „Illustrator“, tiek kodo rengyklėje, kad jį išsaugodami pamatytumėte, ką jis daro su kodu.

„Pathfinder“ puikiai tinka rankiniu būdu optimizuoti figūras - verta sužinoti, ką daro tie mygtukai, ir ką jie daro paspaudę parinkties klavišą.

SVG failo dydį dideliu laipsniu lemia tai, kiek taškų yra formose. Yra ir kitų veiksnių, bet tai yra bigis. Kitas dalykas, į kurį žiūrime šiame vaizdo įraše, yra „Illustrators“ supaprastinto kelio funkcija, siekiant sumažinti taškų skaičių kai kuriose tekstūros formos formose ir sumažinti failo dydį.

Kitas dalykas, kurį reikia žinoti: sudėtiniai keliai gali būti naudingi. Dvi visiškai viena nuo kitos atskiros formos vis tiek gali būti vienas kelias. Panašu, tiesiogine to žodžio prasme. Sintaksė leidžia iš esmės „paimti rašiklį, perkelti jį kur nors kitur, nupiešti ką nors naujo“. Taigi, kai „Illustrator“ sukuriate sudėtinį kelią (pvz., Kelias nepriklausomas figūras, Objektas> Sudėtinis kelias> Padaryti), taip jis išleidžia. Gali būti supaprastinta / optimizuota SVG išvestis.