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).
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 balises 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 canevas 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 dessins vectoriels (fichiers ayant pour extension .svg).
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 de dessins vectoriels dans une page web se réalise (comme pour une image matricielle) avec la balise IMG.
Cependant dans certains cas il faut 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 qui les dessinent 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).
"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