Utiliser plusieurs polices au format SVG avec un seul fichier

Dans , je démontrais comment réaliser un gain de performances en combinant plusieurs polices dans un même fichier JavaScript. À l'heure de l'explosion des règles CSS3 @font-face, il peut être utile de savoir que des possibilités similaires s'offrent à nous concernant les fichiers de polices au format SVG. En effet, ceux-ci utilisent le format XML, et acceptent donc parfaitement la déclaration simultanée de plusieurs polices en faisant se suivre les balises font :

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >

<svg xmlns="http://www.w3.org/2000/svg">

    <metadata></metadata>

    <defs>

        <font id="police1">

            ...

        </font>

        <font id="police2">

            ...

        </font>

    </defs>

</svg>

Il est donc très facile de combiner plusieurs fichiers SVG, obtenus par exemple via le générateur en ligne de FontSquirrel.

Le CSS correspondant prend alors tout son sens :

@font-face {

    // ...

    src: url('fonts.svg#police1') format('svg');

}



@font-face {

    // ...

    src: url('fonts.svg#police2') format('svg');

}

Les ancres étant de toute façon nécessaires pour s'assurer de la compatibilité cross-browser de cette déclaration (notamment chez Opera), n'utiliser qu'un seul fichier SVG est un pur bénéfice !