SVG

De EduTech Wiki
Aller à la navigation Aller à la recherche

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

Introduction

SVG signifie Scalable Vector Graphics (Graphiques Vectoriels Adaptables) et est un standard W3C (en XML), spécifiquement conçu pour être utilisé sur le web. SVG s’intègre bien aux autres formats W3C.

Les graphiques SVG permettent une plus grande souplesse de manipulation que les graphiques bitmaps (dont la qualité d'affichage dépend de la résolution graphique) car ils sont mathématiquement codés et peuvent être agrandis ou déformés sans aucune perte de qualité.

Voir aussi:

Spécification: http://www.w3.org/TR/SVG/

De la spécification: "SVG est un langage de description de graphiques bi-dimensionnels en XML. SVG admet trois types d’objets graphiques : des contours graphiques vectoriels (par exemple, des tracés consistant en lignes droites et courbes), des images et du texte. Les objets graphiques peuvent être regroupés, stylés, transformés et composés dans des objets précédemment rendus. L’ensemble de fonctions comprend des transformations imbriquées, des tracés de rognage, des masques basés sur la couche alpha et des objets de gabarit.

Les dessins SVG peuvent être interactifs et dynamiques. On peut définir et déclencher des animations, soit déclarativement (i.e., en incorporant les éléments d’animation SVG dans un contenu SVG), soit via un script.

Utilisations les plus intéressantes (actuellement):

  • visualisation de contenus (économiques, processus, cartes, etc.)
  • interface utilisateurs pour certains types d’applications Internet
  • dessins statiques, animés ou même interactifs dans le domaine de l’éducation
  • animations multimédia de contenus formalisables (chimie, maths, etc.)

Historique

Dès son apparition, le Web n'a cessé d’augmenter sa popularité et d’étendre sa pertinence. Ainsi, différentes extensions et formats HTML sont apparus, parmi lesquels nous trouvons ceux permettant de visualiser la graphique vectorielle dont l’utilité a été, par ailleurs, rapidement remarquée. Notamment, nous distinguons Vector Markup Language (VML) du Microsoft Office, Precision Graphics Markup Language (PGML) de l’Adobe PostScript et du Portable Document Format (PDF), les feuilles de style en cascade (CSS) et d’autres outils.

Par la suite, avec l’apparition du langage en:XML en 1998, ces extensions de HMTL susmentionnées ont influencé le développement d’un langage de graphisme vectoriel standard. Ainsi, en 1999, le W3C a élaboré la première spécification du Scalable Vector Graphics (SVG), SVG WG, évoluée vers la recommandation en version 1.0 en septembre 2001 et en version 1.1 en janvier 2003 avec une seconde édition en août 2011. Cette dernière version « SVG full 1.1 » est une recommandation du W3C actuelle.

Remarquons néanmoins que, dès 2008, SVG Tiny 1.2 est également recommandé par W3C. En effet, en 2003, à part de la recommandation du SVG full le groupe du W3C ont présenté aussi celle de SVG Tiny et SVG Basic, censées être utilisées principalement sur les appareils portables qui n’ont pas les capacités graphiques fortes (SVG Tiny) ou qui implémentent avec difficulté les éléments complexes du SVG full 1.1 tels que, p.ex. l’animation (SVG Basic qui ne contient pas de tels éléments).

La spécification SVG Tiny 1.2 étend les fonctionnalités du SVG 1.1 en y ajoutant notamment une meilleur gestion du texte et multimédia (la vidéo et le son).

En ce qui concerne le développement de la spécification SVG full 1.2, il a été abandonné en vue de la préparation active du SVG 2.0.

Aires d'application

Visualisation

Jusqu'à 2011 la niche de marché la plus importante était la visualisation. Prenons par un exemple très simple: Romain Sauvain a créé, pour ce wiki, un module pour la visualisation de liens basé sur SVG. Voir le lien dans la toolbox à votre gauche ou bien lire la courte documentation sur en:Mediawiki SvGViz extension. Admirez la beauté de ces liens! Cela marche avec Firefox, Opera ou IE avec un plugin pour SVG. Il y a aussi une visualisation plus "lourde" avec une Applet Java faite par Urs Richle. Bien évidemment il y a plein d'autres exemples beaucoup plus sophistiqués...

Echange de Clipart

SVG est aussi un langage d'échange très populaire. Par exemple, le seul répositoire potable de clipart, c'est-à-dire la Open Clip Art Library, se base sur les Clip Art. Wikipedia suggère aussi très fortement de charger des fichiers graphiques en format SVG. Pour l'instant, ces fichiers sont affichés en tant que bitmap (car jusqu'à en tout cas 2010 IE ne supportait pas SVG).

Google docs mémorise ses fichiers graphiques en SVG et son outil de dessin intégré produit directement des SVG. Pour les utilisateurs de IE, Google a implémenté une librairie JavaScript qui permet d'afficher les SVG.

HTML 5: graphiques vectoriels intégrés

Enfin, HTML 5 a fait du SVG une technologie mainstream. Même Microsoft (IE9) supporte ce format!

Composants de logiciels

Un grand nombre de programmes open source utilise des icônes faites en SVG.

Multimédia interactifs

SVG a à peu près la même puissance que Flash. Cependant, puisqu'il n'y a pas d'outils d'authoring, SVG est beaucoup moins populaire que Flash dans ce domaine.

Pourquoi SVG ?

Avantages des images vectorielles

  • rendering correct dans multiples média et à différentes tailles (adaptation)
  • possibilité d’appliquer des styles (adaptation 2)
  • possibilité d’indexer le texte qui fait partie du graphisme
  • taille de l’image (après compression en tout cas)
  • facilités d’édition: les éléments sont des objets, hiérarchies, etc.

Avantages particuliers de SVG (par rapport à Flash et similaires)

  • insertion dans le monde XML/XHTML
    • génération de SVG avec XSLT/PHP etc. à partir de données XML
    • intégration dans XHTML, viewers SMIL etc.
    • intégration dans HTML5
    • utilisation de CSS
    • scriptable avec JavaScript via DOM (standard)
  • possibilité de partager du code, de travailler directement avec le format
  • modèle de couleurs sophistiqué, filtres comme dans Photoshop
  • une spécification assez claire
  • meilleurs capacités graphiques dans l’ensemble, voir:
  • http://www.carto.net/papers/svg/comparison_flash_svg.html

Outils

Validation en ligne

Viewers

Tous les navigateurs modernes (Mars 2012) offrent un support SVG

  • HTML5 (SVG est compris)
  • XHTML + SVG
  • SVG (fichier stand-alone)

Certaines fonctionalités peuvent manquer, IE9/10 ne sait pas faire du SMIL.

Editeurs

  • Prenez Inkscape (gratuit) pour faire des dessins statiques
  • Sketsa SVG Graphics Editor by Kiyut, $89 Payware, Java 1.7+ based, demo and Java Webstart version available. Gratuit pendant plusieurs semaines. Meilleur éditeur pour créer du SVG pur (Jan 2014)
  • Karbon Logiciel issu de la suite Calligra Suite. Il est possible d'importer des fichiers: ODG, SVG, WPG, WMF,EPS,PS et exporter en: ODG, SVG, PNG, PDF, WMF.
  • Adobe Illustrator
  • CorelDRAW Avec un prix relativement accessible, ce logiciel est le plus proche concurrent de adobe illustrator et offre une plus grande simplicité d'utilisation. Il est notamment utilisé pour la création des personnages de South Park!
  • OpenOffice

Editeurs en ligne

Marchent bien, mais ont des fonctionalités limités

Convertisseurs

  • La plupart des outils de dessin peuvent exporter en SVG, par exemple Illustrator, Open Office "Draw"
  • Delineate pour convertir des images bitmap en vectoriel au format SVG. On obtient le code source avec un clic droit sur l'image au format SVG obtenue. (pas testé récemment!)

SVG avec un éditeur XML

Si vous désirez éditer SVG manuellement, il est conseillé d’installer la DTD dans votre éditeur XML si ce n'est pas fait.

  • SVG 1.0 et 1.1. sont inclus dans Exchanger lite

Pour certains éditeurs, il faut d'abord trouver la DTD et qui est à la fin de la spécification officielle et ensuite installer:

Exemple: Installation d’une DTD dans Xemacs:

  • Il faut copier le fichier avec la DTD quelque part sur votre système (de préférence au même endroit que le CATALOG).
  • Ensuite éditer le fichier ...XEmacs/xemacs-packages/etc/psgml-dts/CATALOG qui se trouve dans l’installation Xemacs.
  • Ajouter une ligne qui associe un identificateur public avec un fichier
Exemple Unix: PUBLIC "-//W3C//DTD SVG 1.0//EN" /web/lib/xml/dtd/svg10.dtd
Exemple Dos:  PUBLIC "-//W3C//DTD SVG 1.0//EN" svg10.dtd
  • N’oubliez pas de dire à Emacs que *.svg est associé à XML, éditez le fichier ~/.xemacs/init.el et ajoutez:
(setq auto-mode-alist
   (append ’(("\.svg"  . xml-mode)) auto-mode-alist))

Note: Votre home (~) sous windows est qq. part dans c:\Documents and Settings\xxxx\. Alternativement on peut aussi insérer cette instruction dans XEmacs\site-packages\lisp\site-start.el

Mime-types que votre serveur doit définir (!)

  • Lorsque votre navigateur n’affiche pas un fichier svg provenant d’un serveur, il faut configurer les serveur web avec les mime-types suivants.

*.svg image/svg+xml

*.svgz image/svg+xml

Utilisation de SVG

Attention aux espaces de nommage (namespaces) ! Ils doivent présent dans HTML5 et des pages SVG pures: xmlns="http://www.w3.org/2000/svg"

Dans HTML 5

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  </head>

  <body>
    <h1>HTML5 SVG Demo</h1>

A nice green circle:
    <svg id="circle" height="200" xmlns="http://www.w3.org/2000/svg">
      <circle id="greencircle" cx="30" cy="30" r="30" fill="green" />
    </svg>

    <hr>
    <address>Created by DKS. This is free code</address>
</html>

On peut aussi importer du SVG avec diverses balises HTML5, notamment embed.

Lire plus dans en:Using SVG with HTML5 tutorial

Structure d’une page SVG autonome

Une page SVG valide doit contenir une entête XML ainsi qu'une declaration namespace pour la balise racine "svg". Le DocType est à option.

Voici un exemple SVG 1.0 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
         "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg">

 <!-- un petit rectangle avec des coins arroundis  -->
 <rect x="50" y="50" rx="5" ry="5" width="300" height="100"
       style="fill:#CCCCFF;stroke:#000099"/>

 <!-- un texte au meme endroit -->
 <text x="55" y="90" style="stroke:#000099;fill:#000099;font-size:24;">
  HELLO cher visiteur 
 </text>
</svg>

Voir: hello-svg.svg

Voici un exemple SVG 1.1 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Four separate rectangles
  </desc>
    <rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
    <rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
    <rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/>
    <rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm"
        fill="none" stroke="blue" stroke-width=".02cm" />

</svg>

Voir: View this example as SVG

Importation et groupement

SVG permet d'importer d'autres images SVG. Exemple 

<svg id="circle" height="60" width="60" 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <image x="0" y="0" height="60" width="60"  xlink:href="huge-red-circle.svg" />
</svg>

Il est également possible de grouper des entités SVG en les encadrant par des balises. Un groupe peut être transformé (translation, échelle, rotation) 

<g></g>

Cette fonctionalité est utile pour regrouper du code importé. Plus de détails sont disponibles dans le Tutoriel SVG statique.

SVG - Création d'ombre portée

Exemple 1

L'élément <feOffset> est utilisé pour créer un effet d'ombre. L'idée est de prendre un élément graphique en SVG (une image ou un élément simple) et d'en faire un légère translation sur les axes x et y.

Le premier exemple décale un rectangle (avec <feOffset>), puis fond l'image originale par dessus l'image décalée (avec <feBlend>).

Voici le code en SVG:

Exemple

<svg height="120" width="120">

<defs>

<filter id="f1" x="0" y="0" width="200%" height="200%">

<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />

<feBlend in="SourceGraphic" in2="offOut" mode="normal" />

</filter>

</defs>

<rect width="90" height="90" stroke="green" stroke-width="3"

fill="yellow" filter="url(#f1)" />

</svg>

Explication du code:

  • L'attribut id de l'élément <filter> définit un nom unique au filtre.
  • L'attribut filtre de l'élément rectangle (<rect>) crée un lien entre le rectangle et le filtre "f1".

Exemple 2

Maintenant, l'image décalée peut être floutée (avec <feGaussianBlur>).

Voici le code SVG:

Exemple

<svg height="140" width="140">

<defs>

<filter id="f2" x="0" y="0" width="200%" height="200%">

<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />

<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />

<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />

</filter>

</defs>

<rect width="90" height="90" stroke="green" stroke-width="3"

fill="yellow" filter="url(#f2)" />

</svg>

Explication du code:

  • L'attribut stdDeviation de l'élément flou gaussien (<feGaaussienBlur>) définit la quantité de flou.

Exemple 3

Maintenant, pour rendre l'ombre noire.

Le code en SVG:

Exemple

<svg height="140" width="140">

<defs>

<filter id="f3" x="0" y="0" width="200%" height="200%">

<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />

<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />

<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />

</filter>

</defs>

<rect width="90" height="90" stroke="green" stroke-width="3"

fill="yellow" filter="url(#f3)" />

</svg>

Explication du code:

  • L'attribut in de l'élément <feOffset> change pour "SourceAlpha", qui utilise un filtre Alpha pour le flou, au lieu d'utiliser l'entière palette RGBA.

Exemple 4

Enfin, pour traiter l'ombre comme une couleur.

Le code en SVG:

Exemple

<svg height="140" width="140">

<defs>

<filter id="f4" x="0" y="0" width="200%" height="200%">

<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />

<feColorMatrix result="matrixOut" in="offOut" type="matrix"

values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />

<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />

<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />

</filter>

</defs>

<rect width="90" height="90" stroke="green" stroke-width="3"

fill="yellow" filter="url(#f4)" />

</svg>

Explication du code:

  • Le filtre <feColorMatrix> est utilisé pour transformer les couleurs de l'image décalée en des nuances de noir. Les trois valeurs de '0.2' dans la matrice sont tous multipliés par les filtres rouge, vert et bleu. En réduisant leurs valeurs, on amène les couleurs plus proches du noir (noir valant 0).

Liens

Spécifications:

Ressources:

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=SVG&oldid=50901 »