Discussion:Optimiser un fichier SVG

	Optimiser un fichier SVG fait partie de la faculté de Infographie et du projet Infographie. Si vous voulez participer, vous pouvez modifier cette leçon ou visiter la page du projet où vous pourrez vous joindre au projet et consulter la liste des tâches et des objectifs. Vous pouvez aussi créer des exercices pour cette leçon.
Bien avancé	Cette leçon a été classée comme d'avancement bien avancé selon les critères d'évaluation de Wikiversité.

Scour

Ça serait intéressant de parler de Scour, projet open-source en Python pour réduire la taille des fichiers SVG. Ils proposent d'ailleurs une extension pour Inkscape. Cynddl ^{( ⌧ )} 24 avril 2011 à 21:05 (UTC)

Intéressant, je ne connaissais pas mais cela correspond (partiellement ?) à cette leçon. Cela pour faire l’objet d'un chapitre spécifique (décrire le fonctionnement, les avantages, les inconvénients, etc.). Quand j'essaye la version en ligne, je tombe sur un 404. Je vais essayer de le télécharger mais je ne suis pas hyper fan des lignes de commandes… (et je suis passé à Inkscape 0.48 donc pas sur que l’extension fonctionne) Un volontaire ?

De manière plus globale, il faudrait réfléchir au plan de ce cours. Les premiers paragraphes des chapitre 1 et 2, devrait être rassembler dans un chapitre 0 Généralités. Qu'en pensez-vous ?

Cdlt, VIGNERON * ^discut. 25 avril 2011 à 15:47 (UTC)

En effet, ça serait intéressant de faire un chapitre pour préciser l’intérêt d'une telle optimisation, sans trop entrer dans les détails. Il y a redite dans les deux chapitres actuels. Cynddl ^{( ⌧ )} 25 avril 2011 à 16:01 (UTC)

C’est parti pour un chapitre 0 Optimiser un fichier SVG/Généralités, pas d'objections ?

Je viens aussi d’ébaucher : Optimiser un fichier SVG/Présentation de la leçon, n’hésite pas à corriger/modifier/etc.

Cdlt, VIGNERON * ^discut. 25 avril 2011 à 16:18 (UTC)

Plan

Actuellement, le plan est le suivant :

• Chapitre 1 : Avec Inkscape (0)
• Chapitre 2 : Avec un éditeur de texte

Je pense qu’il faut passer à un plan plus étoffé, plus complet.

Je propose quelque chose comme :

• Chapitre 1 : Généralités
• Chapitre 2 : Alléger un fichier SVG
  • Chapitre 2.1 : Avec Inkscape
  • Chapitre 2.2 : Avec un éditeur de texte
• Chapitre 3 : Optimisation avancée

Dans ce dernier chapitre, on pourrait parler d'autres outils comme http://validator.w3.org/

PS : quelqu’un connait l'outil http://toolserver.org/~jarry/svgtranslate/ (et surtout son fonctionnement, ses exigences) ou d'autres outils similaires ?

Cdlt, VIGNERON * ^discut. 30 avril 2011 à 12:46 (UTC)

Ressources

Voici quelques ressources sur le net :

• w:Scalable Vector Graphics (of course)
• W3C
  • Recommandation SVG1 du W3C en version française (non-officielle)
• tutoriel siteduzero (très orienté code)

Sur Commons :

• commons:Template:Created with Text Editor
• pages utilisateurs :
  • commons:User:Joey-das-WBF
  • commons:User:Quibik/Cleaning up SVG files manually
  • commons:User:Augiasstallputzer/Texte

Exemples

Ce serait bien de donner des exemples concrets.

Il doit être possible de faire encore mieux (en supprimant les décimales notamment) mais j’ai déjà réduit de 411 ko à 144 ko ce fichier : File:Cantonales 2001.svg. Cdlt, VIGNERON * ^discut. 7 mai 2011 à 15:35 (UTC)

Il est possible oui mais il n'y a pas la taille qui compte, il s'agit aussi de le laisser facilement rééditable et je pense que tu peux difficilement aller plus loin de ce coté là ;) Otourly 7 mai 2011 à 17:16 (UTC)

Je repars sur l’idée de donner des exemples (par exemple sous formes de fiches-exercices) :

Début de l'exemple

Dessiner un triangle à l’aide de d’Inkscape.

Méthode 1 : avec l’outil « créer des étoiles et des polygones »

Cette méthode produit un code très lourd faisant appel à 11 lignes de codes inkscape et sodipodi (sodipodi:type="star" sodipodi:sides="3" etc.).

Une fois le triangle placé correctement, il est donc fortement conseillé de transformer l’objet en chemin (on obtiendra un résultat proche de celui de la méthode 2).

---

Méthode 2 : avec l’outil « Tracer des courbes de Bézier et des segments de droites »

Cette méthode crée un code très léger (essentiellement une seule ligne de la forme « m 100,50 -50,100 100,0 z » ou « M 100,50 50,150 150,150 z » *).

* Un M majuscule signifie que les coordonnées sont absolues ; en minuscule les coordonnées sont relatives. Voir l’exemple XXX pour des détails sur les avantages et inconvénients.

Fin de l'exemple

Début de l'exemple

Coordonnées absolues et relatives dans un tracé.

L'élément path possède obligatoirement un attribut d qui contient les données du tracé. Ce tracé se fait à l‘aide de plusieurs commandes représentés par une lettre unique :

• M/m moveto
• L/l lineto
  • H/h lineto horizontal
  • V/v lineto vertical
• C/c curveto
• S/s curveto short
• Q/q quadratic curveto
• T/t quadratic curveto short
• A/a arc
• Z/z closepath
• etc.

Un lettre majuscule signifie que les coordonnées sont absolues alors qu’une lettre minuscule les coordonnées sont relatives (sauf pour closepath qui n’est pas sensible à la casse).

Ainsi au moins deux tracés correspondent à une même forme. Par exemple, les tracés suivants correspondent au même carré :

• m 25,125 50,0 0,50 -50,0
• m 25,175 0,-50 50,0 0,50
• m 25,175 50,0 0,-50 -50,0
• M 25,125 75,125 75,175 25,175
• M 25,175 25,125 75,125 75,175

Ou en utilisant d’autres commandes :

• m 25,125 h 50 v 50 l -50,0
• M 25,125 h 50 v 50 l -50,0
• m 25,125 h 50 v 50 H 25
• M 25,125 h 50 v 50 H 25
• m 25,125 h 50 v 50 h -50
• M 25,125 h 50 v 50 h -50
• m 75,175 H 25 v -50 h 50
• M 75,175 H 25 v -50 h 50

Ainsi pour raccourcir le code, il faut parfois changer la façon dont il est décrit. Il arrive qu’Inkscape trouve des écritures plus courtes pour un même tracé (il convertit presque toujours des coordonnées absolues en coordonnées relatives) mais il trouvera rarement l’écriture la plus courte (il ne remplacera pas un « l -50,0 » par un « h -50 »).

Les espaces sont ajoutés par Inkscape pour la lisibilités mais la plupart peuvent être retirer avec un éditeur de texte.

Fin de l'exemple

Ce n’est qu’une ébauche mais qu’en pensez-vous ? Ma philosophie est plutôt de faire plusieurs petits exemples que de gros pavés illisibles. Cdlt, VIGNERON * ^discut. 22 mai 2011 à 14:16 (UTC)

Sur le principe, je ne vois pas trop comment être contre . N'hésite pas à ébaucher tout ça. Cdt, Cynddl ^{( ⌧ )} 22 mai 2011 à 14:35 (UTC)

Je ne suis pas spécialiste du SVG, plutôt un amateur éclairé par quelques années d'expériences sur Commons.

Je ne suis pas non plus un spécialiste de la Wikiversité. Je fais un chapitre Exemples (exercices ?) et des sous-chapitres selon le sujet ?

Cdlt, VIGNERON * ^discut. 24 mai 2011 à 16:09 (UTC)

Je dirais soit une page d'exercice avec le modèle {{Exo}} soit un chapitre Cas pratique avec plutôt des exemples que des exercices… À voir selon l'orientation de la page. Cynddl ^{( ⌧ )} 24 mai 2011 à 20:17 (UTC)

Je pense plutôt m’orienter vers un chapitre Cas pratique avec des exercices récapitulatifs à la fin (que je ferais plus tard, quand j’aurais fait le tour des cas pratiques).

En parlant de cas pratique, un autre cas : File:Blason Château-Guibert.svg. Du coup, 1. j’ai (re)découvert svg:use (qui promet des allégements intéressants mais il faut que je retrouve comment cela fonctionne déjà) 2. je me dis qu’il y aurait beaucoup à faire au niveau des blasons, je pense presque à faire un chapitre spécifique sur le sujet.

Cdlt, VIGNERON * ^discut. 24 mai 2011 à 21:23 (UTC)

(un an plus tard…) Je viens d’ébaucher Optimiser un fichier SVG/Exemples/Rectangles. Tout avis, commentaires, critiques, compléments sont les bienvenues (notamment pour la dernière partie, il y a encore du travail). Cdlt, VIGNERON * ^discut. 18 mai 2012 à 16:46 (UTC)

Todolist

Todolist des points/chapitres à ajouter :

• les effets de fermeture de bordure (avec la commande Z et une image).
• le style CSS
• les defs (dégradé = mal ; use xlink:href = bien)
• régler les préférences d'Inkscape

Cdlt, VIGNERON * ^discut. 21 décembre 2012 à 13:47 (UTC)