Rendre un SVG responsif

Infiniment redimensionnable, le format SVG n'en est pas moins étonnamment difficile à rendre responsif. Dudley Storey montre comment y parvenir, avec un SVG image ou en ligne. Trop fort Dudley.

Par

Pour un format d’image infiniment redimensionnable, SVG peut être étonnament difficile à rendre responsif : les images vectorielles ne s’ajustent pas par défaut à la taille du viewport.

Une image SVG responsive

En tant qu’image, votre SVG peut se redimensionner avec le contenu de la page, comme tous les autres :

<img src="monkey.svg" alt="Monkey face" style="width: 100%; height: auto;">

Ça fonctionne dans la plupart des cas, mais parfois ce n’est pas suffisant, surtout si vous embarquez votre SVG via une balise <object> ou en insérant le code directement dans la page. Dans ce cas, la simple modification de width et height ne suffit pas.

Un SVG en ligne responsif

Le code SVG embarqué, une fois collé dans le <body> d’un document HTML, ressemblera à ceci :

<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<circle fill="#F7941E" stroke="#231F20" stroke-width="10" cx="250" cy="250" r="200" opacity="0.6" />
</svg>
</body>

Une fois l’élément racine <svg> nettoyé, le code est beaucoup plus présentable :

<svg version="1.1" viewBox="0 0 500 500">
<circle fill="#F7941E" stroke="#231F20" stroke-width="10" cx="250" cy="250" r="200" opacity="0.6" />
</svg>

La suppression des attributs redondants de l’élément <svg> rend l’illustration responsive, mais il y a un coût : cela ajoute un espace au-dessus et en-dessous de l’image vectorielle. On pourrait supposer que le coupable est l’attribut viewport, qui est toujours présent, mais ce n’est pas le cas, laissons-le tranquille. Il nous reste trois étapes pour intégrer l’élément SVG responsif dans notre page :

Tout d’abord, entourons le code SVG avec une <div> et ajoutons un attribut prserveRatio, ainsi qu’une classe à l’élément racine svg 

<div class="svg-container">
<svg version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet" class="svg-content">
<circle fill="#F7941E" stroke="#231F20" stroke-width="10" stroke-miterlimit="10" cx="250" cy="250" r="200" opacity="0.6" />
</svg>
</div>

Cela déplace l’illustration SVG en haut de son conteneur. Pour terminer la présentation, nous utilisons une variante de la vieille astuce de l’élément-absolument-positionné-dans-un-conteneur-relatif avec un padding décalé, plutôt que l'approche utilisée pour rendre une vidéo responsive :

.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
}
Illustration SVG responsive d’une calligraphie japonaise Shodô, à l’intérieur d'un conteneur

Remarquez que la width utilisée dans le CSS suppose que vous voulez que votre image couvre toute la largeur de la page (ou tout au moins de son conteneur parent). Le padding-bottom a pour valeur le ratio entre la hauteur et la largeur de l’illustration SVG. En divisant la hauteur du viewbox de l’élément par sa largeur, on obtient ici un ratio de 1:1 (voir plus haut : viewBox="0 0 500 500"), et par conséquent le padding-bottom doit être fixé à 100%. Si l’image SVG était plus large que haute, par exemple dans un ratio 1:2, le padding-bottom serait fixé à 50%.

Enfin, on positionne le SVG à l’intérieur du conteneur avec un petit CSS :

.svg-content {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}

Avec cette solution, notre illustration SVG peut se redimensionner gracieusement sur la page sans déranger les autres contenus. Le même code fonctionne sur une balise <object> utilisée pour embarquer le dessin vectoriel :

<div class="svg-container">
<object type="image/svg+xml" data="samurai.svg" width="100%" height="100%" class="svg-content">
</object>
</div>

Attention : tout le contenu situé à l’intérieur de sera redimensionné, y compris le texte.


Intéressé par SVG ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur SVG parus dans la Cascade.


Du même auteur dans La Cascade :

Image révélée au grattage avec SVG et CSS Blend Modes
Créer de superbes diagrammes avec SVG et CSS Blend Modes
Backgrounds Pop-Art avec SVG et CSS Blend Modes
Motifs SVG japonais
Contraste de texte automatique avec CSS Blend Modes
Backgrounds SVG, les rayures
Diagonales et motifs SVG en background
Les bases de SVG : Lignes simples et multiples
Les bases de SVG : Polygones
Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Brood X : Le principe des cigales en CSS
5 règles pour rendre SVG accessible
3 raisons d’utiliser HSL pour vos couleurs
Utiliser HSL pour vos couleurs
Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


original paru le dans le blog de Dudley Storey, the new code.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu'il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2014.