Images SVG définies dans les defs, ignorées : normal ou pas ?

Hello les gens d’ici,

Si je crée des images multiples dans un fichier SVG, de la manière qui suit :

<svg xmlns="http://www.w3.org/2000/svg" height="…" width="…">
   <defs>
      <g id="image-1">…</g>
      <g id="image-2">…</g>
      …
   </defs>
</svg>

Si j’y fais référence par exemple pour une image, de la manière qui suit :

<img src="fichier.svg#image-1"/>

Que ce soit le moteur de rendu Presto, Gecko ou WebKit, tous-trois ignorent l’image.

J’ai un doute, parce que je ne vois pas ce qui dans la spécification SVG, interdit de faire référence à une définition depuis l’extérieur du fichier SVG.

Est-ce moi qui suppose mal et les navigateurs qui ont raison, ou est-ce les navigateurs qui ont tord de ne pas afficher l’image ?

Il me semblait que c’était plus logique de faire référence à des définitions, plutôt que de les faire apparaitre directement dans l’image et de jouer avec leurs positions dans l’image (plus logique, et plus pratique aussi). N’est-ce pas autorisé par le format SVG ?
Modifié par hibou57 (21 Mar 2013 - 08:46)

Voici ce que j’ai put trouver à ce sujet, et d’après caniuse.com, c’est pas gagné…

* 17.3 Linking into SVG content: IRI fragments and SVG views (w3.org/TR/SVG11)
* SVG Stacks (simurai.com)
* Can I use SVG fragment identifiers? (caniuse.com)
* Better SVG Sprites With Fragment Identifiers (broken-links.com)

Et je prend presqu’une claque, parce que cette technique me semblait tellement évidente, que j’étais persuadé que les navigateurs la supportait depuis longtemps.
Modifié par hibou57 (21 Mar 2013 - 08:55)

L’exemple du dernier lien du précédent message a un couac, j’ai repris la même idée, mais en corrigeant. Voilà à quoi j’arrive, avec le bémol indiqué :

test.rasama.org/multiview-svg.html

Ça n’est pas la sélection d’un élément dans le fichier SVG, le fichier SVG ne sert toujours pas de fichier de ressource (contenant plusieurs ressources), ça ne fait que faire défiler, devant une fenêtre de taille fixe, une image plus grande que la fenêtre. Mais c’est déjà mieux que les sprites, parce que ici, tout est géré dans le fichier SVG lui-même, ce qui est mieux pour la maintenance.

Dommage quand-même qu’il ne soit pas possible de vraiment sélectionner un élément. J’ai essayé en modifiant les dimensions de la fenêtre, mais ça ne marche pas. Si je fini par y arriver, je le dirai et je mettrai à jour la page de test plus haut.

Dommage aussi que ça ne fonctionne qu’avec Opera (Opera/Presto) et Firefox, et pas avec WebKit (Midori/WebKit). Quelqu’un peut dire si ça marche avec Chrome ou Safari ? (je ne les ai plus).
Modifié par hibou57 (21 Mar 2013 - 10:03)

hibou57 a écrit :
Dommage aussi que ça ne fonctionne qu’avec Opera (Opera/Presto) et Firefox, et pas avec WebKit (Midori/WebKit). Quelqu’un peut dire si ça marche avec Chrome ou Safari ? (je ne les ai plus).

Effectivement, ça ne marche pas avec les navigateurs WebKit en général. C’est un bug de WebKit apparemment connu, et pas résolu.

Voir : Bug 91791 - Master bug for SVG fragment identifier on URI not supported (bugs.webkit.org)

Mais si quelqu’un veut bien essayer sous Chrome ou Safari quand-même, juste pour vérifier…

Si tu appelles ton fichier svg depuis une page html grâce à un <object>, tu peux rajouter à celui ci des paramètres, récupérer ces paramètres par un script par le fichier svg et avec ça aller modifier dynamiquement des propriétés de visibilité ou autre attribut des différents éléments ou groupes d'éléments, donc afficher ou masquer tes images.