25: Optimisation manuelle du SVG dans Illustrator - Astuces CSS

Anonim

La vidéo a été supprimée sur celui-ci. Je le re-tournerai bientôt. Si vous lisez ceci et que je ne l'ai pas encore fait, n'hésitez pas à me contacter et à m'en parler.

Parfois, le SVG que vous souhaitez utiliser semble parfaitement bien dans Illustrator, mais ce n'est pas tout à fait la façon dont vous voudriez l'utiliser sur le Web.

L'une des choses que nous examinons dans cette vidéo est une forme simple qui semble être une seule forme, mais qui est en fait quatre formes placées les unes sur les autres. Pour simplifier cela, nous sélectionnons simplement toutes les formes et utilisons les outils Pathfinder dans Illustrator pour les combiner en une seule forme. Nous pouvons voir que cela se reflète immédiatement dans le code. Parfois, il est assez amusant d'ouvrir le fichier SVG à la fois dans Illustrator et dans un éditeur de code afin que vous puissiez voir ce qu'il fait au code.

Le Pathfinder est idéal pour l'optimisation manuelle des formes - cela vaut la peine de savoir ce que font ces boutons - et ce qu'ils font également avec la touche d'option enfoncée.

La taille d'un fichier SVG est, dans une large mesure, déterminée par le nombre de points présents dans les formes. Il y a d'autres facteurs, mais c'est le gros problème. Une autre chose que nous examinons dans cette vidéo est l'utilisation de la fonction Illustrators Simplify Path pour réduire le nombre de points sur certaines formes de texture afin de réduire la taille du fichier.

Autre chose à savoir: les chemins composés peuvent être utiles. Deux formes totalement distinctes l'une de l'autre peuvent toujours être un chemin. Comme, littéralement un. La syntaxe permet essentiellement de «prendre le stylo, le déplacer ailleurs, dessiner quelque chose de nouveau». Ainsi, lorsque vous créez un chemin composé dans Illustrator (par exemple, plusieurs formes indépendantes, Objet> Chemin composé> Créer), c'est comme ça qu'il sort. Peut conduire à une sortie SVG simplifiée / optimisée.