Inclure un bitmap dans un SVG : firefox passe en mode

Holà à tous !

Je continue mon exploration du monde merveilleux des CSS et du monde, non moins merveilleux, du SVG qui me permet de combiner dans un même objet des formes vectoriels et des bitmap.

Donc un monde merveilleux... sauf sous Firefox. En effet, le fait d'inclure un bitmap dans un SVG change le manière dont le moteur de rendu de Firefox va lisser l'objet lors d'un redimensionnement. Bref il passe en mode "moche" (rendu crénelé)

Voici un aperçu du rendu avec l'inclusion d'un PNG dans un SVG (moche) et le PNG seul (beau) sous Firefox :

Sur les autres navigateurs le rendu est parfait que ce soit en SVG ou PNG

Connaissez-vous une solution pour demander à Firefox d'appliquer le même mode de rendu que pour le PNG seul ?

J'ai aussi préparé un codepen pour jouer avec :
http://codepen.io/dasys/pen/ZWjQxj

D'avance mille mercis pour vos lumières.

Bien à vous

Bonjour,

Avant même d'aller plus loin j'ai envie de dire : quel intérêt de faire une telle chose ?

Merci Olivier pour l'intérêt que tu portes à mon SVG

Dans mon exemple, j'ai simplifié au maximum pour mettre uniquement en avant le problème rencontré avec Firefox.

Mon SVG contient un bitmap jpeg qui est détouré grâce un "mask" png. Il comprend aussi des objets vectoriels qui viennent en superpostion. Bref, une vrai petite composition SVG

Le seul hic est que le moteur de Firefox re-échantillonne les bitmap contenu dans un SVG avec une faible qualité alors qu'il le fait très bien avec un bitmap seul JPG ou PNG.

Je suis donc -désespérément ?- en quête d'une raison à cela et surtout d'un moyen d'améliorer le rendu.

D'avance mille mercis.

Bien à vous.
Modifié par dasys (22 Apr 2016 - 11:02)

dasys a écrit :
Mon SVG contient un bitmap jpeg qui est détouré grâce un "mask" png. Il comprend aussi des objets vectoriels qui viennent en superpostion.

Je ne comprends toujours pas : étant donné que l'intérêt du SVG est le dessin vectoriel, quel intérêt de mettre un bitmap là-dedans ?

S'il faut vraiment des masques en vectoriel par dessus un bitmap (bizarre mais bon...) rien n'empêche de superposer des éléments img et svg les uns par dessus les autres.

Merci Olivier pour ta réponse.

Je cherche à réaliser un jpg avec une couche Alpha en utilisant cette technique :

http://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/

D'où mon utilisation de bitmap dans un svg

Effectivement, je comprends mieux l'intérêt.

J'ai essayé d'influer sur le rendu en ajoutant l'attribut shape-rendering="optimizeSpeed" au SVG, mais sans résultat : CodePen...

Merci Olivier,

J'ai passé pas mal de temps à tenter de comprendre pourquoi Firefox change méthode de lissage selon qu'un bitmap soit ou non contenu dans un conteneur SVG... sans succès

J'ai envisagé un temps cette solution :
http://jim.studt.net/jpeg-alpha/
Le problème de cette solution est que le traitement s'applique dans un second temps (pas très sexy) et qu'il faut être "jouer" pour manipuler un canvas dans un svg

Au final lorsque qu'un bitmap est inclus dans un svg Firefox se comporte un peu comme si Photoshop passé du mode de rééchantillonage "Bicubique" au mode "Au plus proche".

Le seul moyen que j'ai trouvé pour atténuer les "dégâts" et de faire en sorte que Firefox n'est pas à redimensionner l'image au delà d'un facteur de +/- 50%. Cela implique de générer au moins 3 dimensions de visuels et via un petit JS d'appeler le visuel le plus proche de la dimension d'écran.

Raaah... domage qu'on ne puisse utiliser l'équivalent de srcset au sein d'un svg.

Par conte, je suis toujours preneur de bonnes idées alternatives qui pourrait simplifier le chose

Mille mercis