Dessiner avec SVG
Dessin vectoriel avec SVG
Dessiner avec SVG
Créer des images vectorielles avec SVG
tutoriel SVG
Snap SVG
Ci-dessus une image vectorielle au format SVG. Survolez l'image et observez !
La taille de l'image est alors doublée et vous constatez qu'elle est toujours aussi nette et pas de crénelage (ou effet "dents de scie").
C'est le gros avantage d'une image vectorielle (format SVG) par rapport à une image matricielle :l'image vectorielle peut être étirée à l'infini sans perte de qualité !
Elle sera tout aussi nette sur le grand écran d'un PC de bureau que sur le minuscule écran d'un smartphone.
Deuxième avantage : cette image est un fichier qui ne pèse que 3 KO
Troisième avantage : un fichier codé en SVG ressemble à une page Web. En effet comme le HTML, le SVG est un langage XML.
La balise RECT permet de dessiner un rectangle, la balise CIRCLE pour un cercle, etc.
Quatrième avantage : avec HTML5 Le code SVG peut être écrit directement dans la page Web (à l'intérieur du conteneur SVG).
Cinquième avantage : le SVG (interne ou externe) peut être stylé avec CSS.
Sixième avantage : les formes SVG peuvent être animées (via JavaScript ou CSS ou SMIL).
Il y a cependant un bémol. Si le format SVG est désormais bien implémenté au niveau des navigateurs on ne peut pas en dire autant au niveau des systèmes d'exploitation et de certaines plateformes. Ainsi l'explorateur de fichiers est incapable d'afficher une miniature d'un fichier SVG !
Ci-dessous l'affichage des images vectorielles par l'explorateur de fichiers de l'OS window :
Pour les images vectorielles le programme se contente d'afficher le nom du fichier avec le logo de l'application Paint.
Or paradoxalement il est impossible de
modifier un fichier SVG avec Paint (voir ci-dessous) ...
De plus pour votre BLOG hébergé par wordpress.com il est impossible d'insérer des images SVG dans une page ou un article !
Et ce pour des raisons de sécurité. En effet un fichier SVG peut contenir aussi du JavaScript ...
Une image vectorielle : un fichier au format SVG
Faites un clic droit sur l'image vectorielle de cette page. Comme pour une image bitmap vous pouvez l'enregistrer sur votre ordinateur puisque le menu contextuel vous propose
la commande "Enregistrez l'image sous".
Faites le ! 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 les images matricielles (png, jpg).
Essayez maintenant d'ouvrir "rue.svg" avec un éditeur de textes tel NOTEPAD. Vous pouvez l'ouvrir et vous voyez le code XML.
Vous voyez que le SVG, comme HTML, est un langage de balisage.
Essayez ensuite d'ouvrir le fichier avec Inkscape (un éditeur SVG WYSIWIG) ; l'image apparait et vous pouvez la modifier en mode graphique.
Trois tutoriels sur le format SVG
Dans ce tutoriel je ne traite que du SVG correspondant à des dessins statiques.
Mais dans le même site il y a un second tutoriel qui évoque le SVG dynamique
(les animations en SVG !) et qui s'intitule "Animations avec SVG". Grâce à ce deuxième didacticiel vous verrez que l'on peut animer des formes SVG selon différentes
techniques. Animations en SVG
Encoder en SVG peut s'avérer fastidieux et chronophage. Sachez qu'il existe des éditeurs WYSIWYG de SVG : Inkscape, Illustrator, Boxy SVG, etc.
Maintenant ni Inkscape, ni Illustrator ni Boxy SVG ne sont capables de générer le code correspondant à des formes animées et par ailleurs
le SVG généré est forcément externe (production d'un fichier SVG) !
Un troisième tuto porte donc sur le logiciel Inkscape qui a l'avantage d'être gratuit. Mais dans ce dernier tuto je dis aussi quelques mots sur Boxy SVG (extension de Chrome). Logiciel Inkscape
Actualité
En ce début 2019 je viens de découvrir une librairie JS intitulée Snap SVG imaginée Dmitry Baranovskiy.
Avec un script écrit en Snap vous créez et remplissez de formes un canevas SVG. Avec à un syntaxe inspirée de jQuery le code est donc très succinct.
Par ailleurs l'outil est d'une grande souplesse. Ainsi vous pouvez encoder au départ en "SVG traditionnel" (langage de balisage comme HTML) puis compléter le
remplissage du canevas avec un script en Snap. Autre avantage le code SVG généré est interne à la page.
Par ailleurs la librairie propose des méthodes pour l'animation !
Le problème est que la documentation est encore rare et en anglais ...
Donc je propose désormais dans ce tuto quelques pages sur Snap SVG pour dessins statiques.
Découverte de Snap SVG
Dans le tuto "Animations avec SVG" j'ai rajouté aussi des pages sur les animations cette fois avec Snap SVG.
Animations avec Snap SVG