Utilisateur:Marc BERTIER/SVG

Une page de Wikipédia, l'encyclopédie libre.

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, photographies exceptées.

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 ?[modifier | modifier le code]

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 ???? (bitmaps) et de texte.

Voir aussi :

Créer des images SVG pour Wikimedia Commons[modifier | modifier le code]

Création et édition[modifier | modifier le code]

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

Particularités de SVG[modifier | modifier le code]

Bitmaps[modifier | modifier le code]

Dans le cadre de Wikimedia Commons, il est recommandé de ne pas importer d'images bitmap dans des fichiers SVG. Il est 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.

Cette pratique va à l'encontre de l'idée de Commons: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[modifier | modifier le code]

Les images SVG images peuvent incorporer une animation avec SMIL, mais comme les fichiers .svg sont systématiquement convertis en .png lors de leurs utilisation 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[modifier | modifier le code]

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

Fichiers externes[modifier | modifier le code]

Avant d'enregistrer la version finale du document, 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[modifier | modifier le code]

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[modifier | modifier le code]

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 incorposre des données (comme les préférences de l'utilisateur) inutile 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).

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

Polices de texte[modifier | modifier le code]

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[modifier | modifier le code]

On peut souhaiter contrôler un document avant publication à l'aide de SVG Validator (http://validator.w3.org/) qui pourra indiquer de possibles problèmes. Malheureusement, ce programme de validation ne peut prendre en compte RDF ou d'autres métadonnées que l'on souhaiterait inclure, mais peut détecter des erreurs dans un document SVG. De plus une déclaration 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[modifier | modifier le code]

Pages de description d'image[modifier | modifier le code]

La procédure de mise en ligne est disponible à Commons:First steps/Formulaire de mise en ligne.

Ne pas négliger de remplir soigneusement la zone (tl). Une zone d'information correctement renseignée facilite le classement et la traduction par d'autres.

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

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

Classement des documents SVG[modifier | modifier le code]

SVG
aucune sous-catégorie

Désormais, to document graphique SVG doit être classé dans la catégorie Category:SVG, mais merci de ne pas le faire directement pour éviter la surcharge de la catégorie et par là même sa perte d'efficacité. Utiliser des sous catégories thématiques.

Merci de marquer les catégories non relatives 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[modifier | modifier le code]

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.

Naming conventions[modifier | modifier le code]

There are no naming conventions by now (May 2008), besides beginning with "SVG ". Just do what is reasonable and coherent to our existing categories.

Tagging SVGs[modifier | modifier le code]

See Category:SVG marker templates for all SVG markers available

SVG software tags[modifier | modifier le code]

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

Modèle:Created with Adobe Illustrator

Modèle:Created with CorelDraw

Modèle:Created with Dia

Modèle:ElCompLib

  • (tl), does not sort by now (May 2008)

Modèle:Fig2SVG

  • (tl), does not sort by now (May 2008)

Modèle:Gnuplot

Modèle:Created with Inkscape

Modèle:Created with OpenOffice.org

Modèle:Created with Sodipodi

  • (tl), does not sort by now (May 2008), also for typesetting

Modèle:Created with Scribus

See Software section for a list of programs

SVG file type tags[modifier | modifier le code]

For making use of elements from other SVG images available on Commons, please use (tl) – see Category:Vector images using elements from other vector images Modèle:AttribSVG

All validated SVGs should be tagged (tl), you will find them automatically sorted at Category:Valid SVG. Please do not categorize directly. Modèle:ValidSVG

For animations you can use (tl) Modèle:Animated SVG SVGs containing JavaScript cannot be uploaded at present, but this template anticipates that possibility (tl) Modèle:Scripted SVG

SVG conversion tags[modifier | modifier le code]

If you find raster images, that should be vector graphics, especially diagrams, charts, graphs and some drawings, tag them (tl)

Specials: For musical notation (tl), for Nuvola (tl)

For SVGs using embedded bitmaps causing bad quality, use (tl)

SVGs in MediaWiki[modifier | modifier le code]

How SVGs work in MediaWiki[modifier | modifier le code]

When you upload your SVG to Commons (or any other MediaWiki wiki), the software automatically produces PNG thumbnails, both embedded in articles and the image at the description page. The reader will only ever access your raw SVG if one clicks on the image name link that appears below the description page's thumbnail, on the Image: page. (Got that? You can also access it directly through a Media: link.) The rest of the time, they are only seeing a PNG produced from the SVG.

MediaWiki uses rsvg to convert SVGs to PNGs for display (SVG-rendering), so you might want to check your file with that program before uploading. The rsvg-view can be used on UNIX systems to preview how SVGs will look when rendered by MediaWiki.

See the SVG image support page on Meta for more.

Scaling SVGs via MediaWiki[modifier | modifier le code]

What this means... say you want to produce a large version of your SVG for detailed maps, or using in bitmap software like gimp, or calligraphy printed out one character per page, or something like that. You need to force MediaWiki to produce a huge PNG thumbnail, by using
http://commons.wikimedia.org/w/thumb.php?f=Foo.svg&w=1000
or by doing something like [[Image:Foo.svg|1000px]] in the sandbox or your talk page or somewhere else unimportant. Printing this giant PNG will look much better than if you try to scale up one of the default thumbnails! Off course you can also use for printing SVG software like Inkscape but sometimes the shows something others than on the screen (black background, other fonts, ...).

Frequently asked questions[modifier | modifier le code]

Why doesn't my image render?
This might be due to a number of reasons. Most often it is due to a reference to an external file, a leftover from tracing a bitmap, perhaps. (The rendering stops as the website tries to find this other file). To solve this problem, in your editor, make sure to remove any references to other files before saving the final version. If it is necessary to use bitmaps you can use in Inkscape the function to embedding all images (Effects menu -> Images -> Embed All Images). See also Plain SVG, Compressed SVG above.
Where can I get extra help with SVG images?
Try Commons:Graphic Lab if you have a problem with an individual image. Commons:Graphics village pump can be useful for SVG discussion (as well as graphics in general). Often SVG enthusiasts will be around on those pages, and are more than willing to help.
How large should my SVG images be?
The absolute size of the document does not matter much, since that only affects how it is displayed when viewed by itself. The file size does not depend on the document dimensions! The image can be stretched or compressed as much as a user wants, without changing quality, or file size. With that in mind, the recommended image width is around 600px. When a user views the full size image, a width of 600-800px gives them a good close-up view, while still allowing them to fit the entire image on their screen without having to zoom in or out.
How do you change the document size in Inkscape?
The document size starts out with an A4 page. To make this larger or smaller, create a rectangle with the dimensions you desire the document to be, and select it with the arrow tool. Then select File>Document Properties, and under Custom Size, choose Fit page to selection, and click OK. You can now delete the "sizing" rectangle, and move or resize the other elements to fit the space you have created.
My text is appearing as little blocks, or isn't showing up at all after uploading to Commons!
Some text features of Inkscape are not supported by MediaWiki's renderer. Select the text objects, and select the command Path>Object to Path. This will convert the text to paths. Save as Plain SVG, and reupload your file.
My arrowheads/dashed lines are appearing as little blocks, or aren't showing up at all after uploading to Commons!
Some stroke features of Inkscape are not supported by MediaWiki's renderer. Select the offending objects, and select the command Path>Stroke to Path. This will convert the strokes to paths. Save as Plain SVG, and reupload your file.
How do I get rid of the transparent background?
Do you really need to? Usually not! MediaWiki's renderer will convert the SVG file to PNG with a transparent white background for display (displays white if your browser doesn't support PNG transparencies). Browsers that natively support SVG transparency will show the background color through the image, white! Leaving your image transparent behind helps future editors, and allows the image to be displayed over other background colors without a big white square. However, if your image really needs a specific colored background, create a rectangle the size of the image, fill it with the background color of your choice, and choose the command Object>Lower to Bottom. Save your image, and enjoy the solid background color!
My fonts aren't rendering correctly. What fonts are supported by the site's renderer?
See m:SVG fonts for a list.
I'm drawing a flag (or some other insignia) and it asks for PANTONE or CMYK colors. What do I do?
First, if you see the words PANTONE or CMYK, try to see if they have something called RGB. Wikimedia Commons images are used a lot on Wikimedia projects such as Wikipedia, etc, and are designed for use on computer screens. If you can find RGB colors, use them in favour of others. If you can't, you can convert the colors using your program's own color picker, or, in the case of PANTONE, Color Finder (http://www.pantone.com/pages/pantone/colorfinder.aspx), from which you can extract RGB values for a color code.

Software[modifier | modifier le code]

Many programs can handle SVG files. You may like to try one given below, though these are not the only programs around. Some are available for free download, while others are commercial software.

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.

See Software tags section for information about the software, the SVG file was done with, and specific handling hints.

Rendering[modifier | modifier le code]

  • rsvg, used by MediaWiki
  • rsvg-view can be used on UNIX systems to preview how SVGs will look when rendered by MediaWiki.
  • Firefox 2.0, Konqueror (of KDE) and Opera support SVG natively.

General editors[modifier | modifier le code]

  • 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: An open source, freely downloadable application for graphically editing SVG files. Available on Windows, Mac OS X, and Linux.
  • SodiPodi Also for graphically editing SVG files, available on Windows and Linux. Inkscape is based on the Sodipodi-engine.
  • OpenOffice.org/StarOffice Draw, an open source, freely downloadable drawing program which comes as part of the the Open Office suite. Can export to SVG, reads SVG with SVG Plugin
  • Dia An open source, freely downloadable application for creating diagrams. SVG export optional. Runs on Windows, Mac OS X, and Unix systems. (Currently has some bugs in SVG export.)
  • Adobe Illustrator
  • CorelDraw

Specific application[modifier | modifier le code]

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

Validators[modifier | modifier le code]

Converters[modifier | modifier le code]

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.

See also[modifier | modifier le code]

Modèle:Meta

Technical:

Specific application:

Maintenance:

External links[modifier | modifier le code]

Free sources[modifier | modifier le code]

Category:Commons help ? fr:Scalable Vector Graphics

Ce document provient de « https://fr.wikipedia.org/w/index.php?title=Utilisateur:Marc_BERTIER/SVG&oldid=198367475 ».