Le SVG dans une page web

Placer un SVG dans une page web peut se faire de plusieurs façons. On peut le placer dans un tag img, comme n’importe quelle image. Mais on peut aussi le coder directement dans la page, sans passer par un fichier externe.

Précédent | 6/6

Le SVG comme fichier externe

Le tag img est associé au format matriciel, mais on peut le lier àun fichier SVG.

<img src="monimage.svg" class="imsvg">

La taille du SVG est importante : définie dans la document d’origine, elle s’applique àl’affichage, comme la taille en pixel d’un document matriciel. On peut évidemment influer sur cette taille via les CSS.

.imsvg {
    width:400px;
}

Le SVG écrit dans la page HTML

Le SVG est un format écrit en XML. Cette particularité, et le caractère open source de son code, le rendent compatible avec le HTML. Les navigateurs offrent donc la possibilité de placer un SVG directement dans le code html.

Voici une image réalisée avec un logiciel standard de création en vectoriel.

Remarquez que le fichier a été recadré pour être àla taille du dessin, ce qui est nécessaire contrairement àdes imports dans un fichier comme indesign, qui recadre lors de l’import.
Le code de cette image est celui-ci :

<?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" x="0px" y="0px"
	 width="219px" height="126px" viewBox="0 0 219 126" xml:space="preserve">
<path fill="#FFFFFF" stroke="#000000" stroke-width="10" stroke-linejoin="round" stroke-miterlimit="10" d="M209.634,61.486
	C194.906,30.912,155.109,9,108.317,9C61.525,9,21.729,30.912,7,61.486c14.728,30.574,54.525,52.486,101.317,52.486
	C155.108,113.973,194.906,92.061,209.634,61.486L209.634,61.486z"/>
<circle cx="108.317" cy="61.486" r="43.837"/>
</svg>

Pour placer cette image directement dans une page html, nous allons récupérer le code du tag SVG et le placer dans la page, sans son entête xml
et son doctype.

Le résultat est une image qui comporte les avantages du vectoriel : nette àtoute les taille, légère, modifiable de plus grâce aux css, ou directement dans le code.

Une version directement modifiée dans le code, par exemple :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="219px" height="126px" viewBox="0 0 219 126" xml:space="preserve">
<path fill="#FFFFFF" stroke="blue" stroke-width="10" stroke-linejoin="round" stroke-miterlimit="10" d="M209.634,61.486 C194.906,30.912,155.109,9,108.317, 9C61.525,9, 21.729,30.912,7,61.486c14.728,30.574,54.525,52.486,101.317,52.486 C155.108,113.973,194.906,92.061,209.634,61.486L209.634,61.486z"/>
<circle fill="red" cx="108.317" cy="61.486" r="43.837"/>
</svg>

Modifier un svg avec CSS

Il est possible d’accéder aux éléments d’une image SVG àtravers CSS. L’usage d’id et de classes est tout àfait possible.
Voici un code produisant une animation.

<style>
            .cercle {
                fill:red;
            }
            .contour {
                animation: col 10s linear infinite;
            }

            @keyframes col {
                0%{stroke-width:1;
                    stroke:red;}
                25%{stroke-width:10}
                50% {stroke-width:1}
                75%{stroke-width:10; stroke:blue;}
                100% {stroke-width:1}
            }
        </style>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="219px" height="126px" viewBox="0 0 219 126" xml:space="preserve"><path class="contour" fill="#FFFFFF" stroke="#000000" stroke-width="10" stroke-linejoin="round" stroke-miterlimit="10" d="M209.634,61.486 C194.906,30.912,155.109,9,108.317, 9C61.525,9,21.729,30.912,7, 61.486c14.728,30.574,54.525,52.486,101.317,52.486 C155.108, 113.973,194.906,92.061,209.634,61.486L209.634,61.486z"/><circle class="cercle" cx="108.317" cy="61.486" r="43.837"/> </svg>