L’autre jour, je travaillais sur un projet nécessitant l’utilisation de D3.js (pour Data-Driven Documents). Grosso modo, cette bibliothèque JavaScript permet de générer des graphiques SVG sur vos pages web. Le SVG généré est dit inline, autrement dit il est embarqué directement dans la page via la balise svg.

Ceci dit, ce n’est pas de cet outil dont je veux parler, mais bien de SVG et responsive (qui font très bon ménage avec des sites optimisés Retina™©).

J’avais fait mon template, et j’ai ajouté un graphique généré par D3.js. Je teste le résultat, le graphique s’affiche bien. Comme le site est responsive, je redimensionne la fenêtre, et là… patatrac, le code SVG embarqué ne se redimensionne pas.

J’étudie le code de RÖCSSTI, ah, effectivement, je n’avais pas prévu le cas dans la CSS (corrigé depuis). Je corrige de suite :

svg {
  height: auto;
  max-width: 100%;
}

Là, je me dis que l’affaire est entendue… et non pas du tout ! Cela ne marche toujours pas.

En bon français, je commence à râler : j’avais déjà utilisé du SVG en ligne sur d’autres sites comme Parenti Design et je n’avais pas constaté le problème. Mais diantre, de quoi cela a bien pu venir ?

Après quelques recherches, j’étudie le code de l’exemple que j’ai utilisé, à savoir un donut chart avec D3.js.

Il manque quelques attributs par rapport à « ce-que-j’ai-qui-marche™ », je les ajoute (en gras ci-dessous) :

var svg = d3.select(".arc").append("svg")
 .attr("width", width)
 .attr("height", height)
 .attr("role", "img") // un peu d’a11y
 .attr("viewBox", "0 0 "+ width + " " + height) // l’attribut viewbox
 .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

Et là, ça marche. Après quelques recherches, j’apprends que l’attribut viewbox sert à préserver le ratio entre autres.

Je vous ai fait rapidement un exemple à la Rache™ : affichage d’un SVG inline en responsive.

J’ai volontairement mis le logo SVG de RÖCSSTI dans un conteneur trop petit. Dans le premier cas, l’attribut viewbox est absent et ça foire, dans le second, il est présent. Si le max-width: 100%; n’est pas présent dans la CSS, cela ne marche pas non plus.

Bref, vérifiez bien les SVG que vous générez ou que l’on vous fournit si vous ne voulez pas avoir quelques soucis en responsive. Et au fait, le SVG, c’est génial.