Accueil

Traduction

Tutoriel Inkscape & Boxy SVG - sommaire

Sommaire partiellement masqué - faites défiler !

Inkscape & Boxy_SVG - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Inkscape : optimiser le code - les extensions

Inkscape peut générer un code un peu trop verbeux et donc lourd si on ne prend pas certaines précautions.

Optimiser le code

Astuces

Avant d'enregistrer un document, demandez à le "nettoyer". Ainsi les filtres, dégradés, motifs, etc. qui en définitive n'ont pas été utilisés seront supprimés de la partie DEFS. La commande est : Fichier/Nettoyez le document.

SVG Optimizer

On pouvait utiliser une application en ligne pour réduire le poids du document Inkscape :SVG optimizer.
J'emploie le passé car il y a désormais une autre solution. Voir ci-dessous.

L'outil d'optimisation intégré dans Inkscape

Bonne nouvelle, Inkscape propose désormais un outil d'optimisation.

Pour le type, séléctionnez alors dans la liste déroulante "SVG optimisé".

L'optimisation est donc simple et rapide.

Je vous présente ci-dessous les différents onglets de cette boite de dialogue.

Lisez bien les infobulles associés à chaque case à cocher.
Onglet "sortie SVG" :

C'est l'onglet le plus important.
Ici je n'ai pas coché "activer la vue par zone" donc l'attribut viewBox de la balise SVG ne sera pas généré. Ce qui est une erreur ...

Onglet "options"

Vous pouvez règler le nombre de chiffres significatifs pour les coordonnées de taille et de position.
Les paramètres de style peuvent être passés en attributs ou en propriétés.

Onglet "ID" :

Les identifiants peuvent être très courts.

Un document Inkscape optimisé par scour

Le rendu :

Le code SVG du document :

Admettez que c'est succinct.
Notez qu'un groupe a été créé pour appliquer la même couleur de fond aux deux formes.

Inkscape : les extensions

Premier exemple

Tous ces dessins ont été produits grâce à des extensions de Inkscape.
Il a suffi que je produise à chaque fois la commande Extensions/Rendu puis le sous menu "code barres" ou "boîte à plier" ou "engrenage" ou encore "polyèdre 3D".

Pour la "boîte à plier" et le "polyèdre" il faut bien sûr renseigner une boîte de dialogue (passer des paramètres).

Deuxième exemple

Dans l'image SVG ci-dessus produite avec Inkscape et que j'ai intitulé "paysage d'hiver" j'ai produit très rapidement la forêt de bouleaux en utilisant l'extension "arbre aléatoire".

Troisième exemple

Dans le document Inkscape ci-dessus j'ai produit trois grilles.