Wikipédia:Atelier graphique/FAQ SVG

Un article de Wikipédia, l'encyclopédie libre.

Bienvenue sur la FAQ SVG de l'Atelier graphique.

Dans la mesure où une part de plus en plus grande de notre travail graphique se fait au format vectoriel SVG, cette page à pour vocation de répondre aux questions qui reviennent périodiquement, ces questions que chacun se pose quand un SVG bogue ou qu'il débute en SVG. De plus, nous récupérons les trucs et astuces, les bon conseils, pour qu'une fois étoffée, ce soit une vraie page d'aide sous forme de foire au question, que chacun pourra enrichir.

Les wikigraphistes débutants trouveront ici pas mal de réponses, ou des redirections vers leurs réponses. Et leurs questions serviront à remplir cette page.

Les wikigraphistes experimentés sont ainsi conviés à répondre aux questions, mais aussi à ajouter celles qu'on leur pose fréquemment, ou les astuces qu'ils utilisent dans la création ou l'importation du SVG.

Une fois que la page sera complète, les anciens pourront l'utiliser pour répondre directement aux nouveaux du style :

Il faudrait aussi choisir si on écrit cette page en anglais (lisible par beaucoup plus de graphistes, mieux traduisible) ou en français (parfait pour les français).

Sommaire 1 Bugs sur Wikipédia 1.1 L'image ne s'affiche pas 1.1.1 Cas 1 1.1.2 Cas 2 1.2 Les dimensions du fichier ne sont pas celles spécifiées 1.3 Un carré noir est visible sur l'image 1.4 L'image matricielle embarquée dans le fichier est invisible 1.4.1 Cas 1 1.4.2 Cas 2 1.5 Le texte passe mal 1.5.1 Cas 1 1.5.2 Cas 2 1.5.3 Cas 3 1.6 Le texte placé suivant un chemin ne s'affiche pas 1.7 La police de caractère n'est pas celle utilisée 1.8 Les flèches ne s'affichent pas correctement 1.9 Special SVG functions and Wikipedia 1.10 Où signaler un bug sur Wikipédia 2 Conseils généraux 2.1 Quel Logiciel dois-je utiliser ? 2.2 Dessiner un (très) bon Schéma SVG 2.3 Animer du SVG 3 Conseils pour Inkscape 3.1 Fonctions fondamentales du SVG sous INKSCAPE 3.2 Insérer une image JPG ou PNG dans un SVG 3.3 Broken image 3.4 Alléger le poids du fichier 3.5 Copier-coller d'un SVG à un autre 4 Pour aller plus loin 5 Notes

[modifier] Bugs sur Wikipédia

[modifier] L'image ne s'affiche pas

[modifier] Cas 1

Problème

Vous venez de terminer votre image, mais une fois chargée sur Commons^[1], elle n'apparait pas.

Cause

Mediawiki ne supporte pas qu'on importe un SVG avec une image matricielle^[2] incrustée dedans (par exemple pour vous faire un modèle que vous décalquez).

Solution

Deux solutions à ce problème :

• Vous voulez garder l'image matricielle

Dans ce cas faites Effets, Images et Incorporer toutes les images.... Ceci incorpore les images, mais ne les convertit pas en SVG. Normalement Mediawiki supporte. Attention, dans le cadre d'une image qui sert de texture, elle doit être incorporée avant de servir de texture. Par précaution, une image doit être incorporée dès qu'elle est importée.

Dans le cas d'un décalquage, il est conseillé de faire un calque pour l'image vectorielle et un pour la matricielle

• Vous ne voulez pas garder ce satané bitmap^[2] qui vous pourrit votre rendu.

Dans se cas supprimez l'image, et par précaution enregistrez le fichier vectoriel sous un autre nom.

[modifier] Cas 2

Problème

Vous venez de terminer votre image, mais une fois chargée sur Commons^[1], elle n'apparait pas. Pourtant, vous n'avez pas d'image embarquée^[2] dans votre SVG, vous n'avez pas touché autre chose que des vecteurs.

Cause

Inconnue à ce jour. Ce problème peut arriver quand l'image contient beaucoup de texte de polices différentes ou de polices inhabituelles.

Solution

Le cas échéant, utilisez des polices très répandues (arial, times, etc.) à la place des anciennes.

Reprenez votre fichier, copiez collez l'intégralité du dessin dans un nouveau fichier et enregistrez le sous un autre nom. Si l'original comportait plusieurs calques, il vous faudra les recréer et déplacer les différents objets composant votre image dans leurs calques respectifs.

Par ailleurs il est déjà arrivé que le problème disparaisse de lui-même et que l'image s'affiche correctement quelques heures après son importation.

[modifier] Les dimensions du fichier ne sont pas celles spécifiées

Problème :

Les dimensions du fichier dans Commons^[1] sont incorrectes, indiquant pour celui-ci une taille de 200 x 200 pixels alors qu'elle est beaucoup plus grande dans Inkscape, éventuellement associé à une perte d'informations à l'affichage.

Cause :

Vous avez travaillé sur un fichier de très grande taille et comportant de très nombreux nœuds (plusieurs dizaines de milliers) que vous avez redimensionné avec l'outil < F1 > puis avez ajusté les dimensions de la page à votre dessin (dans Propriétés du document). Cas typique d'un travail sur une carte pour lequel Inkscape a perdu des attributs lors du redimensionnement. Problème d'Inkscape.

Solution :

Deux solutions à ce problème :

• La plus simple : ouvrir l'éditeur XML (menu Édition ··> Éditeur XML... ou touches Ctrl+Maj+X). Dans la colonne de gauche de l'éditeur, sélectionner la première ligne. Les caractéristiques générales de votre fichier apparaissent à droite, dont les deux qui nous intéressent : height (hauteur) et width (longueur). Vous constatez qu'elles sont à 100%. Remplacez simplement ces pourcentages par les dimensions de votre image : cliquez sur height, le pourcentage s'affiche en bas ; remplacez le 100% par la hauteur de votre image en pixel (par exemple : 800) ; cliquez sur le bouton Définir. Faites la même chose pour la longueur, enregistrez votre image, chargez-la sur Commons : elle s'affiche correctement.
• Ouvrir Inkscape et spécifier comme taille de document celle de votre image. Importer (CTL + I) votre dessin (veillez à ne pas avoir laissé de calque verrouillé ou invisible dans l'original) et l'aligner sur la page. Enregistrer sous le nom de votre fichier original pour le remplacer. Si l'original comportait plusieurs calques, il vous faudra les recréer et déplacer les différents objets composant votre image dans leurs calques respectifs.

[modifier] Un carré noir est visible sur l'image

Problème

Une fois l'image chargée sur Commons^[1], un carré noir apparaît sur l'image (variante : il peut aussi être blanc). Parfois, il masque un mot ou un texte.

Ce problème se rencontre sur toutes les versions connues d'Inkscape, jusqu'à la 0.46 incluse.

Cause

Vous avez sélectionné l'outil Texte, cliqué dans l'image, et fait glisser le curseur de votre souris pour former un cadre, dans lequel vous avez écris. C'est ce cadre qui provoque le carré noir. Pour le constater, appuyez sur la touche F8 pour passer en mode « édition de texte » , et survolez vos textes (ce n'est pas forcément le plus près qui est responsable du carré). Vous verrez un rectangle bleu apparaître autour du texte. Cliquez ensuite dans le texte : un autre rectangle bleu apparaît, plus grand, et c'est lui qui cause la zone noire.

Solution

Il vous faut d'abord supprimer cette zone de texte. Pour cela, ouvrez l'éditeur XML d'Inkscape, et chercher les nœuds <svg:flowRoot... Supprimez-les.

Ensuite, vous avez deux solutions :

• Passez en mode édition de texte (F8), cliquez à l'endroit où vous voulez positionner votre phrase – mais sans faire glisser le curseur – puis écrivez (éventuellement avec des retours à la ligne).
• Vous avez un autre texte, qui lui s'affiche bien. Sélectionnez-le, dupliquez-le (Ctrl+D), éditez-le (F8) et tapez le texte voulu.

[modifier] L'image matricielle embarquée dans le fichier est invisible

[modifier] Cas 1

Image avec problème.

Aspect correct.

Problème :

L'image matricielle^[2], embarquée correctement dans le fichier SVG, est absente à l'affichage quand l'image est insérée dans une page d'article et dans la page de description, mais présente dans la vue à 100%.

Cause :

Vous avez travaillé longtemps sur cette image. Vous avez plusieurs fois rendu le calque de l'image matricielle invisible, puis visible, puis invisible, etc. À un moment, Inkscape s'est mélangé les pinceaux^[3]. Au moment de charger votre image sur Commons^[1], vous avez l'impression que tous vos calques sont visibles. Sauf que, pour Inkscape, votre image matricielle est toujours invisible...

Solution :

Il vous suffit de rendre invisible votre calque d'image matricielle, et d'enregistrer, puis de rendre votre calque visible à nouveau. Enregistrez, chargez sur Commons : c'est bon !

[modifier] Cas 2

Image 2 : correcte

Problème :

L'image matricielle^[2] embarquée correctement dans le fichier SVG est absente à l'affichage quand l'image est insérée dans une infobox ou dans une galerie mais présente quand elle est insérée normalement dans une page d'article ainsi que dans sa page de description et dans la vue à 100%.

Cause :

Probablement liée à la précédente. Vous avez chargé sur Commons^[1] une image avec le calque de l'image matricielle invisible. MediaWiki a alors créé des fichiers PNG^[4] pour la page de l'image, les thumb et les galeries où vous l'avez fait figuré. Par la suite, vous avez rechargé votre image avec le calque du bitmap^[2] visible, et tout avait l'air normal... Mais MediaWiki n'a pas regénéré d'image PNG pour toutes celles qu'il avait déjà. Vous pouvez le constater ci-contre : l'image 1 présente une galerie standard, faite après le premier chargement de l'image. Elle fait ici 120 pixels de long. En-dessous, l'image 2 est exactement la même, mais a été faite après le deuxième chargement, avec une taille de 121 pixels : elle est correcte.

Solution :

Deux solutions :

• Vous faites des modifications significatives dans l'image, pour que le poids du fichier soit suffisamment différent de la première fois pour que MediaWiki juge que l'image est différente, et regénère de nouveaux PNG.
• Plus simple : vous chargez votre image sous un autre nom, et vous demandez à un administrateur qu'il supprime la première.

[modifier] Le texte passe mal

[modifier] Cas 1

Problème

Vous chargez votre image sur Commons^[1], par exemple une carte, mais les attributs du texte ne sont pas partout les mêmes (taille, gras, italique,...)

Cause

Vous avez dupliqué certains de vos textes pour en écrire d'autres. Puis vous avez modifié ces autres textes, par exemple en augmentant la taille de la police. Mais en réalité, le fichier SVG a conservé une trace écrite des attributs du texte original^[3]. Dans Inkscape, tout à l'air normal, mais quand vous chargez l'image sur Commons, le moteur de rendu de MediaWiki va trouver ces attributs, et va les utiliser. L'image ne correspondra donc pas à ce que vous souhaitez.

Solution

Deux solutions :

• soit vous supprimez les textes incorrects, vous ouvrez l'outil Texte (touche F8), et vous recréez vos textes avec les attributs souhaitez
• soit, si vous ne voulez pas tout retaper, vous sélectionnez tous les textes incorrects, vous ouvrez l'outil Texte (touche F8), et là c'est l'astuce : vous mettez les attributs dont vous ne voulez pas. Enregistrez le fichier, puis mettez maintenant les attributs que vous souhaitez. Enregistrez le fichier, et chargez-le sur Commons : c'est bon !

[modifier] Cas 2

Problème :

L'affichage du texte dans la vue de la page de description dans Commons^[1] correspond au rendu espéré mais dans la vue à 100%, les lettres sont rendues avec des traits fins et ont un aspect pixellisé.

Cause :

Vous avez utilisé une taille de police inférieure à < 18px > que le moteur librsvg de MediaWiki ne rend pas correctement.

Solution :

Spécifier une taille de texte supérieure ou égale à < 18px >.

[modifier] Cas 3

Problème :

L'affichage du texte dans la vue de la page de description dans Commons^[1] correspond au rendu espéré mais dans la vue à 100%, les lettres ont une taille d'environ 17 pixels et sont rendues avec des traits fins un aspect pixellisé (même aspect que pour le cas précédent).

Cause :

Vous avez changé la taille d'un texte en modifiant sa valeur dans le champ de l'outil Texte (F8). Inkscape a perdu l'attribut < px > (pixels) de l'objet, visible dans l'éditeur XML.

Solution :

Deux solutions :

• La plus simple : sélectionnez le texte en question et déplacez-le en appuyant une fois sur l'une des quatre flèches de direction du clavier. Ramenez-le ensuite dans sa position initiale grâce à la flèche opposée. L'attribut < px > devrait être à nouveau présent.
• Sélectionnez le texte puis ouvrez l'éditeur XML (Édition -> Éditeur XML...). Cliquez sur la ligne style de la fenêtre qui vient de s'ouvrir et ajoutez < px > (sans espace) à la suite du nombre du paramètre font-size:. Cliquez sur Définir puis fermez la fenêtre.

[modifier] Le texte placé suivant un chemin ne s'affiche pas

Problème :

Vous avez placé un texte suivant un chemin qui s'affiche correctement dans Inkscape, mais une fois le fichier chargé sur Commons^[1], le texte disparaît ou est éventuellement sur une ligne droite et décalé par rapport à sa position initiale.

Cause :

Le moteur de Médiawiki ne gère pas les textes placés suivant un chemin.

Solution :

Dans Inkscape, sélectionner le texte et transformez-le en chemin (Chemin -> Objet en chemin) puis supprimer le chemin qui servait de support au texte. On perd l'avantage de pouvoir éditer le texte (pour une traduction par exemple) mais l'affichage ne pose plus de problème.

[modifier] La police de caractère n'est pas celle utilisée

Problème :

Vous avez utilisé de belles polices de caractères pour agrémenter votre illustration, mais dans Commons^[1], le texte est rendu avec une police basique (Arial).

Cause :

Très peu de polices de caractères sont reconnues pour le moment : seules Arial (mais pas Arial Black par exemple) et Times New Roman le sont.

Solutions :

• N'utiliser que ces deux polices de caractères dans vos fichiers, en normal, gras et/ou italique.
• Transformer les textes en chemins si vous tenez absolument à conserver leur aspect, mais vous perdrez la possibilité d'éditer ces textes.

[modifier] Les flèches ne s'affichent pas correctement

Problème

Sur l'image que vous venez de charger sur Commons^[1] les pointes de flèches ne s'affichent pas.

Cause

Librsvg, le moteur graphique de Mediawiki – le logiciel qui pilote Wikipédia – ne sait pas afficher ces objets « pointes de flèches »

Solution

Sélectionner les flèches en tant qu'objet (et non le nœud sur le chemin), aller dans le menu path (chemin) et sélectionner objet en chemin, puis stroke to path (trait en chemin) (<ctrl><alt><C>).

Si vous désirez colorer vos flèches dans Inkscape, vous aurez la mauvaise surprise de voir les pointes de flèches rester noires, tandis que les traits des flèches prendront la couleur choisie comme couleur de contour... Dans ce cas, sélectionner vos flèches, exécuter l'étape 1 (<ctrl><alt><C>). Sélectionner une flèche transformée en chemin, et dégrouper-la (<shift><ctrl><G>). Vous devez voir apparaître au moins deux objets sélectionnés, correspondant à la(aux) pointe(s) et au trait. Sans désélectionner, aller dans path (chemin) et choisir union (<Ctrl><+>). Et voilà, vos flèches devraient apparaître correctement.

NB : Il est préférable de bien positionner ses flèches avant de les convertir en chemin, car ensuite, il est plus compliquer de les modifier sans perdre les proportions.

[modifier] Special SVG functions and Wikipedia

Is the insertion of Wikilinks into SVGs a possibility? I read on Inkscape's website that you can add links. --Seans Potato Business 01:52, 1 January 2008 (UTC)

Yes technically possible, but not on Wikipedia's articles :

1. All web browsers don't understand SVG images ;
2. So, Wikipedia first convert our SVGs into PNGs to display them on Wikipedia ;
3. Accordingly, add special functions to our SVG (i.e. links, SVG animations, clic-on functions, ...) are currently useless.

Wikigraphist, 18:07, 8 January 2008 (UTC)

Further : you can anyway make such SVG and upload them on Commons^[1], for tests and teaching purposes. People interested to see your functions works will have to : download and install the Web browser Opera to see your function work , and go [with Opera] to the true image's place (clic several times on the image ; example this page/image).

Please also remember to categorize your image as [[Category:Animated_SVG]], and to explain a little what users should view work on this image's page.

Wikigraphist, 18:07, 8 January 2008 (UTC)

[modifier] Où signaler un bug sur Wikipédia

Sur => http://bugzilla.wikimedia.org .

Vous devez y avoir un compte, les bugs doivent être bien décrit, vous devez mentionner votre navigateur et votre version de Windows/Linux, si possible avec un lien vers un exemple du bug.

Les demandes approuvées sont généralement satisfaites (un code prêt) en 7 à 15 jours, et implémentées dans mediawiki/wikipedia un peu plus tard (7 à 15 jours plus tard).

Les demandes de nouvelles fonctions se font aussi ici, mais les programmateurs les acceptent plus difficilement, ce qui nécessite souvent de les soutenir par des pétitions ou votes (15 jours-1 mois de plus).

[modifier] Conseils généraux

[modifier] Quel Logiciel dois-je utiliser ?

Voir les conseils de Wikipédia:Atelier graphique/Logiciels (permet de télécharger gratuitement les logiciels)

Pour le format SVG, Inkscape est fortement recommandé. Cf WP:AG/Logiciel.

[modifier] Dessiner un (très) bon Schéma SVG

Voir le simple mais très pertinent tutoriel de Al2 : Cliquer sur ce lien pour voir le tutoriel en anglais basique.

Comment faire un bon schéma ?

Logiciel :

J'utilise Inkscape pour l'illustration.

Choisir un sujet :

Normalement je choisis un sujet avec lequel je suis à l'aise, auquel je porte un intérêt et sur lequel j'ai des connaissances. Je ne veux pas passer du temps sur quelque chose que je n'aime pas.

Recherches Initiale :

Je choisis des images de wiki qui sont sur le sujet sur lequel je travaille, et j'utilise google image en complément.

Dessin :

Quand j'ai ce dont j'ai besoin, je dessine l'image à partir d'une image ou d'une série d'images. Je décalque la photo quand c'est facile.

Je commence par une pinceau normal et l'outil « Courbes de Bezier » pour pouvoir changer après.

Ajustement de la taille :

Les images doivent faire moins de 800 px pour la résolution des écrans, donc je dois les ajuster. Quand j'ai le dessin je compare avec l'original et j'inclus des détails pour améliorer la qualité.

Terminologie:

Ensuite je regarde dans un dictionnaire qui contient les termes que je peux mettre dans l'image, pour pouvoir l'annoter.

Touches finales :

Les images sont sauvegardées dans un format SVG régulier ou dans un format Inkscape.

[modifier] Animer du SVG

Le SVG s'anime, mais pas dans les articles. Voir la section #Special SVG functions and Wikipedia.

[modifier] Conseils pour Inkscape

[modifier] Fonctions fondamentales du SVG sous INKSCAPE

Le SVG présente des innovations et fonctions qui permettent un échange et un travail plus facile des images.

• La gestion des calques (fusion, différence, etc.), voir Aide:SVG#Manipulation_des_calques_avec_Inkscape et image : Image:Operations on paths.svg

[modifier] Insérer une image JPG ou PNG dans un SVG

Problème

Vous voulez insérer une image matricielle^[2] dans votre dessin SVG, par exemple pour vous en servir de modèle.

Solution

Le mieux est de créer un calque (menu Calque ··> Calques... puis cliquez sur le bouton +). Sélectionnez ce calque, et allez dans le menu Fichier ··> Importer... (ou appuyez sur les touches Ctrl+I). Choisissez votre image, et le tour est joué !

Attention, si vous oubliez de supprimer ou d'incorporer cette image avant de charger votre fichier sur Commons^[1], votre image ne s'affichera pas !

[modifier] Broken image

Problème

Je travaille sur Inkscape en utilisant une image jpeg ou png, et d'un seul coup cette image devient illisible et affiche en rouge broken image. Que faire ?

Solution

Les liens vers les images ont des références absolues, donc si on supprime, déplace ou renomme son fichier image, Inkscape ne trouve plus le chemin et dit que le lien est cassé. Avant de supprimer ou autre, il faut incorporer l'image au fichier svg (Effets/Image/Incorporer toutes les images) et ça devrait être OK.

[modifier] Alléger le poids du fichier

Problème

Vous venez de terminer votre image, sur laquelle vous avez passé beaucoup de temps. Mais au final, le fichier SVG pèse lourd... plusieurs centaines de kilo-octets. Comment l'alléger ?

Cause

A chaque fois que vous faites des essais de dégradé de couleur ou de texture, Inkscape les conserve^[3]. Vous pouvez les voir en cliquant sur l'outil « Créer et éditer des dégradés » (Ctrl+F1) : une barre d'outil s'affiche en haut, comprenant la liste de ces dégradés disponibles.

Solution

Une fois l'image terminée, plus besoin de conserver tous ces dégradés. Heureusement, Inkscape comprend un petit outil pour s'en débarrasser. Allez dans le menu « Fichier », et cliquez sur « Nettoyer les Defs » (l'icône représentant un aspirateur). Le poids de l'image va diminuer, parfois jusqu'à la moitié. C'est une bonne habitude de procéder systématiquement à ce nettoyage avant de charger son image sur Commons^[1].

[modifier] Copier-coller d'un SVG à un autre

Problème

Vous voudriez prendre certains objets présent dans un fichier SVG pour les réutiliser dans celui que vous êtes en train de faire. Mais ça ne fonctionne pas, quand vous essayez Inkscape écrit dans sa barre d'état en bas « Rien dans le presse-papier. »

Cause

Inconnue.

Solution

Il y a une astuce pour que cela fonctionne : ouvrez votre premier fichier SVG, à partir d'Inkscape ou de votre explorateur de fichier. Ensuite, dans Inkscape, allez dans le menu Fichier ··> Ouvrir... et ouvrez votre second fichier. Et là, vous pourrez copier-coller en toute simplicité.

[modifier] Pour aller plus loin

Les informations contenues dans cette page concernent surtout les interactions entre Inkscape et les images affichées par Wikipédia. Mais il existe d'autres sources de conseils et d'aides d'Inkscape :

• La FAQ française d'Inkscape

[modifier] Notes