Chrome : accélération GPU sur le SVG et les filtres CSS

Dans les dernières évolutions de WebKit, le moteur de rendu utilisé notamment par Chrome et Safari, il est possible d’utiliser des feuilles de style pour modifier rapidement des images. Et les filtres CSS (le nom de ces fonctions) sont accélérés par le GPU, tout comme la technologie SVG.

Le SVG est accéléré depuis quelques mois sous Windows avec Internet Explorer 9, mais une prochaine version de Chrome (18) devrait aussi adopter cette fonction.

Pour les filtres CSS, le rendu est accéléré matériellement sous Mac OS X en utilisant le moteur de Safari, alors que Chrome nécessite pour le moment une activation manuelle pour que l’accélération soit prise en charge. Il faut entrer la ligne suivante dans about:flags : --enable-accelerated-filters.

Les filtres CSS permettent notamment de changer les couleurs d’une image, d’ajouter du flou, etc. L’intérêt principal et que c’est le navigateur qui va effectuer le rendu et que le code est simple. Un exemple est disponible sur cette page. Attention, il faut bien évidemment un navigateur compatible (WebKit ou Chrome Canary).