Help:SVG/fr

From Wikimedia Commons, the free media repository
Jump to: navigation, search
Cette page dans d’autres langues :

English | español | français | português | +/−

SVG (scalable vector graphics) est un format de fichier admis sur Wikimedia Commons. Il est particulièrement adapté aux diagrammes, aux cartes et à d'autres types d'images, à l'exception des photographies.

Les fichiers SVG sont utilisés assez largement sur Wikimedia Commons. Vous trouverez ici quelques éléments pour vous familiariser avec l'usage de SVG sur Wikimedia Commons.

Qu'est ce que SVG ?[edit]

Scalable vector graphics (SVG) est une spécification XML et un format de fichiers permettant la description vectorielle de graphismes à deux dimensions, fixes ou animés. Le stockage peut être réalisé en texte brut ou bien sous forme compressée (binaire). SVG permet l'incorporation de graphismes de type bitmap et de texte.

Voir aussi :

Créer des images SVG pour Wikimedia Commons[edit]

Création et édition[edit]

Des programmes pouvant être utilisés pour créer des images SVG sont listés plus bas dans Editeurs SVG. Il reste toujours possible d'éditer directement le code SVG en utilisant un éditeur de texte, ou IDE.

Particularités de SVG[edit]

Bitmaps[edit]

Dans le cadre de Wikimedia Commons, il est recommandé de ne pas importer d'images bitmap dans des fichiers SVG.

Il est en effet tentant d'importer par exemple une carte dans un SVG, d'ajouter du texte et d'enregistrer dans un SVG ; ou encore de créer un diagramme avec SVG, puis de l'enjoliver par inclusion d'un logo sous forme d'une bitmap. Mais cette pratique va à l'encontre de l'idée de Transition vers SVG et tout document SVG incluant une bitmap sera automatiquement marqué comme BadSVG (SVG douteux) par le robot SVGbot actuellement en cours de développement.

Si un élément bitmap doit être incorporé dans un document, il devrait être possible de le convertir, voire de le redessiner en SVG.

Animation[edit]

Les images SVG peuvent incorporer une animation avec SMIL, mais comme les fichiers .svg sont systématiquement convertis en .png lors de leurs utilisations dans les projets Wikipedia, l'animation ne sera visible que sur la page dans Wikimedia.

La section Marquage des SVG indique comment marquer un document comme animé.

Utilisation de scripts[edit]

MediaWiki n'accepte pas les fichiers SVG contenant des scripts.

Fichiers externes[edit]

Avant d'enregistrer la version finale du document, il convient de s'assurer d'avoir supprimé toute référence à d'autres fichiers utilisés pour construire le document SVG. Si de telles références subsistaient, le programme de restitution serait incapable de trouver ces fichiers et la restitution échouerait.

Mise au net[edit]

Il est aussi souhaitable de supprimer toute définition inutilisée (defs) de manière à obtenir un fichier plus petit.

SVG ("Plain SVG"), SVG compressé, spécifications génériques[edit]

Par soucis de compatibilité, il est préférable d'enregistrer en mode "plain SVG". Ce choix est habituellement disponible dans la fenêtre de dialogue "Enregistrer sous..." du programme utilisé, comme format alternatif d'enregistrement (par opposition au choix SVG, qui pourrait être une version de SVG "propre au logiciel").

Dans Adobe Illustrator ou Inkscape (et particulièrement Illustrator) le format de fichier par défaut incorpore des données (comme les préférences de l'utilisateur) inutiles au final. Ceci augmente inutilement l'encombrement du fichier et conduit parfois à un affichage incorrect des vignettes (Voir bugzilla:2888).

En revanche, lors de la sauvegarde comme "Plain SVG", des données utiles peuvent être perdues, comme avec Inkscape, les données relatives aux couches et les métadonnées. On peut vouloir créer une version "plain SVG" pour publication et conserver une copie de référence pour votre propre usage, ou encore marquer comme {{Created with Inkscape|IMPORTANT=yes}} (Voir Help:Inkscape(en)).

Inkscape et d'autres programmes permettent aussi l'enregistrement comme SVGZ (SVG compressé), qui n'est pas admis sur Wikimedia Commons.

Polices de texte[edit]

Seules quelques polices peuvent être restituées avec la balise <text>. Pour en trouver une liste suivre ce lien. Il est préférable d'utiliser ces polices plutôt que de convertir d'autres polices, pour éviter l'alourdissement du fichier et la constitution de versions locales du document.

Le texte dans Inkscape utilise par défaut une boite "Flowed Text" qui peut causer des problèmes. Pour régler ça, utiliser simplement la commande "Convert To Text" du menu "Text" de Inkscape.

Validation[edit]

On peut contrôler la validité d'un document avant publication. Le logiciel SVG Validator (http://validator.w3.org/) indiquera de possibles problèmes. Malheureusement, ce programme de validation ne prend pas en compte le Resource Description Framework ou d'autres métadonnées que l'on souhaiterait inclure, mais il peut cependant utilement détecter des erreurs dans un document SVG. De plus une Définition_de_type_de_document est nécessaire bien que non requise par SVG et pourra causer des difficultés.

Voir plus bas Marquage des SVG pour indiquer que le document a été validé.

Mise en ligne et classement[edit]

Pages de description d'image[edit]

Ne pas négliger de remplir soigneusement la zone {{information}}. Cette zone correctement renseignée facilitera le classement et la traduction par d'autres contributeurs.

Si le fichier a passé avec succès le test de validation, on pourra placer l'icône {{validSVG}} dans la page de l'image.

Voir la section Marquage logiciel pour plus d'information sur le médium SVG.

Classement des documents SVG[edit]

Désormais, tout document graphique SVG doit être classé dans la catégorie Category:SVG. Cependant cela ne doit pas être effectué directement pour éviter la surcharge de la catégorie SVG et par là même sa perte d'efficacité. AU lieu de cela, le bon moyen est d'utiliser des sous catégories thématiques.

Merci de marquer les catégories relatives non pas au sujet mais à des aspects techniques, comme "created with..." (créé avec...), "animated" (document animé), "valid" (validé), en les faisant débuter par «*» pour les exclure de l'ordre alphabétique.

Arborescence des catégories SVG[edit]

L'arborescence principale est Category:SVG, elle même dans Category:Images et elle même dans Category:Media types.

Pour ce qui est des sous catégories thématiques, il est inutile de reconstruire la hiérarchie complète Category:Topics. Il devrait normalement suffire de rassembler des sujets. Exemple : comme Category:SVG colors contient tous les documents SVG de Category:Colors, il est inutile de créer Category:SVG – red, Category:SVG – blue, etc. Peut-être d'autres sous catégories seront-elles utiles plus tard, mais il faut rester homogène avec la présente arborescence des sujets et ne pas classer de document SVG dans une unique catégorie SVG : les catégories ont comme but principal de trouver des documents, pas de les cacher. Attention à ne pas sur catégoriser pour favoriser la sélection de la page... ... and the direct SVG subcategory for classifying, but maybe put your black colour box SVG file into Category:SVG colors and Category:Black.

Voir Commons:Categories pour des renseignements généraux sur les catégories.

Conventions de nommage[edit]

En mai 2008, il n'y a pas de convention de nommage, au delà du préfixe "SVG ". Rester logique et cohérent par rapport aux catégories existantes.

Marquage des SVG[edit]

See Category:SVG marker templates for all SVG markers available

SVG software tags[edit]

For the software used (Category:SVG graphics by software used):

Adobe Illustrator Icon (CS6).svg
This vector graphics image was created with Adobe Illustrator.
Corel logo.svg
This vector graphics image was created with CorelDRAW.
This diagram, document, or vector graphics image was created with Dia.
  • {{Fig2SVG}}, does not sort by now (May 2008)
Gnome-mime-image-x-xfig.png
This SVG vector image was created with Xfig and a Fig to SVG conversion tool.
  • {{gnuplot}}, does not sort by now (May 2008)
Lissajous small.svg
This image was created with gnuplot. .
Inkscape Logo.svg
This vector image was created with Inkscape.
OpenOffice.org 2 icon.svg
This file was created with OpenOffice.org.
Sodipodi-logo squirrel.svg
This vector image was created with Sodipodi-Inkscape.
Scribus logo.png
This typeset document or vector graphics image was created with Scribus.

See Software section for a list of programs

Identification des types de fichiers SVG[edit]

Pour utiliser des éléments extraits d'autres documents SVG figurant dans Wikimedia Commons, merci d'utiliser {{attribSVG}} – Voir Category:Vector images using elements from other vector images

SVG in SVG.svg This vector image includes elements that have been taken or adapted from this: [[:File:|]].

Tous les documents SVG validaté doivent être marqués {{validSVG}}. Ils seront ainsi automatiquement classé à leur place dans la catégorie Category:Valid SVG. Ne pas les placer directement dans cette catégorie.

Pour des documents animés, utiliser {{animated SVG}}

Runner-animated-svg.svg This image is an animated SVG file. The animation uses SMIL. The .png preview above created by RSVG is not animated and may be incomplete or incorrect. To see an animation run, open it in an SVG animation capable browser or viewer, such as Opera (8+), Safari (4+), Chrome (2+), or Firefox (4+). Internet Explorer (9+) supports SVG, but not SMIL. Other SVG animations can be found at Category:Animated SVG.

العربية | Boarisch | català | Deutsch | Deutsch (Sie-Form)‎ | English | español | فارسی | suomi | français | עברית | हिन्दी | magyar | Հայերեն | íslenska | italiano | 日本語 | lietuvių | македонски | മലയാളം | Plattdüütsch | Nederlands | occitan | português | português do Brasil | русский | українська | 中文 | 中文(简体)‎ | 中文(繁體)‎ | +/−


Les documents SVG incluant du JavaScript ne peuvent actuellement pas être mis en ligne, mais le modèle suivant préfigure cette possibilité future {{scripted SVG}}

Cog-scripted-svg.svg This is a scripted SVG file (it contains JavaScript). The preview above may be incomplete or incorrect. To use the interactive possibilities open it in your browser.

العربية | Deutsch | Deutsch (Sie-Form)‎ | English | فارسی | magyar | italiano | македонски | Nederlands | polski | português | русский | 中文(台灣)‎ | +/−

Etiquette Convertir en SVG[edit]

Si l'on découvre des images de type bitmap, qui devraitent être des graphiques vectoriels, en particulier des diagrammes, des schémas charts et certains dessins, les étiqueter {{Convert to SVG}}

Specials: For musical notation {{convertToSVG-MN}}, for Nuvola {{N2+SVG}}

Pour les documents SVG incluant des bitmaps (et donc de qualité douteuse), utiliser {{badSVG}}

Les documents SVG et MediaWiki[edit]

Comment fonctionnent les documents SVG dans MediaWiki[edit]

Quand on met en ligne un document SVG sur Wikimedia Commons (ou sur tout autre wiki basé sur MediaWiki), le logiciel fabrique automatiquement des vignettes au format PNG, à la fois pour inclusion dans les articles et pour l'image de la page de description. L'internaute pourra accèder au document SVG lui-même uniquement à l'aide du lien portant le nom de l'image et qui apparait sous la vignette de la page de description, on the Image: page. (Pigé ? On peut aussi atteindre directement le document SVG par un lien Media:). Le reste du temps, ce que l'on voit, c'est un PNG fabriqué à partir d'un SVG.

MediaWiki utilise rsvg pour convertir les documents SVG en PNGs pour affichage (SVG-rendering), il faut donc tester le fichier avec ce programme avant de le mettre en ligne. On peut utiliser rsvg-view sur des systèmes UNIX pour une visualisation de contrôle préalable des documents SVG destinés à MediaWiki.

Pour plus de détails, voir la page (en)support des images SVG sur Meta.

Changement d'échelle de documents SVG via MediaWiki[edit]

Si on souhaite, par exemple, créer une version de grande taille d'un document SVG, pour le placer dans une carte détaillée ou pour l'utiliser dans un logiciel d'image bitmap (comme Gimp), ou encore pour une impression de qualité avec un caractère par page, ou quelque chose de ce genre, on doit forcer MediaWiki à produire une énorme image PNG, en utilisant
http://commons.wikimedia.org/w/thumb.php?f=Foo.svg&w=1000
ou avec quelque chose du genre de [[Image:Foo.svg|1000px]] dans le bac à sable, dans votre page de discussion ou quelque part où ça ne gènera pas. Le résultat sera de bien meilleure qualité que si l'on essaie d'agrandir une des images ! Bien sûr il est aussi possible d'utiliser un logiciel traitant SVG (comme Inkscape), mais on a parfois la surprise de voir à l'impression des éléments n'apparaissant pas à l'écran (Fond noir, autres polices de caractères, etc.).

Questions fréquentes - Foire aux questions[edit]

Pourquoi l'image ne s'affiche t-elle pas ?
Cela peut avoir de nombreuses causes. Le plus souvent cela est dû à une référence à un fichier externe non éliminée, peut-être un résidu d'une opération sur un élément bitmap (la restitution s'arrête dès l'échec de l'accès au fichier externe). La solution consiste à s'assurer dans le logiciel d'édition, de la suppression de toutes les références à d'autres fichiers avant l'enregistrement de la version finale. Si il est nécessaire d'utiliser des bitmaps, il faut les inclure avec la fonction de Inkscape prévue pour cela (Effects > Images > Embed all images). Voir aussi plus bas SVG ("Plain SVG"), SVG compressé, spécifications génériques.
Où trouver plus d'aide sur les images SVG ?
Essayer Commons:Graphic Lab en cas de problème sur une image particulière. Commons:Graphics village pump est utile pour discuter de SVG et de techniques relatives aux graphiques en général. Des utilisateurs enthousiastes de SVG rôdent régulièrement dans ces parages et seront surement disposés à vous donner un coup de main.
Quel va être l'encombrement d'un document SVG ?
La dimension absolue du document importe peu, puisqu'elle n'intervient qu'à l'affichage. (when viewed by itself). La taille du fichier ne dépend pas des dimensions du document ! L'image peut être étirée ou resserrée à volonté sans changer la qualité ni la taille du fichier. Sachant cela, la taille recommandée est autour de 600 pixels. Quand un utilisateur affiche l'image en taille réelle, une largeur de 600 à 800 pixels donne une vue commode, en laissant la possibilité d'afficher en plein page sans devoir zoomer.
Comment changer la taille d'un document dans Inkscape ?
Initialement le document est créé dans une page A4. Pour un document plus grand ou plus petit, créer un rectangle des dimensions souhaitées pour le document et sélectionner ce rectangle (avec l'outil flèche). Choisir alors Documents properties (Propriétés du document) dans le menu File (Fichier). Dans Custom size (taille personnalisée), choisir Fit page to selection (Adapter la page à la sélection), et cliquer sur OK. On peut alors supprimer le rectangle et déplacer et/ou redimensionner les autres éléments pour les placer dans l'espace créé.
Le texte apparait comme de petits blocs, ou n'apparait pas du tout après mise en ligne dans Wikimedia Commons !
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, quoi.
Solution 1 (recommandée) : Sélectionnez les textes qui posent problème, dans la fenêtre d'édition d'Inkscape. Puis allez dans le menu Texte, et choisissez Convertir en texte. Lors d'un nouvel import, les carrés noirs ont (normalement) disparus. Vous pouvez tester directement dans Firefox l'image avant de l'importer, lui non plus ne gère pas cette balise. Pour tester votre image, dans Firefox, allez dans Fichier, puis Ouvrir un fichier.
Cause 2 : Quelques propriétés des textes ne sont pas supportées par la fonction de restitution de MediaWiki. Sélectionner les objets en cause puis choisir la commande Path > Object to Path. Les textes seront ainsi convertis en paths. Enregistrer comme Plain SVG, puis ouvrir de nouveau le fichier.
Les flèches et/ou les lignes pointillées apparaissent comme des blocs, ou n'apparaissent pas du tout après mise en ligne dans Wikimedia Commons !
Quelques propriétés des lignes ne sont pas supportées par la fonction de restitution de MediaWiki. Sélectionner les objets en cause puis choisir la commande Path > Object to Path. Les lignes seront ainsi converties en paths. Enregistrer comme Plain SVG, puis ouvrir de nouveau le fichier.
Comment empêcher un fond transparent ?
Est-ce vraiment utile ? Généralement pas ! La fonction de restitution de MediaWiki convertira le fichier SVG en PNG avec un fond transparent (affiché en blanc par les navigateurs qui n'acceptent pas la transparence dans les PNG). Les navigateurs qui supportent en natif la transparence des SVG (des PNG ? -ndt-) laisseront voir la couleur de fond, blanc (ndt : pourquoi blanc ? est-ce le cas lorsqu'aucune couleur de fond n'a été définie ?). Laisser transparent le fond d'un document SVG, sera plus pratique pour les modifications ultérieures et permet l'affichage sur d'autres fonds et pas sur un grand rectangle blanc (ndt : c'est ce que transparent signifie !). Si toutefois un fond coloré spécifique est utile, on l'obtient en créant un rectangle de la taille de l'image, que l'on remplit de la couleur souhaitée et que l'on place en fond par Object > Lower to Bottom. Enregistrer l'image, et profiter bien du fond "en dur". !
Les polices ne sont pas restituées correctement. Quelles polices sont supportées par la fonction de restitution sur le site ?
Voir la liste à m:SVG fonts.
Lors du dessin d'un drapeau ou d'autre chose du genre, arrive la question Couleurs PANTONE ou Couleurs CMYK. Que faire ?
D'abord, si le mot PANTONE ou CMYK apparait, voir si quelque chose comme RGB n'est pas proposé. Les images dans Wikimedia Commons images sont très utilisées dans les projets Wikimedia comme Wikipedia et sont destinés à l'affichage sur des écrans d'ordinateurs. Si c'est disponible, les couleurs RGB sont préférables. Sinon, convertir les couleurs avec l'outil de votre programme. Dans le cas de couleurs PANTONE, utiliser Color Finder (http://www.pantone.com/pages/pantone/colorfinder.aspx), pour extraire les valeurs RGB correspondant à un code de couleur.

Logiciels[edit]

De nombreux programmes peuvent manipuler des fichiers SVG. On peut essayer l'un de ceux listés plus bas, cependant la liste n'est pas exhaustive. Certains sont téléchargeables gratuitement, d'autres sont commercialisés.

Puisque SVG n'est qu'une spécification XML, on peut écrire des fichiers SVG à l'aide d'un éditeur de textes. Dans les faits de nombreuses images SVG sont écrites ainsi. Un éditeur syntaxique est bien pratique.

As SVG is just an XML specification, it is possible to write SVG files in a text editor. In fact, many SVG images are written in text editors. An editor which can highlight the syntax is helpful.

Voir la section Software tags pour plus de renseignements sur le logiciel utilisé pour construire un fichier SVG, et les remarques particulières.

Affichage / restitution[edit]

  • rsvg, utilisé dans MediaWiki
  • Eye of Gnome le visionneur de l'environnement GNOME sous Linux permet d'afficher ( entre autres ) des images SVG utilisant la même bibliothèque librsvg que le précédent .
  • rsvg-view ( en ligne de commande ) peut être employé sur les systèmes UNIX pour pré visualiser des images destinées à Mediawiki.
  • Firefox (rev.>= 2.0), Konqueror (de KDE) et Opera supportent le SVG en natif.

Editeurs SVG[edit]

  • SVG can be edited by any text-editor, it is usually stored XML-type plain-text. An editor which can highlight the syntax is helpful.
  • Inkscape: Logiciel open source, téléchargeable gratuitement, pour l'édition graphique de documents SVG. Disponible pour Windows, Mac OS X, et Linux.
  • SodiPodi Egalement destiné à l'édition graphique de documents SVG, disponible pour Windows et Linux. Inkscape est basé sur le moteur Sodipodi.
  • OpenOffice.org/StarOffice Draw, logiciel open source de dessin, téléchargeable gratuitement. Fait partie de la suite logiciel Open Office. Permet l'exportation en SVG, lit SVG à l'aide du "plugin" SVG Plugin
  • Dia Logiciel open source, téléchargeable gratuitement, pour la création de figures. SVG export optional. Fonctionne sous Windows, Mac OS X, et Unix. Présente actuellement quelques erreurs dans l'exportation vers SVG.
  • Adobe Illustrator
  • CorelDraw

Applications particulières[edit]

  • Graphviz: An open source application for automatic diagram layout.
  • BKchem: A free software to draw chemical structures in SVG. Runs on Windows, Mac OS X, and Unix systems.

Validateurs[edit]

Convertisseurs[edit]

From raster formats
  • Most SVG-editors include a Raster-to-Vector-converter (Tracer)
  • Delineate, a free tracer, it is an Java-based interface for Potrace and Autotrace. Potrace is also implemented into Inkscape (>Path >Trace Bitmap)
  • Vector magic: An online free raster to svg converter.
From other vector formats
  • FreeSVG can convert PDFs to SVG via a web interface
  • Scribus (with GhostScript) can import EPS (Encapsulated PostScript) files and export them to SVG.

Voir aussi[edit]

Wikimedia-logo-meta.svg
Meta has a page about this at:

Aspects techniques :

Applications particulières :

Maintenance :

Liens externes[edit]

Sources gratuites[edit]