Attribut SVG viewbox, bon pour le responsive

Attribut SVG viewbox, bon pour le responsive (le 7 septembre 2014)

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.

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1634

2 commentaires

Posté par David le 07/09/2014 à 12:04:51
Bonjour,

Pour faire beaucoup de svg en effet la balise viewBox est très important pour le responsive, malheureusement ce n'est pas suffisant. En effet, internet explorer (y compris IE11) ne modifiera pas la hauteur qui restera à 150px.
La seule solution actuelle pour avoir un svg vraiment responsive c'est d'utiliser le "padding hack". En gros on met un bloc container autour du svg et on ne lui attribue pas de hauteur et on utilise un padding-bottom pour garder les proportions. Le svg est ensuite placer en absolut par rapport au bloc. Il doit y avoir pas mal d'exemples sur google.

Bonne journée!
Posté par Nico le 07/09/2014 à 22:32:11
Effectivement, j'avais rencontré quelques bugs parfois, mais j'ignorais que ça venait de ça. La faible proportion d'IE sur mobile me l'avait fait louper dans mes derniers projets.

Merci beaucoup pour ce commentaire ! (je vais investiguer)

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.