Wikipédia:Atelier graphique/FAQ SVG

Conseil

• sur le SVG et Wikipédia
• généraux
• pour Inkscape

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 a 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 bons conseils, pour qu'une fois étoffée, ce soit une vraie page d'aide sous forme de foire aux questions, 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 expérimenté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 :

Bogues sur Wikipédia

L'image ne s'affiche pas

Cas 1

Problème

Vous venez de terminer votre image, mais une fois chargée sur Commons, elle n'apparaît pas.

Cause

Mediawiki ne supporte pas qu'on importe un SVG avec une image matricielle 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> Incorporer toutes les images..., ou Extensions> Images> Incorporer les images... suivant votre version d'Inkscape. 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.
Sous linux, vous pourrez avoir besoin d'installer un packetage grâce à konsole, la commande étant : sudo aptitude install python-lxml (Ubuntu) ou urpmi python-lxml (Mandriva).

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 qui vous pourrit votre rendu.

Dans ce cas supprimez l'image, et réimportez-la sous le même nom. Si vous ne voyez pas de différence, rafraichissez le cache de votre navigateur Internet en appuyant sur les touches Ctrl+F5.

Cas 2

Problème

Vous venez de terminer votre image, mais une fois chargée sur Commons, elle n'apparaît pas. Pourtant, vous n'avez pas d'image embarquée 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 une police disponible (voir la liste des polices).

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.

Des éléments de l'image ne s'affichent pas

Cas 1

Problème

Votre image s'affiche bien sur Commons, mais… elle n'est pas complète ! Certains éléments ont disparu. Pire, suivant la taille de la miniature générée, d'autres éléments disparaissent encore. Plus la miniature est petite, moins l'image est complète.

Cause 1

Ce problème se produit quand on met des effets de flou dans un dessin. MediaWiki n'est pas très copain avec le flou, et au moment de générer le PNG, il perd certains éléments. En particulier, des petits éléments avec un très léger effet de flou.

Solution 1

1. Augmenter l'effet de flou. Mais ça ne sera peut-être pas possible, car pour les petits objets, le flou devient très vite invisible. Dans ce cas, il vous reste la seconde solution
2. Supprimer l'effet de flou.

Cause 2

Ce problème est le même que le cas 2 ci-dessous : il provient de l'utilisation d'un motif.

Solution 2

Soit :

• recréer à la main le motif, puis le grouper ou l'intégrer à l'objet que l'on veut remplir. Le cloner si l'on a d'autres objets identiques à remplir.
• réessayer avec des hachures plus grosses ou plus espacées.

Cas 2

Problème

Votre fichier s'affiche bien sur Commons, mais… il manque des couleurs ! Après avoir bien vérifié, vous voyez qu'aucun effet de flou n'a été utilisé, pas plus qu'une image matricielle embarquée et mise en arrière plan. Et pourtant, il y a quand même certaines couleurs. Enfin, lorsque vous ouvrez votre image en cliquant dessus sur la page Commons ou en l'ouvrant avec votre navigateur, aucun problème, tout est là !

Cause

Ce problème récent semble lié à l'usage de motifs (ou patterns). Les motifs sont, comme leur nom l'indique, des « patrons » de dégradés, présents à l'extérieur du cadre, non affichés, redimensionnables et dans lesquels on peut « tailler » la forme voulue. Cependant, il semble que MédiaWiki ne parvienne pas à les gérer correctement, et les formes découpées dans celle-ci deviennent donc transparentes.

Solution

Pour l'instant, une seule solution, plus dure, a été trouvée : il suffit de remplacer l'usage des motifs par des arrière-plans aux endroits souhaités. Mais le gros défaut est qu'il faudra recréer un arrière-plan identique à chaque fois que l'on souhaite mettre cette couleur.

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

Exemple de carte avec problème de dimension de fichier dû à Inkscape.

Problème

Les dimensions du fichier dans Commons sont incorrectes, indiquant pour celui-ci une taille de 200 x 200 (ou 512 x 512) 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.

Un carré noir est visible sur l'image

Exemple de bug d'affichage du a la fonction FlowRoot.

Problème

Une fois que l'image a été chargée dans commons, aucun texte n'apparaît sur l'image. Parfois, il masque un mot ou un texte.

Ce problème se rencontre sur toutes les versions connues d'Inkscape.

Cause 1

La fonction <flowRoot...> n'est pas comprise par Librsvg, le moteur graphique de Mediawiki (qui convertit les SVG en PNG).

Vous avez sélectionné l'outil Texte, cliqué dans l'image, et fait glisser le curseur de votre souris pour former un cadre (une « boîte »), dans lequel vous avez écrit. 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.

Il aurait fallu créer ce texte "normalement". C'est à dire sans créer de limite (c'est à dire sans la boite de texte avec une hauteur et une largeur délimitée), et sans retour à la ligne. Du texte brut en somme.

Solution 1 (recommandée)

c:User:JoKalliauer/RepairFlowRoot

Cause 2

Une forme de largeur ou de hauteur nulle est présente dans l'image. Cela n'est pas visible dans le svg mais le devient en png sur wikimédia.

Solution 1

Ouvrir le fichier svg dans un éditeur de texte simple (du genre notepad).

Rechercher width="0" ou height="0".

Supprimer les tags dans lesquels cette forme est présente depuis le <tag ... jusqu'au </tag> où le tag est en général un g, pour group.

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

Cas 1

Image avec problème. Image avec problème.

Aspect correct. Aspect correct.

Problème

L'image matricielle, 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. Au moment de charger votre image sur Commons, 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 !

Cas 2

Image 2 : correcte

Problème

L'image matricielle 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 une image avec le calque de l'image matricielle invisible. MediaWiki a alors créé des fichiers PNG 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 visible, et tout avait l'air normal... Mais MediaWiki n'a pas régé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 régé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.

Cas 3

Problème

L'image matricielle , 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

Le poids ou la taille (semble-t-il) : plus de 1750 pixels ?

Solution

Il suffit de réduire la taille de l'image jpeg, sans doute en-deçà de 1750 pixels de hauteur : exemples (voir l'historique) : Fichier:Färnebofjärden National Park satellite map-fr.svg, File:Roraima satellite 11 mars 2004 map-fr.svg.

Pour ce faire, ouvrez l'image avec The Gimp et réduisez les dimensions de l'image bitmap à l'aide de l'outil de mise à l'échelle (Maj+T). Puis faites Image > Ajuster le canevas aux calques. L'image devrait s'alléger en dimension et en poids sans perdre en qualité (format jpeg du moins). Puis dans Inkscape, redimensionnez votre image bitmap en fonction des dimensions de votre carte (et non l'inverse). Le redimensionnement du jpeg dans le fichier svg ne change rien à son poids.

L'image matricielle embarquée dans le fichier s'affiche dans une taille différente

Après avoir importé votre bitmap dans Inkscape, vous avez modifié sa taille, mais ce dernier garde en mémoire les dimensions initiales de l'image. Le bitmap apparaît à la bonne taille dans Inkscape mais pas sur le wiki.

Cause inconnue. (mauvais bidouillage des préférences ?).

Solution

Notez les dimensions voulues (et éventuellement ses coordonnées) du bitmap dans Inkscape. Redimensionnez le bitmap à la taille voulue à l'aide d'un logiciel tiers (The Gimp par exemple). Importer dans Inkscape le bitmap ainsi redimensionné. Il restera à cette taille (mais que vous ne pourrez pas changer avec Inkscape).

Impossible d'incorporer une image matricielle

Cas 1

Problème

Quand vous essayez d'incorporer une image matricielle dans Inkscape, une erreur s'affiche : « No xlink:href or sodipodi:absref attributes found, or they do not point to an existing file! Unable to embed image..

Cause

Ce bogue se produit avec la version 0.47 d'Inkscape, sous quelques systèmes d'exploitation (Windows NT, Windows XP), lorsque le chemin d'accès contient certains caractères, comme les caractères accentués, les espaces, etc. Ils sont sont convertis en codes — commençant par « % » — mais ce code n'est pas compris par Inkscape..

Codes connus

Caractère	Code
(espace)	%20
é	%13%1CF

Solution

Remplacer chaque code par son équivalent, voir tableau ci-contre.

Par exemple, « D:\Travaux%20Graphiques\Wikip%13%1CFdia\toto.png » deviendra « D:\Travaux Graphiques\Wikipédia\toto.png ».

Cas 2

Problème

Impossible d'incorporer une grosse image matricielle dans Inkscape.

Cause

Constaté avec les versions 0.46 et 0.47 d'Inkscape. La raison est inconnue, si ce n'est que le poids du fichier semble poser problème.

Solution

Découpez l'image matricielle avec un autre logiciel ou avec l'outil découpe, puis incorporez chaque image séparemment.

Le texte s'affiche mal

Cas 1

Problème

Vous chargez votre image sur Commons, 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. 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 souhaités
• 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 !

Cas 2

Problème de rendu de texte sur une vue à 100%

Problème

L'affichage du texte dans la vue de la page de description dans Commons 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 >.

Cas 3

Problème de rendu de texte sur une vue à 100%

Problème

L'affichage du texte dans la vue de la page de description dans Commons 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.

Cas 4

Problème

Certains textes sont en décalage avec l'emplacement souhaité : vos textes sont groupés avec d'autres éléments qui ne sont pas des textes (cas typique : le nom et l'élévation d'un sommet groupés avec le triangle symbolisant l'emplacement du sommet).

Cause

Peut-être la cabale (en attendant une meilleure piste)

Solution

Dégroupez vos groupes contenant des éléments hétérogènes (texte + autre élément). Par exemple, dans votre calque contenant tous les sommets, faites Édition > sélectionner tout puis Objet > dégrouper.

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, 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. Il est possible de conserver sur un calque non visible le texte suivant le chemin, et de copier celui-ci avant de le transformer en chemin. Ainsi le fichier SVG embarque une version du texte modifiable.

Le texte déborde du cadre

Problème

Vous avez dessiné un cadre, puis ajouté un texte dedans. Mais suivant la taille de la miniature générée à partir de votre image, ce texte déborde du cadre, ou au contraire est très à l'intérieur.

Cause

Pour écrire votre texte, vous avez choisit une certaine taille de police, par exemple 16. Cette taille correspond à un certain nombre de pixels, prédéfini. Quand MediaWiki transforme le SVG en PNG pour l'afficher dans la page de l'image, il prend cette taille de 16 et la transforme en pixels. Mais le problème, c'est que l'image qui est affichée dans la page (ou dans des articles) a une certaine taille, que l'on peut faire varier, alors que la police de 16 aura toujours le même nombre de pixels de large, ce qui peut l'amener à déborder du cadre. Si MediaWiki detecte que l'image finale demandée est vraiment plus petite, il va passer la taille de la police à 15 : le titre rentrera bien dans le cadre, il y aura même de la marge.

Solutions

1. Agrandir la taille de l'image. Si vous la multipliez par deux, MediaWiki aura plus de latitude pour gérer la taille des polices (dans notre exemple, au lieu de passer d'une taille 16 à une taille 15, ce qui fait un gros écart, il va pouvoir passer de 32 à 31).
2. Agrandir un peu le cadre, et choisir de centrer le texte (et non pas aligné à gauche, comme il est par défaut). Comme ça, il aura tendance à grandir par les deux côtés, et il mettra plus de temps à déborder (et en agrandissant le cadre, ça peut ne pas déborder).
3. Transformer les textes en chemin (dans Inkscape, menu Chemin ··> Objet en chemin). A éviter, parce qu'on perd la possibilité d'éditer facilement le texte après, ce qui est un des principaux intérêt du SVG.

   Variante : créer deux calques. Dans le premier (« Text »), saisir tous vos textes en SVG, dans la police et la taille qui vous convient. Dupliquez ce calque, nommez le second « Hidden text - opacity 0% ». Sélectionnez tous les textes (Ctrl+A), ouvrez la fenêtre de propriété (Ctrl+F) et, tout en bas, passez l'opacité à 0%. Les textes disparaissent ainsi à l'affichage, mais sont toujours présents. Revenez alors dans le premier calque, et transformez vos textes en chemin.

   Si les personnes qui travailleront sur ce fichier par la suite ne sont pas trop bêtes, elles comprendront qu'elles peuvent repartir du calque à 0% pour travailler facilement les textes.

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, le texte est rendu avec une police basique (Serif, Sans, Monospace).

Ou bien, vous avez utilisé une police très répandue dans le monde Windows, comme Arial ou Times New Roman. Mais le résultat n'est pas beau.

Cause

La police n'est pas disponible sur les serveurs de la Fondation Wikimedia, voir la liste des polices.

• Avant, les serveurs informatiques de la Fondation Wikimedia fonctionnaient sous Windows. Les polices de caractères Arial et Times New Roman par exemple, très utilisée et venant du monde Windows, étaient bien rendue lors de la conversion des SVG en PNG.
• Maintenant, les serveurs fonctionnent sous Linux. Les polices Arial et Times New Roman n'étant pas libres, elles ne sont pas présentes sur ces serveurs, et lors de la conversion, le logiciel Librsvg tente de les remplacer par des polices libres. Sauf que le résultat n'est pas à la hauteur.

Solutions

1. N'utiliser que les polices de caractères suivantes dans vos fichiers. Elles fonctionnent sans problème en normal, gras ou italique, et leur rendu est le même dans Inkscape et sur Wikipédia ou Commons :
   • DejaVu Sans Condensed : équivalent à Arial
   • DejaVu Serif Condensed : équivalent à Times New Roman.
   • Nimbus Sans L ici ou là : équivalent à Helvetica.
2. Transformer les textes en chemins si vous tenez absolument à conserver leur aspect, mais vous perdrez la possibilité d'éditer ces textes.

   Variante : créer deux calques. Dans le premier (« Text »), saisir tous vos textes en SVG, dans la police et la taille qui vous convient. Dupliquez ce calque, nommez le second « Hidden text - opacity 0% ». Sélectionnez tous les textes (Ctrl+A), ouvrez la fenêtre de propriété (Ctrl+F) et, tout en bas, passez l'opacité à 0%. Les textes disparaissent ainsi à l'affichage, mais sont toujours présents. Revenez alors dans le premier calque, et transformez vos textes en chemin.

   Les personnes qui travailleront sur ce fichier par la suite devraient facilement comprendre qu'elles peuvent repartir du calque à 0% pour travailler facilement les textes.

Certains caractères sont énormes par rapport aux autres

Problème

Une fois l'image chargée sur Commons, certaines lettres apparaissent énormes. Tellement qu'on ne les voit parfois même pas en entier.

Vous avez voulu mettre des lettres en exposant ou en indice. Par exemple, 1^er ou H₂O. Pour cela, vous avez cliqué sur les boutons X^y ou X_y dans la barre d'outil Texte d'Inkscape.

Cause

Librsvg, le moteur graphique de Mediawiki (qui convertit les SVG en PNG) ne sait pas gérer ces exposants ou indices. Au lieu de diminuer légèrement leur taille, il les augmente au contraire démesurément.

Solutions

1. Créez chaque exposant ou indice comme texte indépendant, et positionnez-le ou vous voulez. Groupez-le ensuite avec le reste du texte pour le solidariser. Il vous faudra en réalité trois objets texte : celui placé avant l'exposant, l'exposant lui-même et le texte placé après.
2. Transformer les textes en chemins si vous tenez absolument à conserver leur aspect, mais vous perdrez la possibilité d'éditer ces textes.

   Variante : créer deux calques. Dans le premier (« Text »), saisir tous vos textes en SVG, dans la police et la taille qui vous convient. Dupliquez ce calque, nommez le second « Hidden text - opacity 0% ». Sélectionnez tous les textes (Ctrl+A), ouvrez la fenêtre de propriété (Ctrl+F) et, tout en bas, passez l'opacité à 0%. Les textes disparaissent ainsi à l'affichage, mais sont toujours présents. Revenez alors dans le premier calque, et transformez vos textes en chemin.

   Les personnes qui travailleront sur ce fichier par la suite devraient facilement comprendre qu'elles peuvent repartir du calque à 0% pour travailler facilement les textes.

Les flèches ne s'affichent pas correctement

Problème

Sur l'image que vous venez de charger sur Commons 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 (<shift><ctrl><C>), 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électionnez vos flèches, exécutez l'étape 1 (<ctrl><alt><C>). Sélectionnez une flèche transformée en chemin, et dégroupez-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 compliqué de les modifier sans perdre les proportions.

_

Autre possibilité, un script Inkscape: Extensions / Modifier le chemin / Colorer les marqueurs pour les assortir au contour

Les rayures ne s'affichent pas

Exemple de hachures avec ses guides.

Problème

Vous avez rempli un objet avec des rayures, en suivant la section idoine, mais une fois le fichier déposé sur Commons, elles n'apparaissent pas.

Cause

Librsvg, le moteur graphique de Mediawiki – le logiciel qui pilote Wikipédia – a du mal à gérer les rayures trop proches.

Solutions

• Vous pouvez agrandir l'espacement entre les rayures. Pour cela, cliquez sur un outil de forme (le rectangle par exemple), puis éloignez le carré de la croix.
• Si vous voulez des rayures en diagonale, petite astuce : mettez le carré sur la même ligne que la croix, comme dans l'image ci-contre. Essayez de rapprocher le carré ; ça fonctionne, jusqu'à une certaine limite malgré tout.

La page se redimensionne mal

Comment supprimer l'attribut viewbox.

Problème (abordé ici et ici).

Je veux augmenter ou diminuer la taille de mon image mais la page augmente et diminue proportionnellement ! Inversement, si j'augmente ou diminue ma page, c'est mon image qui augmente ou diminue proportionnellement. Cela arrive surtout avec des fichiers svg dont je ne suis pas l'auteur, et que je veux modifier.

Cause

Utilisation de l'attribut viewBox pour la création automatique d'un système de coordonnées utilisateur initial qui entraîne la mise à l'échelle du graphique dans la zone de visualisation, la taille de celle-ci n'important pas.

Solution 1

Supprimer l'attribut viewbox (voir copie d'écran).

Solution 2

Ouvrir Inkscape (ayant vos attributs initiaux) et y faire glisser votre fichier problématique. Vos attributs initiaux sont conservés et vous pouvez redimensionner votre image.

Broken image

Problème

Je travaille sur Inkscape en utilisant une image JPG 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.

Conseils généraux

Comment modifier un texte dans un SVG ?

Remplacer un texte dans un fichier SVG

Le remplacement d'un texte dans un fichier SVG, par exemple pour une traduction, ne nécessite pas une application dédiée au dessin vectoriel, un bon éditeur de texte suffit pleinement à cette tâche (remplacer du texte). Il faudrait seulement, après avoir ouvert le fichier SVG par votre éditeur, chercher l'endroit de votre texte à remplacer, normalement quelque part entre les balises <text>... et ...</text>, ensuite apportez directement vos modifications sur la chaîne de caractères et enregistrez votre fichier. Vérifiez vos modifications en ouvrant votre schéma par une visionneuse d'images ou dans un navigateur web.
Pour un exemple pas à pas, regardez la vidéo.

Quel logiciel dois-je utiliser ?

Inkscape, téléchargeable ici.

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.

En mathématiques, pour obtenir un dessin SVG dont la création nécessite la rédaction d'un algorithme, on peut utiliser le langage Python et son package svgwrite, qui permet de créer directement un dessin au format SVG.

Dessiner un (très) bon schéma SVG

Exemple de SVG par Al2

Voir le simple mais très pertinent tutoriel de Al2 : Cliquez 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 initiales

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 un 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.

SVG animé et lien dans un SVG

Questions

Sur le site d'Inkscape, il est écrit qu'on peut insérer des liens dans un SVG. Est-ce possible dans Wikipédia ?

On peut également créer des animations en SVG ?

Réponse

Techniquement, c'est possible en effet, mais ça ne fonctionne pas avec Wikipédia, car les navigateurs Internet ne savent pas tous afficher les images SVG. Pour contourner ce problème, MediaWiki convertit les SVG en PNG.

En pratique, il est donc inutile d'ajouter des liens ou de créer une animation.

Néanmoins, vous pouvez créer de tels fichier et les importer sur Commons, pour faire des essais. Les gens intéressés pour tester ces fichiers devront : télécharger et installer le navigateur Internet Opera, et afficher le SVG (cliquer sur l'image, à l'intérieur de la page de l'image ; exemple avec cette page/image).

Pour catégoriser un SVG animé, utilisez [[Category:Animated_SVG]] ; expliquez dans la description de l'image ce que l'on est sensé voir.

Questions sur Inkscape

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

Insérer une image JPG ou PNG dans un SVG

Problème

Vous voulez insérer une image matricielle 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, votre image ne s'affichera pas !

Alléger le poids du fichier

Pour les programmeurs, voir File:Optimisation_SVG.pdf.

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, voire plusieurs méga-octets. Comment l'alléger ?

Il y a plusieurs solutions, qui peuvent toutes être utilisée pour un même fichier.

Solution 1

Rassembler dans un même chemin les chemins similaires.

Pour chaque chemin, Inkscape conserve les coordonnées des points, mais aussi différentes informations (couleurs du fond et des bords, taille, aspect, etc.) Si on a dix objets qui ont le même aspect, on a dix fois ces informations. Si on les rassemble en un même objet, on a toujours les coordonnées des points (ça on y coupe pas), mais toutes les informations supplémentaires n'apparaissent plus qu'une fois.

Pour rassembler des chemins, il faut faire Ctrl+K (et pour les séparer, Ctrl+Maj+K).

Solution 2

Simplifier les chemins.

Quand on crée un chemin, il y a souvent beaucoup de points qui ne servent à rien. Si on a deux points côte à côte situé sur la même ligne droite, on peut tout aussi bien n'en avoir qu'un. Le plus propre serait de passer sur tous les chemins à la main pour enlever les points inutiles, mais en pratique ce serait trop long.

Inkscape propose donc un outil de simplification des chemins (sélectionner le chemin à simplifier, puis appuyer sur Ctrl+L). On peut le paramétrer en allant dans les préférences du logiciel, section Divers, champ Seuil de simplification. Plus le seuil est élevé, plus la simplification est forte. Il faut donc le faire varier en fonction du nombre points du chemin. Commencer par faire un essai avec un seuil à 0,0003. Fais d'autres essais pour voir ce que ça donne.

Solution 3

Passer l'aspirateur.

A chaque fois que vous faites des essais de dégradé de couleur ou de texture, Inkscape les conserve. 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.

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.

Solution 4

Alléger l'image matricielle.

Si vous avez importé une image bitmap dans votre fichier, peut-être est-elle lourde elle-même, ce qui se répercute sur le poids de votre SVG. Essayez d'en diminuer le poids, par exemple en divisant sa taille : si vous ré-enregistrez l'image matricielle à 50% de sa hauteur et de sa longueur, vous divisez sa taille par quatre, et son poids de presque autant. Quand vous la ré-importerez dans Inkscape, vous devrez bien sûr doubler sa taille, mais ce sera comme si vous zoomiez : son poids n'augmentera pas.

Solution 5

Enregistrer le fichier en svg optimisé. Le poids est considérablement diminué ; cependant attention, les bugs sont fréquents (vérifiez bien le résultat et surtout conservez une sauvegarde de votre fichier original !). Enregistrer en simple svg est encore une autre solution, mais l'allègement est moindre et surtout les calques sont perdus.

Solution 6

En cas de création d'un fichier svg à l'aide de QGIS : le composeur d'impression semble enregistrer dans le fichier svg des définitions d'objets qui n'apparaissent pas (au moins une dizaine, ce qui est léger, mais quelque fois beaucoup plus). Pour les mettre en évidence dans Inkscape, sélectionnez tous les objets puis retirez de la sélection tous les objets visibles (que vous voulez conserver). Resteront sélectionnés un certain nombre d'objets n'apparaissant pas et totalement inutiles, à supprimer.

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

Bug d'inkscape présent sur les versions 0.46 et inférieures, corrigé à partir de la version 0.47 et ultérieures.

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é.

Attention, si l'objet que vous tentez de copier est un clone d'un autre objet, ça ne fonctionnera pas. Il faut copier-coller l'original. Pour le trouver, sélectionnez n'importe quel clone, et appuyez sur les touches Maj+D.

Écrire des majuscules accentuées

Problème

Vous avez besoin d'écrire une majuscule accentuée ou un caractère exotique. Mais quand vous tapez le traditionnel « Alt+0201 » pour écrire un « É », il ne se passe rien.

Cause

Ce genre de touches de raccourci est propre au système d'exploitation Windows. Inkscape étant multi-plateforme, il ne les connait pas.

Solution

• En revanche, Inkscape connait les caractères Unicodes. Passez en mode d'édition de texte (F8), cliquez à l'endroit désiré, puis passez en mode Unicode en tapant « Ctrl+U ». Une mention apparait dans la barre d'état en bas : « Unicode (Entrée pour terminer): ». Tapez ensuite le code de la lettre désirée, par exemple « 00C9 » pour obtenir un « É », puis appuyez sur « Entrée ». Attention : vous devez utiliser le clavier principal. Si vous tapez les chiffres avec le clavier numérique, il ne se passera rien. La liste des codes Unicode est disponible ici.
• Vous pouvez aussi écrire votre phrase en minuscule, avec les accents, puis aller dans le menu « Effets ··> Texte », et choisir soit « MAJUSCULES » si vous voulez l'écrire entièrement en lettres capitales, soit « Casse des phrases » si vous voulez seulement une majuscule sur la première lettre de votre phrase.
• Une liste des lettres accentuées et de divers caractères courants se trouve également dans le fichier Image:Maps template-fr.svg, que vous pouvez importer dans Inkscape (Ctrl+I), et ensuite faire du copier-coller.

Créer des hachures

Problème

Vous souhaitez remplir de hachures (ou de points, ou autre motif) une zone de votre dessin.

Solution

Inkscape propose toute une série de motifs par défaut.

Sélectionnez l'objet que vous voulez hachurer, puis ouvrez l'outil Remplissage et contour (Ctrl+Maj+F). Dans l'onglet Remplissage, cliquez sur la cinquième icône, motif (celle qui représente un damier). Une liste déroulante apparaît, qui propose toute une série de hachures noires ou blanches. Il existe d'autres motifs.

Cliquez ensuite sur un des outils de forme (celui pour créer un rectangle par exemple). Dans le coin en haut à gauche de l'image, trois petits signes s'affichent : une croix, un rond et un carré. Parfois ils peuvent apparaitre plus loin, il faut dézoomer fortement pour les voir.

La croix permet de déplacer le motif à l'intérieur de l'objet ; le carré, de le rendre plus grand ou plus petit (effet de zoom du motif à l'intérieur de l'objet) ; et le petit cercle permet d'effectuer une rotation du motif.

Par défaut, les motifs sont en noir ou en blanc (sauf certains comme camouflage). Pour les mettre en couleur, utilisez les scripts proposés par défaut dans Inkscape, dans le menu Extension ··> Couleur.

En particulier, l'effet Remplacer une couleur : mettez en haut la couleur de départ (000000 pour noir, ou FFFFFF pour le blanc), et en bas la couleur que vous souhaitez. Elles sont sous la forme de triplets hexadécimaux ; lire l'article Couleurs du Web pour en savoir plus et trouver des exemples.

Où signaler un bogue de Wikipédia ?

Bugzilla

Sur Bugzilla

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

Les demandes approuvées sont généralement satisfaites (un code prêt) en 7 à 15 jours, et implémentées dans le moteur de Wikipédia 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 des votes (15 jours-1 mois de plus).

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 en français d'Inkscape