SVG

Lorsqu'on n'indique pas l'attribut viewBox dans un élément svg, mais que l'on indique un width et un height, une viewBox par défaut est utilisée :

xmin = 0
ymin = 0
largeur viewBox = largeur width
hauteur viewBox = hauteur height

Exemple

Dans l'exemple ci-dessous, le code <svg width="100" height="150"> est équivalent à <svg width="100" height="150" viewBox="0 0 100 150">.

Remarque : style css

Insistons sur le fait que le style est du code css en reportant les attributs de style dans le head de la page :

Ci-dessous on a utilisé la balise SVG text pour repèrer les coordonnées des coins du rectangle contenant l'élément SVG.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  Orientation </title>
		<style>
		svg{
			border: 1px dotted black ;
			font-size : 10px; /* taille de la police utilisée dans la figure svg */
		}
		</style>
    </head>
    <body>

<p> Premier cadre SVG : width="100" et height="100". </p>

<p> Second cadre : width="200" et height="300". </p>

</body>
</html>

Commentons un peu les attributs de la balise text :

x, y avec text-anchor:start constituent les coordonnées du coin inférieur gauche du rectangle circonscrit au texte.
x, y avec text-anchor:end constituent les coordonnées du coin inférieur droit du rectangle circonscrit au texte.
dy décale l'ordonnée y. Comme l'axe des y est orienté vers le bas, une valeur positive de dy décale vers le bas et une valeur négative décale vers le haut.

SVG

Le cadre sans viewbox

Exemple

Remarque : style css

Un peu de texte