Trucsweb.com

Trucsweb.com

Infographie

Images SVG

RDFFav

Graphique vectoriel adaptable (SVG)

Le Scalable Vector Graphics ou l’images vectorielles est la solution à tous les problèmes de résolution.vectoriel, images, xml, Scalable Vector GraphicsGraphique vectoriel adaptable (SVG)

Fichier SVG, résolution de 4 217 × 3 169 pixels, taille : 454 Ko
Source : Wikipédia

À la différence des images « Bitmap » ou images matricielles constituées de pixels, le format « Scalable Vector Graphics » ou Graphique vectoriel adaptable, c’est-à-dire l’image vectorielle, Wikipédia parle d’image en mode trait, est composée d’objets géométriques. Des cercles et des rectangles, des segments de droite, polygones, arcs de cercle, des tracés etc. Le tout combinable à souhait, avec moult effets, méthodes et technique d’animation avec le langage SMIL. Sans parler de son imbrication totale au DOM et donc avec un support Javascript et CSS3 complet!

L’image vectorielle est stockée sous forme de coordonnées, en texte clair, dans un fichier XML. Pour ma part il y a plus précisément trois caractéristiques principales :

Bitmap versus vectorielle
  1. La première était que l’image est redessinée à chaque affichage. On n’emmagasine pas les images mais les instructions pour les dessiner. Si certaine image, comme mon exemple plus bas, deviennent vite plus lourds qu’un « bitmap » équivalent, l’art de la vectorielle permet de faire des miracles au niveau du poids, particulièrement en animation.
  2. Stocké des objets individuels, en texte clair, dans un simple fichier XML, permet beaucoup de flexibilité et de portabilité! On parle ici de texte, de simple texte! On verra d’ailleurs de plus en plus de CMS gérer les images SVG. Pourquoi pas des librairies d’objets, combinable dans un éditeurs? Par exemple plus besoin de téléverser une image, un simple copier coller suffit! C’est d’ailleurs le rôle de ce tutoriel, expliquer une méthode pour coller le SVG dans une page Web, d’ici à ce que les CMS le permettent un jour.
  3. Dessiner des formes à l’aide de coordonnées permet de redimensionner celle-ci sans altérer la qualité. Comme on peut voir dans l’exemple ci-contre, plus on redimensionne un « bitmap » et plus l’image se pixellisera. Ce qui n’est pas le cas d’une image vectorielle! On ne peut évidemment pas aller en deçà d’un seuil minimum sans provoquer un entassement et une perte d’information, mais on peut agrandir à l’infinie l’image. Un argument de poids ou de taille, pour faire dans le jeu de mot, quand on pense aux écrans Retina, 2 à 4 fois plus dense!
XML et Graphique vectoriel adaptable (SVG)

Marginal, l’images vectorielles est la solution à tous les problèmes. Le SVG, est un format de données conçu pour décrire des ensembles de graphiques vectoriels basé sur le XML. Ce format inspiré directement du VML / PGML du consortium de la W3C permet de manipuler et dynamiser des images beaucoup plus légertes. Ajouter du contenu textuel directement dans l’images et animé par le SMIL.

Avantages
  • C’est possible de créer et éditer une image avec un simple éditeur de texte;
  • C’est possible de rechercher, indexer, crypter et compresser une image;
  • C’est possible de redimensionner une image;
  • C’est possible d’imprimer en haute résolution;
  • C’est possible de zoomer une image (sans dégradation);
  • SVG est un standard « ouvert »;
  • Un fichier SVG est en pure XML.

Il suffit de créer une image vectoriels SVG directement en XML ou à l’aide d’un logiciel comme « OpenOffice » sauvegarder en format SVG. Ou encore de les convertir avec un service comme Online Convert mais attention, la conversion d’image peu drastiquement détériorer une images comme en fait foi le logo :

Exemple de fichier XML format SVG :

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200">
  <title>Exemple simple de figure SVG</title>
  <desc>
    Cette figure est constituée d’un rectangle,
    d’un segment de droite et d’un cercle.
  </desc>

  <rect width="100" height="80" x="0" y="70" fill="green" />
  <line x1="5" y1="5" x2="250" y2="95" stroke="red" />
  <circle cx="90" cy="80" r="50" fill="blue" />
  <text x="180" y="60">Un texte</text>
</svg>

Le plus facile est d’intégrer l’image dans une balise « img » (comme l’exemple de la carte plus haut) :

<img src="http://upload.wikimedia.org/wikipedia/commons/8/8b/Plates_tect2_fr.svg" width="100%" />

Code XML

On peu aussi programmer une image directement en XML dans un éditeur de texte et une page XHTML. Plutôt vieillot, d’une autre époque encore une fois. On abuse des attributs malgré le format XML, par exemple « font-size ». Par chance il support assez bien le CSS via l’attribut « style ».

<?xml version="1.0" standalone="yes"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
  <head>
    <title xml:lang="fr">SExemple XHTML + Image SVG </title>
  </head>
  <body>
    <svg:svg width="4cm" height="8cm" version="1.1" baseProfile="tiny">
      <svg:ellipse cx="2" cy="4" rx="2" ry="1" />
    </svg:svg>
  </body>
</html>

Empilement de cercles avec transparence

Voilà un exemple simple avec des cercles en transparences et un petit texte que l’on peut sélectionner d’ailleurs.

  1. Balise <svg> pour définir l’objet et ses dimensions;
  2. Balise <circle> pour dessiner un cercle;
  3. Attribut cx="60" : Le centre du cercle a 60 pixels de l’axe X;
  4. Attribut cy="60" : Le centre du cercle a 60 pixels de l’axe Y;
  5. Attribut r="60" : Un rayon de 60 pixels;
  6. Attribut stroke="#b7b6b4" : Couleur de la bordure;
  7. Attribut fill="#666" : Couleur de remplissage;
  8. Attribut fill-opacity="0.5" : Transparence;
  9. Balise <ellipse> pour dessiner un ellipse;
  10. Attribut rx="60" : Dans le cas d’une forme ovale, un rayon X de 60 pixels;
  11. Attribut ry="30" : Dans le cas d’une forme ovale, un rayon Y de 30 pixels;
  12. Balise <text> pour le texte;
  13. Attribut x="100" y="140" : Pour la position;
  14. Attribut text-anchor="middle" : Centrer le texte;
  15. Attribut font-size="10" : Sans commentaire (!);
  16. Attribut style="text-align:center;" : Tout CSS valide, sauf ce le positionnement entres autres.

Exemple de fichier SVG + HTML5 :

<!DOCTYPE html>
<html lang="fr-CA">
  <head>
    <meta charset="utf-8">
    <title lang="fr">Exemple XHTML + Image SVG </title>
  </head>
  <body>
  <svg height="150" width="200" style="text-align:center;">
    <circle cx="60" cy="61" r="60" stroke="#b7b6b4" fill="#d6d3ce" />
    <circle cx="130" cy="61" r="60" stroke="#b7b6b4" fill="#c6c3bd" fill-opacity="0.5" />
    <ellipse cx="95" cy="61" rx="60" ry="30" fill="#666" fill="#c6c3bd" fill-opacity="0.5" />
    <text x="100" y="140" font-size="9" text-anchor="middle">Empilement de cercles</text>
    <text x="100" y="150" text-anchor="middle" style="font-size:10px;">avec transparence</text>
  </svg>
  </body>
</html>


Logiciels

Ressources

, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

    7/10 sur 1 revues.
           Visites : 9110 - Pages vues : 9315
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @