Traduction
Dessiner avec SVG - sommaire
Dessiner avec SVG - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Dessiner des rectangles, des cercles et ellipses par encodage manuel, c'est simple et rapide.
Par contre encoder des chemins en particulier avec des arcs, la prise de tête est probable.
Il est alors préférable de faire appel à un éditeur WYSIWIG de SVG : Inkscape ou Boxy SVG.
Ces éditeurs graphiques de SVG sont de très bon outils mais ils ont leur limite.
Sachez qu'ils ne sont pas capables de générer le code correspondant à des animations.
Ce document se nomme "rue.svg".
Je suis parti d'un fichier servant de modèle : "svg_patron.svg" dont le contenu est :
La syntaxe de la balise SVG début n'est pas simple, il faut éviter de devoir la saisir à chaque fois.
J'ai réalisé un croquis sur une feuille de petits carreaux à raison de 1 carreau pour 20px.
Ainsi par lecture directe du croquis j'ai les paramètres géométriques de chaque forme.
Notez que j'ai aussi rajouté des commentaires avec la balise double DESC (ne pas confondre avec le conteur DEFS).
Notez justement que le conteneur DEFS reste vide car je n'ai défini ni filtre, ni dégradé, ni motif, ni symbole.
Il faut maintenant produire des chemins qui de surcroit sont floutés et il faut importer une image matricielle.
Le nuage blanc dans le ciel et la fumée s'échappant du bus sont des "blob" c'est à dire des chemins d'arcs donc un code
SVG complexe.
J'ai fait une copie de "rue.svg" que j'ai nommé "rue_bis.svg" et j'ai ouvert ce fichier avec Boxy SVG.
J'ai dessiné le nuage blanc, j'ai importé et redimensionné "autobus.png" et j'ai dessiné un nuage de fumée.
Vous trouverez dans mon site un tuto sur Boxy SVG.
Tuto sur Boxy SVG
La partie DEFS n'est plus vide. Il y a la définition de deux filtres : flous gaussiens.
Deux chemins sont rajoutés ; ils correspondent aux blobs (chemins d'arcs).
L'image importée est "rastérisée dans le document :
Notez que le code SVG généré est plus verbeux que celui qui découlerait d'un encodage manuel car tous les
attributs possibles sont mentionnés avec éventuellement des valeurs à zéro ou à ""
Le document a un peu grossi ; "rue.svg" pèse 3 KO alors que "rue_bis.svg" pèse 13 KO.
La différence est dû à la "rastérisation de l'image importée dans le document.
Pour compléter le document SVG j'aurais pu utiliser Inkscape. Ce qui m'aurait permis d'éviter la "rastérisation" de l'image importé car Inkscape propose aussi une autre solution : la liaison entre le document SVG et l'image matricielle.
Dans ce deuxième exemple je crée un premier "jus" avec un éditeur WYSIWIG de SVG puis j'encode manuellement.
Ce cas de figure est fréquent lorsque l'on veut passer d'un dessin vectoriel statique à un dessin vectoriel animé.
On peut animer des objets via JS ou via le SMIL ou encore via le CSS.
Pour obtenir ce code j'ai d'abord bien paramétrer la boite de dialogue "Propriétés du document" afin de générer un viewBox
et que l'unité de mesure soit le pixel.
J'ai dessiné trois rectangles qui se croisent puis j'ai supprimé les contours, j'ai groupé
les trois formes et j'ai rempli de bleu et j'ai appliqué une ombre portée.
J'ai enregistré le document selon le type "svg optimisé".
J'ai fait une copie de "croix_lorraine.svg" sous le nom "croix_lorraine_bis.svg" et j'ai ouvert
ce fichier avec NotePad.
J'ai rajouté une feuille de style interne dans le document.
J'ai modifié le code de la balise G : remplacer fill ="blue" par class ="couleur"
Notez bien le code de la balise G : <g class ="couleur" filter="url(#a)">
Observez attentivement le contenu de STYLE : un modèle d'animation nommé "tricolorer" concernant
la couleur de remplissage.
Tout objet SVG disposant de la classe "couleur" profite de cette animation.
Les animations en CSS 3
On peut en effet appliquer les modèles d'animation CSS non seulement à des éléments HTML mais aussi à des objets SVG.
Ci-dessous j'utilise le fichier SVG animé tel un gif animé ! D'ailleurs ce fichier ne pèse que 1 KO !
Ce document en miniature illustre l'appel du 18 juin.
Observez bien que la croix change de couleur sans d'effet sacadé que l'on aurait eu avec la balise SET du SMIL.
Les chefs qui, depuis de nombreuses années, sont à la tête des armées françaises, ont formé un
gouvernement. Ce gouvernement, alléguant la défaite de nos armées, s'est mis en rapport avec
l'ennemi pour cesser le combat.
Certes, nous avons été, nous sommes submergés par la force mécanique, terrestre et aérienne de
l'ennemi.
Infiniment plus que leur nombre, ce sont les chars, les avions, la tactique des Allemands qui nous
font reculer. Ce sont les chars, les avions, la tactique des Allemands qui ont surpris nos chefs au
point de les amener là où ils en sont aujourd’hui.
Mais le dernier mot est-il dit ? L'espérance doit-elle disparaître ? La défaite est-elle définitive ?
Non !
Croyez-moi, moi qui vous parle en connaissance de cause et vous dis que rien n’est perdu pour la
France. Les mêmes moyens qui nous ont vaincus peuvent faire venir un jour la victoire.
Car la France n'est pas seule ! Elle n'est pas seule ! Elle n'est pas seule ! Elle a un vaste Empire
derrière elle. Elle peut faire bloc avec l'Empire britannique qui tient la mer et continue la lutte.
Elle peut, comme l'Angleterre, utiliser sans limites l'immense industrie des Etats-Unis.
Cette guerre n'est pas limitée au territoire de notre malheureux pays. Cette guerre n'est pas
tranchée par la bataille de France. Cette guerre est une guerre mondiale. Toutes les fautes, tous
les retards, toutes les souffrances n'empêchent pas qu'il y a, dans l'univers, tous les moyens pour
écraser un jour nos ennemis. Foudroyés aujourd'hui par la force mécanique, nous pourrons
vaincre dans l'avenir par une force mécanique supérieure. Le destin du monde est là.
Moi, général de Gaulle, actuellement à Londres, j'invite les officiers et les soldats français qui se
trouvent en territoire britannique ou qui viendraient à s'y trouver, avec leurs armes ou sans leurs
armes, j'invite les ingénieurs et les ouvriers spécialisés des industries d'armement qui se trouvent
en territoire britannique ou qui viendraient à s'y trouver, à se mettre en rapport avec moi.
Quoi qu'il arrive, la Flamme de la résistance française ne doit pas s'éteindre et ne s'éteindra pas.
Demain, comme aujourd'hui, je parlerai à la radio de Londres. »