Accueil » Développer » À propos du SVG

À propos du SVG

Le format de fichier vectoriel SVG étant le format central d'Inkscape, comprendre les bases du SVG est utile pour contribuer au développement d'Inkscape. Par exemple, pour créer vos propres extensions, vous aurez besoin d'expérience dans l'escalade et la redescente de l'arbre XML — et si vous voulez travailler sur des fonctions du cœur d'Inkscape, vous devriez même potentiellement vous plonger profondément dans les calculs de matrices et de courbes de Bézier.

Nous avons regroupé des informations ici en espérant qu'elles vous permettront de démarrer facilement.

Qu'est-ce que le SVG ?

Le SVG (acronyme de « Scalable Vector Graphics » — graphisme de vecteurs extensibles) est un format de fichier libre/ouvert et normalisé pour le graphisme vectoriel. Il est maintenu et développé par le W3C (World Wide Web Consortium), la principale organisation internationale définissant les normes du web.

Il est basé sur le XML (« Extensible Markup Language » — langage à balises extensible), un autre format normalisé par le W3C, qui est un langage de balisage générique développé pour représenter des données quelconques dans un format lisible par un humain et une machine. Si vous avez déjà utilisé le (X)HTML pour créer un site web, vous connaissez déjà les éléments principaux de la structure : l'arborescence, les balises, les éléments et les attributs.

Le format de fichier SVG utilise ces structures pour représenter des données visuelles. Les balises, les éléments et les attributs qui peuvent être utilisés et compris par les programmes d'édition et de visualisation d'images vectorielles sont définis dans la spécification du SVG. La spécification actuellement (en mars 2015) valide est SVG 1.1, la spécification SVG 2.0 étant en cours de développement, et une bonne partie des nouvelles fonctionnalités sont déjà mises en œuvre dans Inkscape et de nombreuses visionneuses (comme les navigateurs web).

Les fonctionnalités du SVG 1.1 incluent les chemins, les formes élémentaires (comme les cercles et les polygones), le texte, le remplissage, la bordure et les marqueurs, la couleur, les dégradés et les motifs, la découpe, l'application de masque et la composition, les effets de filtres, l'interactivité, les liens, les scripts, l'animation, les polices de caractères et les méta-données. Le W3C donne également des notes sur l'évolution de la compatibilité et l'extensibilité du format.

Voici un exemple qui présente les principes de base. Regardez le code suivant :

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
  <rect x="50" y="50" width="200" height="100" style="fill:red"/>
</svg>

Voilà ce que ça donne au rendu (affichez le code source HTML de la page pour voir comme ce code SVG est confortablement embarqué dans le HTML) :

Voici un exemple plus complexe : un extrait du code SVG du logo d'Inkscape, qui présente d'autres fonctionnalités. Notez comme les données non graphiques, comme l'auteur ou la licence du fichier, peuvent être facilement incluses sans altérer l'apparence de l'image :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   id="svg2"
   height="128"
   width="128"
   version="1.0">
  <title
     id="title7387">Inkscape Logo</title>
  <defs
     id="defs4">
    <clipPath
       id="clipoutline1"
       clipPathUnits="userSpaceOnUse">
      <path
         d="M 54.1,12.5 L 12.9,54.7 C -2.7,70.3 23,69 32.3,74.9 C 36.6,77.7 18.5,81.3 22.2,85 C 25.8,88.7 43.9,92.1 
            47.5,95.7 C 51.1,99.4 40.2,103.3 43.8,107 C 47.3,110.7 55.7, 107.2 57.2,115.6 C 58.3,121.8 72.6,118.7 
            79,113.4 C 83,110 72.1,110 75.7,106.3 C 84.7,97.2 92.7,102.2 96,93.8 C 97.8,89.3 82.4,86.1 86.5,83.2 C 
            96.3,76.3 132.3,72.8 115.7,56.2 L 73,12.5 C 67.7,7.5 59,7.5 54.1,12.5 z M 44.2,77.2 C 45.1,77.2 75,81.2 
            63.5,84.3 C 59.1,85.5 38.9,77.2 44.2,77.2 z M 101.4,93.8 C 101.4,95.9 117.7,97.1 116.8,93.3 C 115.5,86.9 
            103.2,87.4 101.4,93.8 z M 31.9,104.9 C 35.6,108.1 41.2,104.2 43,99.7 C 39.4,95 26.1,100 31.9,104.9 z M 
            99.4,98.2 C 94.8,102.4 100.2,106.8 104.7,103.9 C 105.9,103.1 104.6,99.2 99.4,98.2 z "
         id="outline1" />
    </clipPath>
    <filter
       id="filter6017"
       color-interpolation-filters="sRGB">
      <feGaussianBlur
         id="feGaussianBlur6019"
         stdDeviation="0.80546496" />
    </filter>
    <linearGradient
       y2="40"
       x2="60"
       y1="20"
       x1="82.11859"
       gradientUnits="userSpaceOnUse"
       id="linearGradient9175"
       xlink:href="#linearGradient5785" />
  </defs>
  ...
  <metadata
     id="metadata49">
    <rdf:RDF>
      <cc:Work
         rdf:about="etiquette-icon">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:creator>
          <cc:Agent>
            <dc:title>Andy Fitzsimon</dc:title>
          </cc:Agent>
        </dc:creator>
        <dc:rights>
          <cc:Agent>
            <dc:title>Andrew Michael Fitzsimon</dc:title>
          </cc:Agent>
        </dc:rights>        
        ...
    </rdf:RDF>
  </metadata> 
  ...
  <g
     id="g9139"
     transform="matrix(0.9965784,0,0,0.9962666,0.2205497,-1.598221)"
     style="display:inline;enable-background:new">
    <g
       id="g6035"
       transform="translate(3.68968e-7,0.4883067)"
       style="opacity:0.7832512">
      <path
         id="path5987"
         d="m 54.1,12.98831 -41.2,42.2 c -15.6,15.6 10.1,14.3 19.4,20.2 4.3,2.8 -13.8,6.4 -10.1,10.1 3.6,3.7 21.7,7.1 
            25.3,10.7 3.6,3.69999 -7.3,7.59999 -3.7,11.29999 3.5,3.7 11.9, 0.2 13.4,8.6 1.1,6.2 15.4,3.1 21.8,-2.2 4,
            -3.4 -6.9,-3.4 -3.3,-7.1 9,-9.09999 17, -4.1 20.3,-12.49999 1.8,-4.5 -13.6,-7.7 -9.5,-10.6 9.8,-6.9 
            45.8,-10.4 29.2,-27 l -42.7,-43.7 c -5.3,-5.000003 -14,-5.000003 -18.9,0 z m 47.3,81.3 c 0,2.1 16.3,3.3 
            15.4,-0.5 -1.3,-6.4 -13.6,-5.9 -15.4,0.5 z M 31.9,105.3883 c 3.7,3.2 9.3,-0.7 11.1, -5.2 -3.6,-4.69999 
            -16.9,0.3 -11.1,5.2 z m 67.5,-6.69999 c -4.6,4.19999 0.8,8.59999 5.3,5.69999 1.2,-0.8 -0.1,-4.7 -5.3,
            -5.69999 z"
         style="fill:#000000;fill-opacity:1;filter:url(#filter6017)" />
      <path
         style="opacity:0.5763547;fill:#000000;fill-opacity:1;filter:url(#filter6031)"
         d="m 54.1,13.96492 -41.2,42.2 c -15.6,15.6 10.1,14.3 19.4,20.2 4.3,2.8 -13.8,6.4 -10.1,
         ...         
         id="path6021" />
    </g>
  ...
  </g>
</svg>

Voilà le logo une fois rendu :

Pourquoi Inkscape utilise-t-il le SVG ?

Le SVG est un format lisible par l'homme qui peut être édité avec un simple éditeur de texte. On peut y effectuer des recherches, le compresser ; il peut être généré et manipulé automatiquement ; placé dans du code (X)HTML, il peut faire partie intégrante d'une page web ; il peut être animé ; il peut être utilisé pour créer des environnements de bureau, et bien sûr, des œuvres fantastiques.

Aussi, le SVG permet d'incorporer facilement des méta-données. Le programme Inkscape se sert beaucoup de cette possibilité, pour stocker les données brutes qui vont dans des choses comme les chemins faits à partir de la forme « étoile », et pour enregistrer ses propres paramètres dans le fichier.

Mais avant tout, et en plus d'être agréable à l'utilisation et au développement et polyvalent, c'est un standard ouvert, qui peut être utilisé tel quel pour de nombreuses applications différentes. La conformité au standard était l'une des raisons de la formation du projet Inkscape (voir la FAQ).

Le projet Inkscape ne se contente pas d'utiliser le SVG comme format de fichier natif ; il prend aussi parti dans le développement et perfectionnement des fonctionnalités du SVG en envoyant un représentant au groupe de travail du W3C sur le SVG.

Comment Inkscape implante-t-il le SVG ?

Inkscape se veut fort d'être un éditeur SVG complètement conforme à la norme. En mars 2015, il supporte même le rendu de propriétés SVG qui ne font pas encore officiellement partie du standard, mais ont atteint un état stable dans l'ébauche du groupe de travail sur le SVG pour SVG 2.0. Ces propriétés incluent les motifs d'éclosion, l'ordre de dessin du fond et du contour et les modes de mélange du CSS. Actuellement, elles ne sont pas encore éditables depuis l'interface graphique, mais peuvent être retouchées en modifiant les attributs dans l'éditeur XML, bien sûr.

Les filets de dégradé sont également déjà implantés dans la version de développement d'Inkscape, mais ne sont pas disponibles dans la dernière livraison (0.91). Le processus de normalisation pour cette fonctionnalité ne s'est stabilisé que récemment et il y a encore beaucoup de travail à faire dans l'interface graphique pour rendre pratique l'édition des filets de dégradé.

Le travail a déjà été entamé sur l'implantation de texte basé sur du CSS dans une forme.

Bien que toutes ces fonctionnalités font d'Inkscape un reflet presque complet des normes SVG actuelle et en ébauche, il y a aussi quelques fonctionnalités qui « manquent » pour diverses raisons. Inkscape n'implante pas le filtre de carrelage ; il n'y a pas d'animation et aucun travail n'est en cours pour faire d'Inkscape un éditeur d'animations SVG, ce qui demanderait beaucoup de travail sur l'interface graphique et sur les fonctions d'animation sous-jacentes. Les polices de caractères du SVG, qui font partie de la spécification du SVG 1.1, ont été retirées dans l'ébauche pour SVG 2.0. Elles seront remplacées par du SVG dans les polices OpenType.

La seule chose dans Inkscape qui n'est actuellement pas conforme au standard est le texte encadré. C'est parce que le processus de normalisation du SVG 1.2, dans lequel le texte encadré devait être inclus, a été interrompu. Mais alors, la fonctionnalité était déjà développée, et elle servait à de nombreux utilisateurs. Ainsi, les développeurs d'Inkscape ne l'ont pas retirée, et l'ont conservée ; donc les utilisateurs peuvent modifier leurs textes dynamiquement dans Inkscape.

Apprendre le SVG

Informations techniques

Informations générales

  • Les bases du SVG, par David Dailey
  • Éléments de SVG sur le blog de Peter Collingridge
  • Apprendre le SVG : livre complet et avancé sur le SVG par Jon Frost, Stefan Goessner et Michel Hirtzler, librement disponible pour lecture en ligne. En raison de son âge, toutes les techniques présentées ne sont plus forcément valides, mais l'explication des principes de base et des propriétés SVG sont toujours très utiles.
  • Le blog de Tavmjong Bah, qui fournit de nombreuses informations sur les coulisses du développement de la spécification du SVG (parmi d'autres contenus concernant Inkscape et le SVG)

Tutoriels

Ceci est une petite sélection parmi tous les tutoriels qui sont disponibles sur internet :

Vous pouvez trouver davantage de tutoriels en utilisant votre moteur de recherche favori.

Inkscape est un logiciel libre et open source sous licence GPL.