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
Saisir le code SVG de rectangles, cercles, ellipses c'est relativement simple surtout si vous avez préparé l'encodage
par un croquis sur une feuille à petits carreaux (par exemple un carreau représente 10px).
Par contre l'encodage manuel des chemins (en particulier lorsqu'ils comprennent des arcs) peut provoquer une "prise de tête" ...
Vous avez aussi constaté que le langage SVG peut s'avérer "verbeux" en particulier pour les définitions : filtres, dégradés,
motifs, etc.
Le recours à des outils qui génèrent du SVG peut donc s'avérer fort utile.
Vous pouvez recourir à un éditeur graphique de SVG : Inkscape ou Illustrator ou Boxy SVG.
Vous pouvez aussi écrire un script en PHP qui va retourner au navigateur du code SVG.
En d'autres termes on veut réaliser une image vectorielle statique ou animée au format SVG (extension .svg). Rappelons qu'un document SVG peut comprendre non seulement du code SVG mais aussi du CSS et du JS.
À moins qu'il s'agisse d'images simplistes, il est rare que le code soit saisi de a à z par le développeur. En général le dernier fera appel à un éditeur WYSIWIG (Illustrator ou Inkscape ou Boxy SVG) à un moment donné du processus.
Cette image vectorielle statique se nomme "rue_bis.svg".
Je suis parti d'un fichier servant de modèle et nommé "svg_patron.svg" dont le contenu est :
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 "blobs" c'est à dire des chemins d'arcs donc un code lourd
et difficile ...
Démarche : j'ai ouvert "rue.svg" avec Boxy SVG.
Puis j'ai dessiné le nuage blanc et j'ai importé et redimensionné "autobus.png" et j'ai dessiné un nuage de fumée.
J'ai enregistré cette version sous le nom : "rue_bis.svg".
Le code de "rue_bis.svg" est alors (extraits) :
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 ; il passe de 3 KO à 13 KO.
La différence est surtout dûe à la "rastérisation" de l'image importée.
Dans ce deuxième exemple je crée un premier "jus" avec Inkscape 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é car
Inkscape ne propose pas de module "animations".
Ci-dessous le document SVG produit avec Inkscape : "croix_lorraine.svg"
Le code correspondant :
Pour obtenir ce code j'ai d'abord bien paramétré 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 ouvert "croix_lorraine.svg" sous NotePad.
J'ai rajouté une feuille de style interne.
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.
Destinés initialement à animer des éléments HTML, les "keyframes" CSS peuvent aussi s'appliquer à des objets SVG.
Les animations avec CSS 3
Si une image vectorielle animée ne comprend que de SVG et du CSS elle peut être insérée comme une image
matricielle, c'est à dire via l'élément IMG. C'est le cas ici !
Par ailleurs cette image ne pèse qu'un KO !
Ci-dessous le texte de l'appel du 18 juin encadre le document SVG en miniature :
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.
Cette image vectorielle animée se comporte tel un gif animé ...
Je vous propose maintenant d'utiliser successivemen Inkscape puis Boxy SVG (donc aucun encodage manuel).
Inkscape & Boxy SVG ont chacun des avantages et inconvénients.
Lorsqu'on demande l'importation d'une image matricielle, Inskcape vous propose le choix entre l'incorporation et une simple liaison.
Alors qu'avec Boxy SVG, l'image est obligatoirement "rastérisée" dans le document SVG.
Boxy SVG est capable de générer le code SMIL pour des animations d'objets alors qu'Inkscape
ne propose pas de module d'animation.
Aussi l'idée est de démarrer la production d'un document SVG avec Inkscape pour bénéficier des avantages de la liaison puis de terminer la réalisation avec Boxy SVG pour bénéficier de son module animation.
Cliquez sur le skieur pour lancer l'animation
Ce document comprend une liaison avec une image externe ; il doit être inséré dans la page web avec la balise object (ou iframe).
Ce document SVG ne pèse qu'1 KO grâce à l'utilisation de liaisons (et non pas d'incorporation des images matricielles).
Les images liées sont bien sûr dans le même dossier que le fichier SVG.
Le fichier SVG dépend des images ; lors du téléversement de ce document vers votre hébergeur,
pensez à transférer aussi les images.
La connaissance des avantages mais aussi des limites des éditeurs WYSIWYG de SVG ainsi que la maitrise du langage SVG vous permettent de produire rapidement un document SVG avec un code optimisé (léger et facile à comprendre).
Vous trouverez dans mon site un tuto sur Inkscape et un autre sur Boxy SVG.
Mon tuto sur Inkscape
Mon tuto sur Boxy SVG
Essayez de publier une image au format SVG sur Facebook, Wordpress, Linkedin, etc.
À chaque tentative c'est un échec. Ces plateformes n'acceptent que des images matricielles (png,jpg,gif) et
ce pour des raisons de sécurité. En effet un document SVG peut contenir du JS malveillant. Par exemple le script
charge un fichier JS qui prend le contrôle de la machine du visiteur.
Heureusement il est très facile de convertir un fichier .svg en fichier .png.
Vous pouvez utilisez Inkscape mais aussi une application en ligne comme https://svgtopng.comb.
Cette version png peut être publiée sur les plateformes déjà citées. Mais l'animation n'est pas préservée ...
Depuis la norme HTML5 le SVG peut être contenu dans un document HTML (une page web) ; on parle alors de "SVG interne" ou encore de "SVG dans le HTML". Mais comment produire rapidement du "SVG dans le HTML" ?
Vous pouvez utiliser Inkscape ou Boxy SVG pour obtenir un document SVG provisoire. Puis vous collez le contenu de ce fichier .svg vers la page web et dans cette dernière il suffit de procéder à quelques corrections.
Paradoxalement le code SVG interne est plus permissif que le code d'un document SVG.
En effet les "namespace" 'de la balise SVG début) sont alors facultatifs.
Par contre il faut que la valeur de l'attribut width soit un pourcentage afin que le canevas soit "responsive".
Il faut aussi rajouter éventuellement dans la balise SVG début, l'attribut viewBox
Je copie le code dans ce document HTML et je le corrige afin d'obtenir le code suivant dans la page web cible.
Donc je me suis contenté de modifier le code de la balise SVG début.
Comme HTML, le langage SVG ne propose pas nativement de variables et de structures de contrôle (tests, boucles).
Par contre PHP est un véritable langage de programmation ... côté serveur.
Un bref script PHP peut générer beaucoup de SVG dans le cadre d'un code répétitif.
Ci-dessous une page web contenant un canevas SVG rempli via PHP :
Le script PHP comprend une boucle qui est répétée 15 fois.
À chaque passage dans la boucle un objet rect est dessiné dans le canevas.
Le code SVG retourné au navigateur :
Donc via un script PHP très concis je génère beaucoup de code SVG.
Vous pouvez faire appel à un framework JavaScript chargé spécialisé dans la génération de code SVG.
Il existe de nombreuses librairies JS pour générer du SVG mais la plus connue est Snap SVG
Grâce à la puissance de JavaScript et la richesse des méthodes de cette librairie, vous obtenez un script très
concis.
Reprenons la thématique : la route bordée de peupliers ...
Le code rajouté dans la partie HEAD du document HTML :
Il faut bien sûr charger le fichier.js correspondant au framework et il faut avertir le visiteur que s'il a désactivé JavaScript il se prive du dessin ...
Instruction HTML pour dessiner un canevas vide :
< svg width ="60%" id ="canevas10" viewBox ="0 0 900 600" style ="border : 1px solid black;" >
Le script qui suit cette instruction HTML :
var s = Snap("#canevas10");
// définition des filtres
var flou1 = s.filter(Snap.filter.blur(20,20));
var ombre1 = s.filter(Snap.filter.shadow(10, 10, .5));
// définition d'un filtre : floutage
// le ciel et la terre
s.rect(0, 0, 900,300).attr({fill: 'skyblue'});
s.rect(0,300,900,300).attr({fill: 'lime'});
// la route et le soleil
s.path('M 300,600 L 500,300 L 600,300 L 500,600 z').attr({fill : 'grey'});
s.rect(25,25,150,150,75).attr({fill : 'orange', filter :flou1});
// modèle de peuplier
var tronc = s.rect(275,500,25,100).attr({fill: 'brown'});
var feuillage = s.ellipse(287,425,50,125).attr({fill: 'green'});
var arbre = s.group(tronc,feuillage).attr({filter : ombre1});
// clonage du modèle
arbre.clone().transform('t50-50 s.9');
arbre.clone().transform('t100-100 s.8');
arbre.clone().transform('t150-150 s.7');
arbre.clone().transform('t200-200 s.6');
// le chêne
s.rect(650,300,200,200,100).attr({fill : 'darkgreen', filter : ombre1});
s.rect(750,475,25,100).attr({fill : 'brown', filter : ombre1});
N'oubliez pas de fermer la balise double SVG :
< /svg >
Tout ce code JS-Snap doit bien sûr être inclus dans le conteneur SCRIPT.
Pour encoder rapidement ce script il est préférable de réaliser auparavant un croquis sur papier à petits
carreaux. Ainsi vous avez en lecture directe les paramètres géométriques des objets.
Notez que le script est très concis.
Remarquez aussi que je ne dessine pas de cercles mais des carrés avec coins arrondis. Ainsi pour toutes les formes (sauf ellipses)
j'ai toujours les mêmes arguments : x,y,w,h,[r]
Je ne vais pas commenter ici ce script car vous trouverez dans mon site un
Tuto sur Snap SVG
Vous verrez que Snap SVG permet de générer le code pour des images statiques mais aussi pour des images animées. Donc qu'il
s'agit d'un outil intéressant.