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 HTML il est possible de dessiner des rectangles voire des cercles ou ellipses via des astuces CSS.
Par contre ça devient très compliqué (mais pas impossible avec l'aide de CSS) de dessiner des triangles, des pentagones,
des paraléllogrammes, des trapèzes, etc.
Par ailleurs le positionnement de ces formes géométriques à l'intérieur de leur conteneur n'est pas toujours évident.
Pour SVG la réalisation de formes géométriques complexes et leur positionnement ne pose aucun problème.
Donc si vous souhaitez réaliser de superbes dessins dans une page web ayez le réflexe SVG.
Par ailleurs les images obtenues étant vectorielles, elles peuvent être agrandies ou réduites sans perte de qualité.
SVG est l'acronyme de "Scalable Vector Graphics".
Le SVG est un langage XML qui a une structure identique à celle de HTML mais bien sûr
avec ses propres 'tags' (rect, circle, ellipse, line, path, image, defs, use, etc. ).
Vous pouvez styliser les objets SVG via le CSS ; la plupart des propriétés CSS peuvent
s'appliquer à des éléments SVG ; il existe cependant quelques propriétés spécifiques à des objets SVG.
Vous pouvez manipuler des objets SVG via JavaScript.
Depuis que les navigateurs ont implémenté la norme HTML5 vous pouvez encoder directement du SVG dans une page web.
On distingue donc le "SVG interne" (contenu dans un document HTML) et le "SVG externe" (un document d'extension .svg).
Maintenant, je vous rassure, il n'y a pratiquement aucune différence entre du code SVG interne et externe.
Ci-dessous un document SVG inséré dans cette page web.
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.
En combinant SVG & JavaScript il est possible de réaliser des jeux vidéos basiques comme l'exemple ci-dessous.
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
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 très utile car tous les outils évoqués ont leurs limites ...
Votre connaissance du langage SVG vous permettra d'avoir un regard critique vis à vis du code généré par ces différents outils.
Vous serez à même d'améliorer le code SVG généré.
L'utilisation de Inkscape & boxy SVG est évoquée dans un autre tuto :
mon tuto sur Inkscape & Boxy SVG
Ci-dessous quelques exemples de situations où les outils générateurs de SVG sont à la peine.
Donc l'encodage manuel du SVG peut s'avérer utile dans une partie du développement.
Ci-dessous un document SVG dans un Iframe :
Il ne pèse que 2 KO !
Ci-dessous j'ai saisi tout le code SVG. Mais cet encodage est rapide car le code est plutôt répétitif.
Ainsi tous les filtres ont une syntaxe pratiquement identique.
Même remarque pour les instructions IMAGE : importation de l'image matricielle par liaison.
Attention il faut que pour un affichage correct de ce document SVG il faut que l'image bitmap et le document SVG
soient dans le même dossier.
Si j'avais utilisé Boxy SVG (extension de Chrome) le document SVG pèserait 900 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" (enregistre) l'image matricielle N fois dans le document SVG.
Si j'avais utilisé Inkscape j'aurais pu importer l'image matricielle sous forme d'une liaison mais ...
Ci-dessous extrait du code SVG généré par Inkscape dans le cadre d'une importation de cette image bitmap par liaison :
La valeur de l'attribut xlink:href a un sens en local mais aucun en cas de transfert du document SVG chez l'hébergeur.
J'aurais donc du modifier les valeurs des attributs href avant de téléverser vers l'hébergeur du site.
Il peut être préférable 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" a é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 ; le poids reste donc très raisonnable.
L'encodage manuel du code correspondant au nuage et de la fumée aurait été une tâche fastidieuse ... (chemins avec de nombreux arcs).
Je vous invite donc à lire en parallèle à ce tuto celui sur les éditeurs
graphiques de SVG : Inkscape & Boxy SVG.
Tuto sur Inkscape & Boxy SVG
En HTML il n'est pas nécessaire de fermer les balises orphelines (balises simples).
Donc nous pouvons écrire :
< img src = ... alt = ... > et non pas < img scr = ... alt = ... />
Dans le langage SVG il est impératif de fermer les balises simples sinon vous
avez une erreur fatale avec le message : "Opening and ending tag mismatch".
Donc prenez l'habitude, même en HTML, de faire produire une barre oblique avant la parenthèse angulaire fermante.
D'ailleurs en SVG toute balise peut devenir orpheline si elle ne contient pas une autre balise. Elle est forcément double (avec une balise fermante) si elle contient un ou plusieurs autres éléments.
Extrait d'un code SVG :
Les éléments defs & clipPath sont obligatoirement des balises doubles car elles contiennent d'autres éléments.
Les éléments circle, polygon, image peuvent être des balises orphelines.
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).
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.