Dimensionnement automatique d'images SVG

Bonjour,

J'ai un tableau dont les cellules contiennent des boutons. Ces boutons contiennent une image SVG.

J'aimerais que ce tableau et les images qui sont dans les cellules soient dimensionnés automatiquement.
Ce que je veux dire par là, c'est :
1 - Le tableau prend au mieux toute la place disponible du parent
2 - L'image qui est dans une cellule prend au mieux toute la place disponible de la cellule
3 - L'image conserve son rapport largeur/hauteur comme indiqué dans l'attribut viewBox du fichier SVG (qui est censé être fait pour ça non ?), et est centrée dans la cellule au cas où la proportion ne joue pas avec la taille de la cellule; elle ne doit surtout pas être coupée et il doit y avoir un minimum d'espace vide
4 - Toutes les images et donc les cellules ont la même taille à l'instant T, mais elles ne sont pas forcément carrées
5 - Ca doit fonctionner quelque soit le rapport largeur/hauteur des images

Le code HTML est généré dynamiquement par javascript mais ça donne ça :

<div id="game">
<table>
<tr>
<td>
<a href="#"><img alt="machin" src="machin.svg" /></a>
</td><td>
<a href="#"><img alt="truc" src="truc.svg" /></a>
</td><td>
...
</td></tr>
<tr>
...
</tr>
</table>
</div>

Le code CSS actuel est :

#game {
float: left;
width: 32%;
max-width: 32%;
height: 91%;
max-height: 91%;
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
margin: 0;
}

J'ai fait les constatations suivantes :
* Si je n'indique pas de taille pour les images comme dans le code HTML exposé ci-dessus, elles semblent prendre une taille aléatoire qui n'est pas la bonne, ou alors ça fait des trucs bizarres de 1px de haut
* Si j'indique width=100% ou height=100%, c'est pareil
* Si j'indique width=100% et height=auto ou l'inverse, c'est encore pareil
* width=auto et height=auto c'est encore une fois la même chose
* Les tailles du genre width=1em ne semblent pas fonctionner non plus, c'est comme si elles étaient ignorées
* Par contre si j'indique explicitement une taille en dur, p.ex. width=30 et height=30, les images prennent bien la taille spécifiée mais évidemment ce n'est pas celle qu'il faudrait

Comportements vérifiés avec chrome et firefox; pour le moment j'ai écarté IE et Safari.

J'aimerais bien ne pas avoir à spécifier explicitement une taille. L'entier du truc devrait être fluide et s'adapter à la zone d'affichage disponible. Comment faire ?

Je pourrais convertir les images SVG en PNG ou autre chose, mais j'ai choisi SVG justement parce que c'est censé pouvoir se redimensionner librement sans perte de qualité. De plus je n'ai aucune idée de la taille qu'il faudrait.

Je ne peux malheureusement pas fournir facilement un exemple en ligne, la page en question nécéssite un compte membre avec mot de passe, et en réalité, le code HTML est dynamiquement généré par javascript et les images sont mis à jour selon l'état du jeu.
J'espère que j'ai suffisament décrit ce que je souhaite...

Merci.

Salut QuentinC,

Je t'invite à regarder ce post : SVG, épaisseurs de lignes en CSS. Le sujet vient de s'ouvrir. Mais je pense qu'il va t'intéresser aussi.

Par ailleurs, je pense que tu devras faire quelques petites recherches sur glouglou à propos de ces attributs et règles css :
- viewBox (attribut élément svg sensible à la casse)
- preserveAspectRatio (attribut élément svg sensible à la casse)
- vector-effect (règle css)

Je pense que tu vas devoir oublier img au profit de svg. Pour un projet, j'avais comme toi. Insérer un svg dans img. Lorsque j'ai redimensionné l'image, sur IE (même le 10), j'avais un rendu douteux (scaling disproportionné).

<<<EDIT
parcours cet article : L’attribut viewBox en SVG. Je pense qu'il devrait répondre à ta question.
EDIT;
Modifié par niuxe (19 Jul 2015 - 19:22)

Bonjour,

Je n'ai rien pour tester sous la main mais je pense que le piège est ici : dans une feuille de style width:100% prend effectivement 100% de la taille laissée disponible par l'élément parent, pas de souci de ce côté là. En revanche height:100% ne donnera que 100% de la dimention height définie dans la balise html img (à destination du SVG j'entends), donc... 0 de hauteur étant donné que celle-ci n'est pas définie.

Edit : +1 avec Niuxe pour l'abandon de la balise img au profit du SVG inline.
Modifié par Olivier C (19 Jul 2015 - 20:59)

QuentinC a écrit :

Mais alors pourquoi width=100% et height=auto ne fait pas mieux ?
Parce que si je suis cette logique, ça devrait marcher.

Quand tu lis la doc sur cet attribut, tu t’aperçois que la valeur auto n'existe pas.

QuentinC a écrit :

1 - Je fais comment pour l'attribut alt ? C'est le desc de SVG qui le remplace ?
En plus, la même image présente à deux endroits différents n'ont pas le même alt; l'alt contient les coordonnées de la case, p.ex. H5, en plus de ce qui se trouve sur la case.

+1 question pertinente
En fait il y a 2 éléments à renseigner :
- desc
- title

Dans tous les cas, ça se passe comme ça (valid w3c):

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="4in" height="3in"
     xmlns="http://www.w3.org/2000/svg">
  <title>
    titre générale
  </title>
  <desc>
    description générale
  </desc>
<g>
  <title>
    le titre de l'élément graphique compris dans le groupe (&lt;g&gt;)
  </title>
  <desc>
     description de l'élément graphique comprise dans le groupe (&lt;g&gt;)
  </desc>
  <!-- élément svg graphique -->
</g>
</svg>

Certains navigateurs auront la fâcheuse habitude d'afficher une infobulle au survol. le texte choisi sera le premier élément. Là suivant mon exemple, il devrait reprendre le texte de title ( titre générale)

QuentinC a écrit :

2 - Ici j'ai présenté les choses de manière simple; en réalité le code HTML que j'ai donné en exemple est entièrement géré par javascript. C'est une grille de jeu.
Du coup je fais comment ? Je suis obligé de récupérer les fichiers par AJAX, les parser, puis virer le prologue XML, le doctype et les autres trucs invalides en SVG inline ?
Est-ce que ça marche d'ajouter/supprimer des noeuds SVG dans le DOM ?

oui, puisque le SVG est un DOM !

exemple fait rapidement :

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #global{font-family: sans-serif;max-width: 800px;margin: 0 auto;}
        svg{
        	fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:1.41421;
        }
        #Calque > *{
        	fill:none;stroke-width:1px;stroke:#000;
        	vector-effect:non-scaling-stroke;
        }
    </style>
</head>
<body>
    <div id="global">
        <div>
        <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<g id="Calque">
	<path d="M0,0 h 100 v 100 h -100 z" />
	<path d="M0,100l100,-100"/>
	<path d="M0,0l100,100"/>
</g></svg>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed doloremque quod iusto omnis nobis quisquam illum veritatis rerum et eos perspiciatis dolorum quia aliquam necessitatibus dicta qui adipisci quam suscipit? ipsum dolor sit amet, consectetur adipisicing elit. Error eveniet repellendus officiis tempora ratione atque vel mollitia minus eos repudiandae voluptatibus exercitationem enim provident dicta quisquam beatae adipisci. Dolorem ratione! ipsum dolor sit amet, consectetur adipisicing elit. Error similique quo ea suscipit accusantium quas perspiciatis nihil quos delectus qui sunt mollitia ad repellendus inventore magni fugit quisquam nostrum labore. ipsum dolor sit amet, consectetur adipisicing elit. Nemo deserunt inventore eaque labore quas facilis distinctio tempora odio sapiente sint facere dolorum esse iste nesciunt suscipit illum soluta excepturi mollitia.</div>
    </div>
    <script>
    window.addEventListener('load',function(){
        document.querySelectorAll('#global svg')[0].addEventListener('click',function(){
        	console.log(this);
        });
    });    
    </script>
    
    
</body>
</html>

QuentinC a écrit :

3 - Je ne prévois pas de faire de manipulations sur les SVG eux-mêmes, c'est pour ça que j'ai opté très naturellement pour &lt;img/&gt;

Comme je t'ai dit précédemment, j'ai eu des soucis avec IE. mais j'ai bien saisie ta démarche qui était louable à l'origine.

QuentinC a écrit :

Est-ce que passer à du SVG inline ne risque pas d'être dramatique pour les performances ? Sachant que la plus grande grille possible actuellement est 15x15 donc 225 cases donc avec 225 images.

Là tu abordes un vaste sujet. Je vais essayer de t'expliquer le principe. Le problème n'étant pas tellement le poids du fichier. Le problème étant le nombre de vecteur et surtout le nombre de points d'ancrages. Par exemple, tu peux avoir un fichier de 20ko mais en fait, tu ne peux pas l'utiliser parce qu'il y a trop de vecteur et de points d'ancrage quelque soit sa taille affiché à l'écran. Pour te donner un exemple concret, quand tu vas faire un tour sur google map avec un vieille ordi, "le fichier" pèse le même poids mais l'application sera pas du tout performante.

Si avec un objet graphique vectoriel, tu comptes en créer plusieurs occurences, les clones devraient t'aider :

<svg width="400" height="300" xml:lang="fr" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
        	<title>une forêt de sapins</title>
        	<style type="text/css">
		    	#sapin rect{ fill:peru; } 
		    	#sapin polygon{ fill:forestgreen; }
        	</style>
        	<g id="sapin"> 
        		<rect x="45" y="70" width="10" height="20"/>
        		<polygon points="20,70 80,70 60,55 70,55 55,40 65,40 50,20 35,40 45,40 30,55 40,55"/>
        	</g>
        	<use xlink:href="#sapin" transform="translate(100,100) scale(1.5)"/>
        	<use xlink:href="#sapin" transform="translate(10,190) scale(1.2)"/>
        	<use xlink:href="#sapin" transform="translate(300,-20) scale(2)"/>
        	<use xlink:href="#sapin" transform="translate(320,200) scale(0.4)"/>
        	<use xlink:href="#sapin" transform="translate(200,160) scale(0.2)"/>
        	<use xlink:href="#sapin" transform="translate(170,30)"/>
        </svg>

Modifié par niuxe (20 Jul 2015 - 00:52)

Merci pour la partage des informations. coque iphone 6s housse galaxy note 5
Modifié par muniste (24 Jul 2015 - 11:20)

QuentinC a écrit :


Ca ne répond pas à ma question en fait. Je vais avoir plusieurs SVG indépendants. Est-ce que ce genre d'astuce va fonctionner ?
Si j'ai une définition dans un SVG et que je veux l'utiliser dans un autre SVG, je peux ?

Je ne crois pas que ça fonctionnera puisque tu ne seras pas sur le même dom. Après il y a la notion d'id. Ce qu'il faudrait, c'est tout simplement essayer dans un fichier html avec 2 svg. Un pour la definition et l'autre pour la création d'occurences.

QuentinC a écrit :
ON est bien d'accord là-dessus. Mais comme je l'ai dit, je n'ai pas besoin de cette possibilité.

Je comprends bien. Cependant, je pense que tu développeras par la suite et tu risques de te retrouver coincé et être obliger à faire du remaniement. . Tu sais c'est un peu si tu décides de faire un site à la old school (<table>) et style en ligne.
Modifié par niuxe (23 Jul 2015 - 01:23)

Bon, je viens de tester l'accessibilité des SVG inline. Le résultat est sans appel :

JFW+IE9: title et desc sont lus tous les deux, dans l'ordre d'apparition
JFW+IE11: idem
JFW+firefox: rien !
JFW+Chrome: rien !
NVDA+IE9: title et desc sont lus tous les deux, dans l'ordre d'apparition; le dernier qui apparaît est doublé
NVDA+IE11: idem !
NVDA+firefox: rien !
NVDA+Chrome: rien !
VO+Safari sur iOS 8.4: rien !

Bravo Microsoft !
Les autres, je ne les félicite pas.

LE message est clair, le SVG inline est majoritairement inaccessible. Il faut utiliser un autre moyen pour rendre le texte alternatif.
Du coup je doute fort que les possibilitées plus avancées que propose SVG d'après ce que j'ai déjà pu lire, comme la possibilité de mettre le focus sur une région précise du SVG, soient plus accessibles. Ca reste à tester.

Code utilisé pour le test :

<!DOCTYPE HTML>
<html><head>
<title>Test SVG</title>
</head><body>
<h1>Test SVG</h1>
<p>Image 1 : </p>
<p>
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Title  1</title>
<desc>Desc 1</desc>
<circle cx="50" cy="50" r="50" fill="pink" stroke="red" />
</svg>
</p>
<p>Image 2 : </p>
<p>
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Desc 2</desc>
<title>Title 2</title>
<circle cx="50" cy="50" r="50" fill="yellow" stroke="blue" />
</svg>
</p>
<p>Fin du test</p>
</body></html>

Plus grave, si le SVG inline est inclus dans un lien :

<a href="#">
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Title  1</title>
<desc>Desc 1</desc>
<circle cx="50" cy="50" r="50" fill="pink" stroke="red" />
</svg>
</a>

Le texte alternatif n'est pas plus lu. ET sur IE il faut faire deux fois tab pour passer au lien suivant si on renseigne title et desc.

Conclusion, les API d'accessibilité des navigateurs en-dehors de IE9-11 sont à la ramasse, ils ne communiquent rien au lecteur d'écran dans ce cas.

EDIT: j'ai fait quelques recherches, et en ce qui concerne la'ccessibilité des SVG inline, j'ai trouvé cet article :
http://www.sitepoint.com/tips-accessible-svg/

J'ai retesté et il suffit d'ajouter role="img" et alors ça marche sur IE et firefox sans bug.
Modifié par QuentinC (24 Jul 2015 - 17:02)

Désolé, je fais un double post, ça se justifie parce que l'autre était un spécial accessibilité, un peu décâlé par rapport au sujet de départ.

J'abandonne, j'y arrive pas.

J'ai essayé de remplacer les <img/> par des <svg>. Résultat, plus rien ne fonctionne. Même si je mets explicitement width et height à une valeur fixe, mon petit script de debug me rapporte des tailles d'image de 0x19 sur firefox et 0x18 sur IE.
Le script de debug consiste à afficher la valeur de offsetWidth et offsetHeight, qui sont censé toujours être correctes et absolues. Je n'ai pas d'autre moyen de vérifier si la taille des images est correcte...
Ca me fait ça que j'insère le SVG à la innerHTML ou bien avec du createElement/setAttribute/appendChild.
En plus le texte alternatif créé dynamiquement n'a pas l'air de m'être restitué, alors que ça marche en statique sur firefox.

Ca ne marche vraiment que si je donne une taille en px pour une des deux dimensions. Dans ce cas, l'autre suit correctement, en tout cas sur firefox.
Comme je n'ai aucune idée de comment calculer ça correctement, j'ai mis une largeur arbitraire: 24px. C'est minuscule mais zut.