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
Avec SVG vous pouvez créer des images vectorielles statiques ou animées voire des jeux vidéo.
Un document SVG peut être imprimé, affiché via un navigateur ou encore être inséré dans une page web.
Dans les deux cas le SVG produit est intégré dans la page web ; on parle de "SVG interne".
Le SVG est un langage XML donc proche de HTML : des balises avec des attributs.Comme en HTML, vous pouvez mettre en forme via le CSS et en particulier utiliser des classes.
Il existe aussi des éditeurs WYSIWIG de SVG : Illustrator, Inkscape, Boxy SVG.
Ces logiciels créent des "documents SVG" c'est à dire des fichiers d'extension .svg ; on parle alors de "SVG externe").
L'utilisation de Inkscape & boxy SVG est évoquée dans un autre tuto :
mon tuto sur Inkscape & Boxy SVG
Ci-dessous une image statique au format SVG.
SVG est le format soutenu par le W3C (organisme de normalisation des langages pour le web)
concernant les images vectorielles.
Zoomez la page, l'image garde toute sa qualité ; pas d'effet "escalier" ou crénelage !
Faites un clic droit sur l'image ci-dessus et dans le menu contextuel sélectionnez "enregistrez l'image sous".
Vous récupérez sur votre machine un fichier nommé rue.svg.
Essayez de l'ouvrir avec le logiciel PAINT ; vous avez un message d'erreur :" Paint ne peut pas lire ce fichier. Format non pris
en charge".
En effet Paint ne peut ouvrir que des images "pixellisées" (ou matricielles) : extensions .gif, .png .jpeg
Ouvrez ce fichier avec un éditeur de textes tel NOTEPAD.
Vous observez du code qui ressemble à du HTML : des instructions commençant par une balise suivie d'attributs.
Ouvrez le fichier avec Inkscape (un éditeur SVG de type WYSIWIG).
L'image vectorielle apparait et vous pouvez la modifier via l'interface graphique.
Faites rebondir la balle rouge avec la raquette.
Utilisez les touches de direction "gauche" et "droite" du clavier pour déplacer la raquette.
Vous retrouverez le code de cette animation SVG-JS dans le chapitre 17
Ce tuto porte sur le langage SVG, ce sigle signifie Scalable Vector Graphics.
SVG est un format de graphique vectoriel basé sur XML.
A la différence de l'image matricielle ("raster graphic" en anglais), l'image vectorielle ("vector graphic" en anglais) est une
représentation conceptuelle constituée de primitives géométriques comme les points, les lignes, les courbes et les polygones
qui forment des objets décrits par des formules mathématiques. Par exemple, pour représenter un rectangle, on a besoin de préciser
l'emplacement de son angle haut et gauche, la largeur et la hauteur du rectangle, l'épaisseur et couleur de bordure, etc.
Au lieu de mémoriser une mosaïque de pixels, un fichier d'image vectorielle stocke la succession
d'opérations conduisant au tracé.
Du fait qu'une image vectorielle est décrite par des formules mathématiques, il est possible d'agrandir ou de réduire sa taille
sans aucune perte de qualité tandis qu'une image matricielle, faite d'un nombre fini de pixels, ne pourra subir d'agrandissement
qu'au prix d'une dégradation sensible appelée crénelage ("aliasing" en anglais).
Il est donc recommandé, dans le cadre du "responsive design" que les logos, bannières, schémas d'un site soient des images
vectorielles.
Par contre pour les photos un format matriciel (png, jpg, gif, webp) est préférable.
Même si vous envisagez de créer du SVG interne via un framework SVG, de produire des documents SVG via des éditeurs graphiques tels Inkscape & Boxy SVG, une bonne connaissance de la syntaxe SVG vous sera cependant utile car tous les outils évoqués ont leurs limites ...
Premier inconvénient : Inkscape est incapables de générer du code correspondant à des animations *.
Deuxième inconvénient : le code SVG généré est forcément externe : un document SVG.
Troisième inconvénient : dans certains cas le code SVG est très verbeux, le document SVG devient lourd.
Une mauvaise utilisation des éditeurs graphiques de SVG (par méconnaissance du SVG) peut générer un code
rendant difficile les possibilités d'animations ultérieures.
Ci-dessous un document SVG est affiché dans un Iframe :
En utilisant l'éditeur WYSIWIG Boxy SVG (extension de Chrome) le document SVG pèse 900 KO alors que l'équivalent avec encodage manuel
fait 2 KO ...
En effet dès qu'il s'agit d'importation d'images matricielles dans un document SVG, l'application Boxy SVG n'est pas performante ;
elle "rastérise" l'image matricielle N fois dans le document SVG.
Inkscape est plus performent en matière d'importation d'image matricielle ; il propose l'incorporation ou la liaison.
Il peut être pratique de démarrer la réalisation d'un document SVG avec Boxy ou Inkscape puis de terminer en encodage manuel OU l'inverse : démarrer en manuel et termner avec un éditeur graphique.
Ci-dessous le document "rue_bis.svg" :
Le document "rue.svg" qui apparait en début de page web avait été encodé manuellement.
Puis j'ai fait une copie que j'ai nommé "rue_bis.svg" et j'ai ouvert cette copie avec Boxy SVG.
Certains de ces objets sont floutés (filtrage).
"rue.svg" pesait 4 KO ; "rue_bis.svg" pèse 14 KO ; ça reste donc très raisonnable.
L'encodage manuel du nuage et de la fumée aurait été fastidieuse ... (chemins avec de nombreux arcs).
Je vous invite donc à lire en paralèlle avec ce tuto sur le langage SVG, celui sur les éditeurs
graphiques de SVG : Inkscape & Boxy SVG.
Mon tuto sur Inkscape & Boxy SVG
Il existe de nombreuses banques de fichiers SVG dont certaines sont gratuites.
Citons entre autres : SVG clipart, Devient art, SGV studio, hello SVG, svgrepo.com.
Ci-dessous une image vectorielle récupérée sur l'un des sites cités :
Pour insérer cette image vectorielle (ce fichier d'extension .svg) dans une page web, il suffit d'utiliser
la balise IMG (comme pour une image matricielle).
Le code dans le document HTML est tout simplement :
< img src ="ordinateur.svg" class ="centre" alt ="dessin vectoriel" >
Je ne me suis pas contenté de "piquer" ce document SVG sur la "toile".
Je l'ai ouvert avec Inkscape, j'ai ajouté une zone de texte et j'ai sauvegardé au format optimisé
(il ne pèse plus que 300 KO au lieu de 500 KO).
La version 2 de SVG commence seulement à être implémentée par le navigateur Google Chrome.
Parmi les nouveautés de cette version ; tous les paramètres géométriques (de taille et de position :
with ,height ,r, rx ,ry ,x ,y ,cx ,cy , etc.) peuvent être passés en propriétés CSS et donc être manipulés dans le cadre d'un modèle
d'animation CSS (un "keyframes").
Dessin d'une ellipse :
Si vous naviguez avec Firefox la zone de dessin ne fait apparaitre que le dégradé CSS ... mais pas l'ellipse.
Si, par contre vous visualisez cette page web avec Chrome l'ellipse apparait.
Tous les paramètres de l'ellipse sont passés en propriétés CSS (via l'attribut STYLE).
Il serait donc très facile d'animer cet objet via un 'keyframes' CSS.
Un cercle change de rayon et d'opacité selon un cycle répétitif.
Sous Firefox le canevas est simplement rempli de jaune, pas de forme !
Le code SVG :
Notez que le cercle est identifié "rond".
La feuille de style interne :
svg{display : block ; margin : 10px auto; width : 60% ; border : 1px solid black}
@keyframes animer
{
0% {fill-opacity:0.1; r : 10;}
50% {fill-opacity :1 ; r: 200 ;}
100% {fill-opacity:0.1; r : 10; }
}
#rond {animation : animer 20s 0s infinite linear;}
Via le 'keyframes' j'anime l'opacité et le rayon donc un paramètre de style et un paramètre géométrique !
Si vous utilisez un PC sous windows je vous conseille d'installer une extension appelée SVG Viewer Extension for Windows Explorer.
Sinon il n'est pas possible d'afficher les documents SVG sous forme de vignettes.
Ci-dessous aperçu d'un dossier lorsque l'extension n'est pas installée :
Les fichiers SVG sont visualisés par le logo de Chrome (mon navigateur par défaut).
Ci-dessous aperçu d'un répertoire lorsque l'extension est installée :
Les documents SVG apparaissent sous forme de vignettes, ce qui est beaucoup mieux ...
Vous ne pouvez pas publier d'images au format SVG sur Facebook ; seules les images matricielles sont autorisées.
En effet un document SVG contient du code SVG naturellement mais peut contenir aussi du code CSS voire du JavaScript.
Or ce code JS peut être malveillant ...
La solution consiste donc à exporter (via le logiciel Inkscape) le document SVG en image matricielle (.png) puis publier
cette dernière.