Optimisation de l'effet de flou SVG via le sous-échantillonnage

Question

J'ai une image SVG animée avec un effet de flou. Le flou est ajouté au groupe le plus externe et j'utilise le filtre standard :

<filter id="blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" color-interpolation-filters="sRGB" />
</filter>

Évidemment, pour une image animée en pleine fenêtre dans un navigateur, c'est cher. Safari/Chrome/Firefox utilisent 100-150% du CPU sur ma machine, et la page n'est pas très réactive, ce qui est inacceptable.

Si je travaillais avec un canevas ou une autre technologie, j'envisagerais de rendre l'image à une résolution inférieure afin de la rendre moins coûteuse à animer. Il s'agit d'une image d'arrière-plan, donc l'apparence serait correcte. Existe-t-il un moyen de faire cela avec SVG ? Ou existe-t-il un autre filtre beaucoup moins coûteux que le SVG ? feGaussianBlur ?

Édition : après quelques lectures supplémentaires, j'ai trouvé l'adresse suivante filterRes qui est exactement ce que je voulais, mais qui ne semble pas être prise en charge par Chrome.

Answer 1

Il ne semble pas y avoir de moyen de le faire qui soit compatible avec tous les navigateurs. Comme le mentionne @RobertLongson, la solution prometteuse de filterRes ne fait plus partie de la spécification.

J'ai constaté que le flou via le filtre CSS n'apportait pas d'amélioration significative des performances sur l'ensemble des navigateurs par rapport au filtre de flou SVG.

J'envisage soit de faire sans flou (50-60% CPU sur les machines modernes plutôt que 100% avec flou) soit de retravailler l'animation en utilisant Canvas (préférable car même utiliser 50% CPU pour un site web, c'est nul).

Il est tout simplement très pénalisant d'utiliser les mécanismes déclaratifs propres aux animations SVG et CSS plutôt que d'écrire manuellement des routines de dessin pour Canvas. Ainsi va la vie !