25: SVG: n manuaalinen optimointi Illustratorissa CSS-temppuja

Anonim

Video poistettiin tältä. Ammu sen jonain päivänä pian. Jos luet tätä enkä ole vielä tehnyt sitä, ota rohkeasti yhteyttä minuun ja tee siitä vika.

Joskus haluamasi SVG näyttää täydellisesti hyvältä Illustratorissa, mutta se ei ole aivan miten haluat käyttää sitä verkossa.

Yksi asia, jota katsomme tässä videossa, on yksinkertainen muoto, joka näyttää olevan yksi muoto, mutta on tosiasiassa neljä muotoa, jotka istuvat päällekkäin. Tämän yksinkertaistamiseksi valitsemme vain kaikki muodot ja yhdistämme ne yhdeksi muodoksi Illustratorin Pathfinder-työkaluilla. Voimme nähdä, että heijastuu välittömästi koodiin. Joskus on tavallaan hauskaa saada SVG-tiedosto auki sekä Illustratorissa että koodieditorissa, jotta tallennat sen, mitä se tekee koodille.

Pathfinder soveltuu erinomaisesti muotojen manuaaliseen optimointiin - kannattaa oppia tuntemaan, mitä nämä painikkeet tekevät - ja mitä ne tekevät myös painettuna olevalla vaihtoehto-näppäimellä.

SVG-tiedoston koko määräytyy suuressa määrin sen mukaan, kuinka monta pistettä muodoissa tapahtuu. On muitakin tekijöitä, mutta se on iso muru. Toinen asia, jota tarkastelemme tässä videossa, on käyttää Illustrators Simplify Path -ominaisuutta pienentämään joidenkin tekstuuri-ish-muotojen pisteiden määrää tiedostokoon pienentämiseksi.

Toinen asia tietää: yhdistetyt polut voivat olla hyödyllisiä. Kaksi täysin toisistaan ​​erillistä muotoa voi silti olla yksi polku. Kuten, kirjaimellisesti yksi. Syntaksi sallii olennaisesti "poimia kynän, siirtää sen muualle, piirtää jotain uutta". Joten kun luot yhdistetyn polun Illustratorissa (esim. Useita itsenäisiä muotoja, Objekti> Yhdistetty polku> Tee), niin se tuottaa. Voi johtaa yksinkertaistettuun / optimoituun SVG-lähtöön.