Je joue avec SVG (et je me fais un peu chier…)…
– Dans un cas très spécifique, je trace des filets avec un petit SVG, que j’anime ensuite. Sur un écran 4K, les filets apparaissent « cassés » en deux parties (n’importe quoi, donc). J’ai dû passer par chrome://flags pour changer le rendu des SVG.
– J’utilise beaucoup le SVG pour afficher des images bitmap avec des masques. Ça me permet d’avoir des détourages complexes sans balancer des PNG (10 fois plus lourds que les JPG). Ça fonctionne bien, mais sous Safari Mac, les images bitmap dans les SVG, redimensionnes, ne sont pas très nettes.
– J’insère souvent les SVG directement à l’intérieur de ma page HTML, histoire de pouvoir en contrôler l’affichage (par CSS et/ou par Javascript). Difficulté : je n’arrive pas à modifier la viewBox dynamiquement en Javascript (et ce n’est pas un problème de majuscule). Si je change les valeurs en Javascript, ça ne se redessine pas avec les nouvelles valeurs.
Pour pouvoir changer l’orientation d’un SVG en fonction de l’orientation de l’écran, hé ben j’ai fait deux SVG (pfff…). (Comme le contenu est dynamique, ça ne pèse pas vraiment plus lourd, donc ce n’est pas pénalisant, c’est juste un peu moche.)
– Pas de gestion native des images bitmap en responsive. Et comme pas d’images en « background » que je pourrais redéfinir en CSS, je n’arrive pas à contourner le problème. Pour l’instant, la solution que j’ai trouvée, c’est de mettre des <picture> correctement gérés dans le HTML (éventuellement les masquer), puis de « copier » le contenu du currentSrc de ces images à l’intérieur d’un xlink:href dans le SVG. De cette façon j’ai des images « responsive » dans le SVG (mais dépendant de Javascript, et donc démarrées à document.ready– en revanche, si navigateur récent, les images sont éventuellement préloadées, puisque les « bons » fichiers sont dans un <picture> HTML5).