Aide:SVG
Le format de fichier SVG ((en) Scalable Vector Graphics) est le format de dessin vectoriel pris en charge par le logiciel MediaWiki, moteur de la Wikipédia. Il est basé sur XML et permet la création d’images sous forme de graphiques vectoriels (quelques exemples). Son utilisation est fortement recommandée pour toute création de schémas, diagrammes, cartes, icônes ou signalétiques, etc[1].
Cette page décrit l’utilisation du format SVG et fournit des liens relatifs à ce sujet.
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Comment utiliser une image SVG ?
[modifier | modifier le code]Le logiciel Médiawiki convertit automatiquement une image SVG au format PNG. Il n’y a donc aucune différence d’utilisation entre le format SVG et les formats de bitmap tels PNG ou JPG ; hormis le fait que le format SVG est le seul à prendre en charge le redimensionnement de l’image sans dégradation du rendu. N’hésitez donc pas à redimensionner une image SVG à votre guise.
Pourquoi utiliser le format SVG ?
[modifier | modifier le code]L’utilisation du format SVG est fortement recommandée pour toute création de schémas, diagrammes, cartes, icônes ou signalétiques car :
- il génère des fichiers plus légers ;
- l’image peut être plus aisément retravaillée (les calques sont conservés) ;
- il simplifie, entre autres, le travail de traduction ;
- il n’y pas de compression de données avec perte, donc pas de détérioration de l’image ;
- mais surtout, le redimensionnement de l’image ne génère aucune détérioration du dessin.
En revanche, il ne faut pas convertir de photographies en SVG (sauf en cas de schématisation), ni « encapsuler » un fichier bitmap dans un SVG.
Limitations techniques du format SVG
[modifier | modifier le code]Le SVG n'est pas conçu pour recréer des illustrations comportant des effets graphiques complexes ou présentant un caractère photoréaliste. Les textures ainsi que certains types de dégradés de couleur ou d'effets de fondu ne peuvent pas être reproduits fidèlement à partir d'une image bitmap. Lorsqu'une image comporte des effets graphiques qui sont trop complexes à vectoriser, il est déconseillé de procéder à la vectorisation, notamment lorsque ces effets apportent une information importante (exemple : image infrarouge, où la couleur est une donnée) ou possèdent un caractère inaltérable (exemple : logotypes d'entreprise très stylisés, où toute altération à l'original peut être assimilée à de la contrefaçon). Toutefois, si ces effets graphiques ont un caractère purement esthétique et s'ils peuvent être remplacés par des effets graphiques approchants ou différents, la vectorisation peut être bénéfique (à voir au cas par cas).
Comment convertir au format SVG ?
[modifier | modifier le code]- La conversion à la main : svg est un dérivé du xml qui fait partie des langages du web. Il peut s'écrire comme l'HTML.
- La conversion depuis une bitmap (un fichier png typiquement) peut se faire grâce à l’outil Potrace intégré à Inkscape (commande "
Chemin/Vectoriser le bitmap
"). Il est recommandé pour la conversion de logos, mais pas pour les cartes ; - La conversion depuis un fichier pdf peut se faire grâce à Adobe Illustrator ou Inkscape;
- La conversion depuis un fichier eps (Encapsulated PostScript) peut également se faire avec Adobe Illustrator (voir aussi le modèle {{Brands of the World SVG}}).
Note : il existe sur Wikipédia le modèle {{Logo à vectoriser}} pour demander la conversion d'un logo.
Comment importer un dessin SVG ?
[modifier | modifier le code]Il est recommandé d’importer sur Commons et non sur Wikipédia, sauf dans le cas de blasons/marques déposées. Voici deux exemples de code wiki pour la documentation d’un dessin SVG.
Un exemple de code wiki pour la documentation d’un dessin SVG créé ex-nihilo
{{Created with Inkscape}} {{Information |Description= {{fr|1= description en français.}} {{en|1= caption in english.}} |Source={{own}} |Date={{subst:CURRENTYEAR}}-{{subst:CURRENTMONTH}}-{{subst:CURRENTDAY2}} |Author=~~~ |Permission={{GFDL-self}} <!-- / {{PD-self}} / {{Cc-by-sa-2.5,2.0,1.0}} / {{PD-user|<pseudo>}} --> |other_versions= }}
Un exemple de code wiki pour la documentation d’une image convertie en SVG[2]
{{Created with Inkscape}}<!----> {{Information |Description= {{fr|1= description en français.}} {{en|1= caption in english.}} |Source=[[:Image:<!-- nom du fichier source -->]]. |Date={{subst:CURRENTYEAR}}-{{subst:CURRENTMONTH}}-{{subst:CURRENTDAY2}} |Author=~~~ |Permission=<!-- reprendre la licence originale --> |other_versions= }} {{Atelier graphique}}<!-- / {{Atelier graphique carte}} bandeau marquant spécifiquement les cartes améliorées par l’atelier -->
Quelle licence choisir ?
[modifier | modifier le code]Le choix d’une licence est obligatoire pour que le fichier puisse être téléchargé sur les serveurs de la Wikimedia Foundation.
Si la nouvelle image, au format SVG, est inspirée d’une image, il faut obligatoirement le mentionner, et prendre en compte la licence de l’image-source pour choisir sa propre licence (en cas de problème, prendre une licence identique).
Voici quelques licences couramment employées :
Code wiki du bandeau de licence | Caractéristiques de la licence |
---|---|
{{GFDL}} | Liberté de diffusion et d’utilisation (même commerciale), liberté de modification, obligation de donner la liste des auteurs. |
{{PD-self}} | Vous renoncez à tous les droits que vous pourriez avoir sur votre création, même à l’avenir. Liberté totale. |
{{Cc-by-sa-2.5,2.0,1.0}} | Vous êtes reconnus comme auteur original de l’image, et toute diffusion doit se faire en reconnaissant votre qualité. La modification, la transformation, l’adaptation de l’image doit se faire impérativement sous cette même licence. Une associations des 2 licences GFDL et CC-BY-SA est conseillée pour les images ! |
Comment catégoriser le dessin SVG ?
[modifier | modifier le code]Il faut placer l’un de ces 3 codes :
{{Created with Inkscape}}/{{Template:Created with Inkscape/fr}}
{{Created with Sodipodi}}
[[Category:SVG]]
Ensuite, suivant le type de dessins, il faut le placer dans une ou plusieurs sous-catégories de : Commons:Category:SVG Maps, Commons:Category:CIA World Factbook maps in French, Commons:Category:Diagrams, Commons:Category:Icons ou Commons:Category:Symbols.
Où trouver des images SVG à importer ?
[modifier | modifier le code]- (en) Open Clip Art Library : Bibliothèque de clip art au format SVG, libre de droits (projet lancé par les créateurs d’Inkscape)
Comment importer une animation SVG
[modifier | modifier le code]Se référer à la section "animation" de cette page.
Dessiner
[modifier | modifier le code]Quel éditeur SVG utiliser ?
[modifier | modifier le code]Inkscape est l’éditeur le plus couramment utilisé. Il est gratuit et peut être téléchargé ici. Mais on peut également employer Sodipodi, Illustrator, Skencil et bien d’autres.
Quelle sont les limitations du format SVG pris en charge ?
[modifier | modifier le code]MediaWiki convertit les images SVG au format PNG. Toutefois, quelques fonctionnalités ne sont pas prises en charge[3] :
- La présence de bitmaps (balise
<image>
), même masqués, dans une image SVG rend impossible l’affichage de cette dernière - Certains caractères Unicode ne sont pas affichés correctement
- La balise
<marker>
n’est pas correctement prise en charge (par exemple, les flèches ne sont pas affichées) - Les balises
<flow...>
ne sont pas correctement prises en charge. Il faut employer<text>
à la place.
Wikimedia Commons recense les images SVG qui ont un rendu incorrect.
Dessiner avec Inkscape
[modifier | modifier le code]Ce petit didacticiel concerne principalement la création de dessins SVG avec Inkscape et plus particulièrement de cartes géographiques. Pour la création d’images bitmap, voir Wikipédia:Atelier graphique/Didacticiels graphiques.
Quel format d’enregistrement utiliser ?
[modifier | modifier le code]C'est-à-dire, doit-on préférer Inkscape SVG ou Plain SVG ?
Voir Commons:Category:Created with Inkscape.
Fonctions utiles
[modifier | modifier le code]Commandes | Fonctions |
---|---|
Home
|
Placer la sélection au premier plan |
End
|
Placer la sélection à l’arrière plan |
Ctrl+g
|
Grouper |
Shift+Ctrl+g
|
Dégrouper |
Ctrl+c
|
Copier la sélection |
Ctrl+Alt+v
|
Coller sans déplacer (superposition) |
Ctrl+a Ctrl+c
|
Copier dans l’éditeur XML (sélectionner, copier) |
Ctrl+a Ctrl+v Ctrl+Enter
|
Coller dans l’éditeur XML (sélectionner, coller, valider) |
Ctrl+s
|
Enregistrement rapide |
Manipulation des calques
[modifier | modifier le code]Opération | Résultat | Commande |
---|---|---|
Original | ![]() |
|
Union | Ctrl++
| |
Différence | Ctrl+-
| |
Intersection | Ctrl+*
| |
Exclusion | Ctrl+^
| |
Division | Ctrl+/
| |
Découper les chemins[4] | Ctrl+Alt+/
|
Traduction
[modifier | modifier le code]Un fichier SVG utilise du texte « encapsulé » qui peut être facilement traduit dans une autre langue. Sur Commons, l’usage est de nommer Image:nom anglais-fr.svg
la version française d’une image, et de placer le modèle {{Translation possible}}
dans la documentation.
En cartographie
[modifier | modifier le code]Le format SVG est plus particulièrement recommandé pour la cartographie car il permet de réemployer facilement une carte de base pour de multiples usages. La vectorisation d’une bitmap est déconseillée car elle génère un fichier volumineux et difficile à retravailler. Il est préférable de charger la bitmap en image de fond (commande Fichier/Importer…
avec Inkscape), puis de la décalquer.
Vous pouvez demander la création, la modification, ou la conversion au format SVG d’une carte à l’atelier graphique spécialisé.
En cas de problème avec un SVG et Wikipédia
[modifier | modifier le code]Si un problème surgit lorsque vous utilisez du SVG sur Wikipédia : différences entre ce qui est affiché dans Inkscape et ce qui apparait sur WP, impossibilité de charger l’image sur Commons, etc. La page Wikipédia:Atelier graphique/FAQ SVG contient des réponses aux problèmes les plus fréquents. Si vous constatez un nouveau problème, signalez-le à l’Atelier graphique.
Notes
[modifier | modifier le code]- Voir (en) Image use policy et « PNG or JPEG images that should be SVG », « JPEG images that should be PNG or SVG ».
- Ajouter "-fr" au nom de la nouvelle image s’il s’agit d’une traduction
- traduit de Commons:Commons:Transition to SVG#Limitations.
- Une coloration du chemin a été ajoutée.
Voir aussi
[modifier | modifier le code]Catégories
[modifier | modifier le code]- Catégorie:Espace Fichier (recense les images ; mais c’est embryonnaire ; voir plutôt sur Commons)
- Toutes les images SVG sur Commons
Projets et ateliers
[modifier | modifier le code]- Wikipédia:Atelier graphique : amélioration / modification / création de cartes
- Projet:Illustrations : Cartographie, Blasons, Drapeaux, Logos
Liens externes
[modifier | modifier le code]- (fr) La page francophone du format SVG
- (fr) Le forum Sodipodi/Inkscape de LinuxGraphic
- (en) A Guide to Inkscape
- (en) Création de scripts python pour Inkscape
- (en) Vector Magic Site de vectorisation d’image conservant les couleurs.
- (en) SVG image support