Utiliser des fontes SVG avec Raphael.js
Raphael.js est une librairie javascript permettant de dessiner du SVG très simplement, et ce sur tous les navigateurs actuels, IE6 compris (en passant par VML).
Bref ça rox du poulet et je suis actuellement en train de jouer avec. Les limitations imposé par cette compatibilité sont assumées : il n’y a pas de méthode permettant d’utiliser tous les filters SVG comme feGaussianBlur ou feOffset (qui servent à dessiner une ombre portée) par exemple – tout simplement parce que ce n’est pas reproductible sous IE.
Heureusement il est possible d’étendre Raphael pour y ajouter nos propres méthodes et ainsi exploiter pleinement l’intégralité des spécifications SVG (à condition de faire fi de la compatibilité IE, mais on est là pour s’amuser non ?).
Mon besoin était de mettre en place une police personnalisée. Il y a plusieurs solutions :
- utiliser des police « web safe » (dont le verdana, arial, helvetica…)
- utiliser @font-face pour déclarer une nouvelle police en CSS
- utiliser une fonte définie en SVG via la balise <font>
C’est ce dernier cas qui me paraissait le plus fun. J’ai donc trouvé une police libre, et j’ai convertie les glyphes qui m’intéressait en SVG grâce à l’excellent http://www.fontsquirrel.com/ !
Par contre, l’API de Raphael ne propose pas de méthode pour embedder une fonte externe. Voici ma solution, j’espère qu’elle vous sera utile ;-)
Raphael.fn.registerSvgFont = function (name, path)
{
var fontface = document.createElementNS("http://www.w3.org/2000/svg", "font-face");
fontface.setAttribute('font-family', name);
var fontfacesrc = document.createElementNS("http://www.w3.org/2000/svg", "font-face-src");
var fontfaceuri = document.createElementNS("http://www.w3.org/2000/svg", "font-face-uri");
fontfaceuri.setAttributeNS('http://www.w3.org/1999/xlink', 'href', path);
var fontfaceformat = document.createElementNS("http://www.w3.org/2000/svg", "font-face-format");
fontfaceformat.setAttribute('string', 'svg');
fontfaceuri.appendChild(fontfaceformat)
fontfacesrc.appendChild(fontfaceuri);
fontface.appendChild(fontfacesrc);
return this.defs.appendChild(fontface);
};A utiliser de la façon suivante dans votre code :
paper.registerSvgFont('pixelsplitter', '../fonts/pixelsplitter-bold-webfont.svg');createElementNS n’est pas compatible IE6 attention.