Je rappelle qu'avec HTML5 il est désormais possible d'écrire directement le code SVG dans la page web (à l'intérieur du nouveau conteneur SVG).
C'est ce que je fais dans cette page pour le premier canevas SVG.
Par contre pour les deux autres canevas il s'agit de l'insertion d'images vectorielles au format SVG (fichiers d'extension .svg).
Ci-dessus un premier rectangle simple suivi d'un deuxième avec des angles arrondis.
Les deux derniers dessins vectoriels sont identiques à une nuance près. Dans l'avant dernier le rectangle rouge est au dessus du vert alors que dans le dernier c'est l'inverse : vert au dessus du rouge.
svg,img{display : block ; margin : 5px auto 5px auto ; border : 1px solid black ;}: les éléments SVG et IMG ne sont pas nativement de type block. Or la propriété margin : auto de CSS ne s'applique qu'aux éléments "block" d'où le display : block ; dans la règle de style.
Dans cette page il y a trois zones de dessin SVG.
Pour le premier le code SVG est écrit directement dans la page (à l'intérieur du conteneur SVG) alors que pour les deux autres il s'agit d'insertion de
fichiers SVG.
Dans ce deuxième rectangle les angles sont arrondis car il y a deux attributs supplémentaires : rx et ry (rayon horizontal et rayon vertical de chaque arrondi).
Si un seul de ces attributs est précisé ils sont supposés être égaux (rx = ry).
En cas d'écriture directe du code SVG dans la page web les attributs xmlns et xmlns:xlink de la balise svg sont facultatifs !
L'insertion d'images vectorielles (fichiers SVG) dans une page web se réalise comme pour une image matricielle (fichiers PNG & JPG) avec la balise IMG.
Cependant dans certains cas il faudra utiliser la balise OBJECT mais j'y reviendrai.
Le rectangle rouge est dessiné après le vert donc il est au dessus du vert !
Le rectangle vert est dessiné après le rouge donc il est au dessus du rouge !
L'ordre des balises précise l'ordre d'empilement des formes correspondantes.
Notez dans chaque balise rect l'emploi de l'attribut fill pour remplir la forme (sinon remplissage par défaut de noir).
Remarquez qu'il n'y a pas de balise fermante RECT. Comme il n'y a pas de contenu à l'intérieur de chaque élément RECT on peut plus simplement "fermer" la balise ouvrante.
"Sans méthode la pensée erre et l'action tâtonne".
Si vous voulez être productif (coder vite et bien) je vous conseille de passer par le stade croquis sur une feuille de papier millimétrée (ou une feuille à petit carreaux) avant de vouloir coder en SVG (soit directement dans la page soit dans fichier SVG).
Si vous utilisez une feuille avec des petits carreaux (de 5mm par 5mm) décidez alors d'une échelle. Je vous propose qu'un carreau représente 10px par 10px.
Donc un 1/2 cm = 10px et 1cm = 20px.
Vous avez donc une échelle 1/20 (1cm pour 20px). C'est l'échelle que j'ai utilisé dans le croquis ci-dessus.
Une zone de dessin SVG de 400 par 200 fait donc dans notre croquis 40 carreaux par 20 carreaux (c'est à dire 20cm par 10cm).
Ensuite vous dessinez les formes.
Par lecture directe du croquis vous obtenez les valeurs x et y de chaque rectangle ainsi que les valeurs
des attributs width et height .Il suffit, en effet, de compter le nombre de carreaux et de multiplier par 10 pour obtenir la valeur en pixels.
Retour menu