SVG : dessiner des rectangles

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 la première image SVG.
Par contre pour les deux dernières images il s'agit de l'insertion de fichiers SVG existants.

Code SVG écrit dans la page

Ci-dessus un premier rectangle simple suivi d'un deuxième avec des angles arrondis.

Insertion de deux dessins vectoriels

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.

Le code de la page web (extraits)

... <style> svg,img{display : block ; margin : 5px auto 5px auto ; border : 1px solid green ;} ... <body> ... <svg width="50%" height="auto" viewBox ="0 0 400 200"> <rect x="30" y="30" width="100" height="100" /> <rect x="150" y="80" width="200" height="100" rx = '20' ry = '10' /> </svg> ... <img src ="2rectangles.svg" width ="50%"/> <img src ="2rectangles2.svg" width ="50%"/> ...

Commentaire

Du CSS

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 margin : auto de CSS ne s'applique qu'aux éléments "block" d'où le display : block dans la règle de style (avant margin: auto).

Code HTML et SVG de la page

Dans cette page il y a trois images vectorielles SVG.
Pour la première image 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 existants.

Concernant le deuxième rectangle de la première image 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 de fichiers SVG dans une page web se réalise comme pour une image matricielle (fichiers PNG & JPG & GIF) avec la balise IMG.
Cependant dans certains cas il faudra utiliser la balise OBJECT mais j'y reviendrai.

Dans le cadre de l'écriture directe du SVG dans la page web et afin que l'image vectorielle soit adaptative exprimez la largeur d'affichage en % (height : auto).
L'attribut viewBox de la balise SVG devient alors obligatoire pour dessiner les formes. La position et taille de chaque forme sera calculée à partir des valeurs du viewBox et non par rapport aux valeurs de width & height).

Code de l'image vectorielle "2rectangles.svg" (code complet)

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="400" > <rect x="200" y="50" width="50" height="200" fill ="green"/> <rect x="150" y="100" width="300" height="100" fill ="red"/> </svg>

Le rectangle rouge est dessiné après le vert donc il est au dessus du vert !

Code de l'image vectorielle "2rectangles2.svg" (extrait)

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 simplement "fermer" la balise ouvrante.

Avant de coder

"Sans méthode la pensée erre et l'action tâtonne".

Attention dans une zone de dessin SVG le point d'origine est le coin haut gauche. svg croquis

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