Support du SVG sur c2c

french
italiangermanenglishspanishcatalanbasque

Le format SVG est le format par excellence pour la création de schéma collaboratifs. Cet article présente son utilisation dans le cadre du site camptocamp.org.

Summary


Le SVG (Scalable Vector Graphics) est un format d'image vectorielle qui a de nombreux intérêts pour la création de schémas sur camptocamp.org. Les principaux avantages sont :

  • Facilité de création de schémas
  • Facilité de mise à jour (utile notamment pour les images collaboratives). Il est aisé d'enlever, modifier ou créer de nouveaux traits et symboles sur le fichier SVG
  • Rendu des courbes et des chemins quel que soit le zoom

Lire les fichiers SVG de camptocamp.orgSummary

1274420897_845167123.pngView picture information
Lien vers fichier SVG

Récupérer la version SVG d'une image

Lorsqu'une image au format SVG est mise en ligne sur le site, une version matricielle (au format JPEG ou PNG) de l'image est générée. C'est cette version qui est affichée par défaut.
Sur la page de l'image, il existe cependant un lien permettant de récupérer l'image au format SVG (voire figure).
Voir un exemple

Visionner un fichier SVG

En dehors des programmes permettant d'éditer les SVG, il existe de nombreux programmes permettant d'afficher ces fichiers. Concernant les navigateurs web, la plupart d'entre eux peuvent afficher les fichiers SVG de manière native, en dehors toutefois d'Internet Explorer.

Créer des fichiers SVGSummary

Logiciels

De nombreux programmes permettent de créer des fichiers au format SVG, notamment Inkscape, Adobe Illustrator, CorelDraw, OpenOffice.org Draw, pour ne citer que les plus connus. Nous vous conseillons l'utilisation de Inkscape, qui est libre, gratuit et à la fois facile d'utilisation et très complet.

Un article d'aide donne quelques indications pour créer des schémas au format SVG. Vous pouvez aussi consulter ce document qui présente les commandes utiles pour faire ses premiers pas avec le logiciel. Plus complet, il existe plusieurs guides en ligne, par exemple ici.

Avant d'envoyer un fichier SVG sur camptocamp.org

Insérer les images dans le fichier SVG

Si votre fichier contient des références vers des documents extérieurs (et notamment des images JPEG ou PNG), il faut les insérer dans le fichier SVG pour qu'elles apparaissent dans l'image matricielle générée.
Avec Inkscape, menu Extensions > Images > Incorporer les images...

Dimensions du document SVG

Le serveur va essayer de créer une image de la taille spécifiée par le document SVG (dans Inkscape, faire Fichier > Propriétés du document ou Ctrl+Maj+D). Si cette taille ne respecte pas les dimensions acceptées pour les images sur c2c, le fichier sera rejeté.

Il faut également prendre en compte que les images produites à partir du SVG correspondent à la "page". Si vos tracés sont en dehors de la page, ou n'en occupent qu'une petite partie, cela se reflétera sur l'image générée.

Taille du fichier

De la même manière, le serveur refusera tout fichier SVG de taille trop importante (> 2Mo). Vous pouvez utiliser différentes méthodes pour y remédier :

  • Si votre fichier contient des images insérées,
    • Utilisez une version de l'image de taille adaptée (et non le fichier JPEG de 6Mo sorti directement de votre appareil photo).
    • Notez aussi qu'une image insérée dans un SVG occupera environ 40% de taille en plus (par exemple, une image JPEG de 1Mo "pèsera" grosso-modo 1,4Mo une fois insérée dans le fichier SVG).
  • Pensez à simplifier vos traits : lors d'un tracé à main levée, les chemins peuvent être composés de très nombreux points, sans rapport avec la précision du trait à afficher, et augmentent ainsi inutilement la taille du fichier. Avec Inkscape, vous pouvez simplifier un chemin en utilisant plusieurs fois Ctrl+L.

A noter que certains logiciels (Inkscape ou Illustrator notamment) rajoutent des informations qui ne sont pas nécessaires à l'affichage de l'image elle-même (par exemple zoom lors de la dernière édition du fichier, préférences personnelles, etc). Il est possible de leur demander d'enregistrer le fichier sans ces informations ("SVG Simple" contre "SVG Inkscape" par exemple). En revanche, cela signifie que vous perdrez ces préférences si vous voulez modifier le fichier par la suite. Il est possible de garder une version avec ces méta-données et d'utiliser une version expurgée pour la mettre sur camptocamp.

Polices

Pensez à utiliser des polices présentes sur le serveur pour être sûr que votre fichier sera rendu correctement. Dans le cas contraire, une police proche sera substituée, avec un rendu plus ou moins fidèle.
Si vous tenez absolument à conserver votre police spécifique, il faut transformer les objets en chemins (Ctrl+Maj+C sous Inkscape). Il sera alors plus difficile d'éditer le texte de votre fichier, celui-ci prendra plus de place, mais son rendu sera correct.

La liste des polices supportées par le serveur est donnée ci-dessous :

  • Andale Mono
  • Arial
  • Arial Black
  • Bitstream Vera Sans
  • Bitstream Vera Sans Mono
  • Bitstream Vera Serif
  • Century Schoolbook L
  • Comic Sans MS
  • Courier New
  • DejaVu Sans
  • DejaVu Sans Condensed
  • DejaVu Sans Light
  • DejaVu Sans Mono
  • DejaVu Serif
  • DejaVu Serif Condensed
  • Dingbats
  • Georgia
  • Impact
  • Standard Symbols L
  • Times New Roman
  • Trebuchet MS
  • Nimbus Mono L
  • Nimbus Roman No9 L
  • Nimbus Sans L
  • URW Bookman L
  • URW Chancery L
  • URW Gothic L
  • URW Palladio L
  • Verdana
  • Webdings

Animation

Vous pouvez créer des fichiers SVG animés. Cependant, les images générées ne seront pas animées. Il faudra cliquer sur le lien vers le fichier SVG original pour voir l'animation.

Scripts

Pour des raisons de sécurité, les fichiers SVG contenant des scripts sont refusés par le serveur.

Envoi des images et rastérisation

Pour envoyer une image au format SVG, la procédure est la même que pour les images de type matricielle.

Rastérisation

La rastérisation consiste à traduire l'image vectorielle en image matricielle, au niveau du serveur, pour envoyer aux utilisateurs une images matricielle (les navigateurs modernes supportent directement le format SVG, mais il y a encore une proportion trop grande d'anciens navigateurs).
Camptocamp utilise Inkscape comme outil, mais celui-ci n'est pas exempt de bug. Pensez à vérifier que l'image matricielle générée est conforme à ce que vous attendez.

Format de sortie

Si le fichier SVG incorpore une ou plusieurs images au format JPEG, le fichier de sortie sera au format JPEG. Dans le cas contraire, le fichier de sortie sera au format PNG.

  • Document type:
    article
  • Categories:
    help, website info
  • Activities:
    not filled in
  • Article type:
    collaborative article

Click on thumbnail's top-right corner to see the picture's page, or its top-left corner to display the picture in its original size.

The text in this page is available under a Creative Commons CC-by-sa license.
The images associated to this page are available under the license specified in the original document of each image.
Version #8, date 3 June 2013