Comment intégrer des polices Web Google dans un fichier SVG?

J'écris un article sur mon site sur les avantages des nouvelles technologies Web, notamment HTML5, CSS3 et SVG, l'un des avantages de ce dernier étant la possibilité de sélectionner du texte dans ce qui est autrement une image.

Je suis nouveau dans les SVG et je viens de réaliser mon premier bon graphique dans Illustrator. Je l'ai incorporé dans une page avec le script GWF pour la police Ubuntu dans la balise. Il s’avère que la police Ubuntu s’affiche correctement en texte normal, mais pour que cette astuce fonctionne dans le SVG, le script Google doit être intégré au SVG lui-même. Comment puis-je faire ceci?

Vous intégrez des polices dans CSS à l’aide du codage base64. Vous pouvez appliquer des styles similaires à CSS dans les documents SVG en utilisant un <style />élément. Donc, si vous avez une police WOFF, vous l’intègrerez comme ceci:

<style>
@font-face {
    font-family: "Sample font";
    src: url("data:application/font-woff;charset=utf-8;base64,...");
}
</style>

Où ...sont les données de police codées en base64.

Vous pouvez en trouver des exemples en consultant les feuilles de style de Typekit. Je ne suis pas sûr que le type de mime font/woffsoit correct, car j'ai aussi vu des gens prétendre que ce devrait être le cas application/font-woff. Bien que font/woff, font/truetype, font/opentype, etc. semblent être plus populaire.

Vous pouvez également utiliser la version SVG de la police Web et incorporer le balisage de description de la police SVG dans votre document (bien que la prise en charge du navigateur soit encore très limitée, comme le note Luke dans les commentaires).

Cependant, vous devriez également pouvoir créer un lien vers une police externe conformément à la spécification SVG . Cela semblerait être la meilleure solution si vous avez plusieurs documents SVG référençant cette police.

Une <defs>section comme

<defs>
  <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
</defs>

travaux.

Vous pouvez intégrer des polices Web Google dans votre SVG directement à l'aide de Nano . Il analyse automatiquement votre fichier SVG et n'intègre que de manière sélective les polices requises, garantissant ainsi que vos polices Ubuntu ont la même apparence sur tous les navigateurs modernes. Dans mon cas, il fallait que Roboto soit intégré à mon SVG:

Clause de non-responsabilité: je suis avec l’équipe derrière Nano, et nous aussi avons déjà fait face au même problème, nous avons donc décidé de nous gratter en construisant Nano. J'espère que c'est utile!

Edit: Voici une explication rapide sur ce qui se passe derrière la scène:

Pour intégrer des polices dans SVG, vous devez d’abord connaître les familles de polices utilisées. Ensuite, vous devez trouver ces fichiers de polices et les télécharger. Une fois téléchargé, vous devez convertir les caractères normaux, gras, italiques et gras italiques en codage base 64. Si vous le faites manuellement, il faut énormément de travail, sur un grand nombre de fichiers, pour savoir quel fichier est en gras et ceux qui ne le sont pas. Ensuite, vous devez copier toutes les 4 chaînes encodées en base 64 dans votre SVG.

C'est pourquoi nous construisons Nano et nous assurons qu'il scanne automatiquement SVG et insère uniquement les polices utilisées. Par exemple, si gras n'est pas utilisé ou s'il n'y a pas de texte, aucune police ne sera incorporée. Tout ce que vous avez à faire est de glisser-déposer votre fichier SVG dans Nano et tout fonctionne à merveille! Vous pouvez en apprendre plus ici: https://vecta.io/blog/making-svg-easier-to-use

Cela simplifie peut-être trop, mais avez-vous envisagé de télécharger la police sous forme de fichier zip à partir de Google, puis de laisser Illustrator la convertir selon vos besoins en sortie de votre fichier SVG?

Ce n'est que théorique car je ne l'ai pas encore essayé, mais en théorie, cela semblerait fonctionner.

Ajouter ce qui suit après <desc>tag

<defs>
<style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');</style>
</defs>

MISE À JOUR à ma réponse. Je préfère maintenant une réponse différente sur cette page, qui consiste à utiliser Nano: https://graphicdesign.stackexchange.com/a/121950/45239

En supposant que vous ayez téléchargé et installé une police Web sur votre système et créé un fichier SVG (peut-être en suivant les mêmes étapes que celles décrites ci-dessous, mais sans choisir "Police: Convertir en contours"), vous pouvez télécharger le fichier SVG vers Nano. et voyez l'option "Incorporer la police: Oui", et cliquez sur Télécharger.

Ma réponse précédente:

Si vous êtes prêt à sacrifier le texte et le référencement sélectionnables:

1. Téléchargez la police Web.
2. Installez-le localement.
3. Ouvrez Adobe Illustrator
4. Tapez votre texte.
5. Fichier> Exporter> Exporter sous…
6. Choisissez ".SVG"

7. Choisissez ces paramètres:

   • Style: style en ligne
   • Police: Convertir en contours
   • Images: Conserve
   • ID d'objet: noms de couche
   • Décimal: 2
   • (activé) Minify
   • (activé) Responsive

8. Vous pouvez éventuellement télécharger le svg résultant sur https://vecta.io/nano (cela a permis de réduire la taille de mon fichier de 8,2%)