Formes simples : la balise rect de SVG

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 HTML : 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 de dessins vectoriels (fichiers d'extension .svg).

Code SVG écrit dans la page

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="400" height="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 ="600"/> <img src ="2rectangles2.svg" width ="600"/> ...

Commentaire

Du CSS

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.

Code HTML et SVG de la page

Dans cette page il y a trois canevas SVG.
Pour le premier le code SVG est écrit directement dans la page (à l'intérieur de la balise 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 peut se faire (comme pour une image matricielle) via la balise IMG.

Code du dessin vectoriel "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 du dessin vectoriel "2rectangles2.svg" (extrait)

... <rect x="150" y="100" width="300" height="100" fill ="red"/> <rect x="200" y="50" width="50" height="200" fill ="green"/> ...

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

Lorsque des formes se superposent l'ordre des balises qui les dessinent précise l'ordre d'empilement.

Notez dans chaque balise rect l'emploi de l'attribut fill pour remplir la forme (sinon remplissage par défaut de noir).

Avant de coder

"Sans méthode la pensée erre et l'action tâtonne". 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