Intégrer des images et des polices dans un SVG
Ajoutez un SVG et les images (PNG, JPEG, WebP, GIF) ou les polices (TTF, OTF, WOFF, WOFF2) auxquels il fait référence, puis regroupez-les dans un seul SVG pour ne pas avoir à transmettre les éléments séparément. Indiquez l’élément à utiliser pour chaque référence et créez le SVG. Vous pouvez l’enregistrer une fois que son aperçu s’affiche correctement. Les éléments situés à des URL externes ne sont pas récupérés automatiquement.
Ce que vous pouvez faire
Regrouper les images et les polices
Intégrez dans le SVG les éléments locaux ajoutés pour éviter d’avoir à transmettre les éléments séparément.
Vérifier les références et les éléments
Indiquez le fichier correspondant à chaque chemin d’image ou nom de police référencé dans le SVG. Le SVG n’est pas créé tant qu’il reste des références non résolues.
Vérifier l’affichage du SVG créé et l’enregistrer
Vérifiez l’affichage sous forme d’image et enregistrez le SVG avec les éléments intégrés. Les fichiers d’origine ne sont pas écrasés.
Comment utiliser
Ajouter un SVG et des éléments
Choisissez un SVG ainsi que les images et les polices auxquelles il fait référence. Vous pouvez également les ajouter ensemble depuis un dossier.
Associer les éléments à intégrer
Vérifiez le fichier local à utiliser pour chaque référence. Pour celles qui ne sont pas mises en correspondance automatiquement, sélectionnez un élément déjà ajouté.
Créer le SVG
Lorsqu’il ne reste aucune référence non résolue, appuyez sur « Créer un SVG avec des images et des polices ».
Vérifier l’affichage et enregistrer
Vérifiez le texte et les images dans l’aperçu du SVG créé avant de l’enregistrer. Si l’affichage échoue, vérifiez le SVG d’origine et les éléments.
Pratique lorsque
Transmettre le SVG et ses éléments ensemble
Regroupez dans un seul SVG facile à transmettre un dessin qui référence des images et des polices situées dans des dossiers distincts.
Identifier la cause des références rompues
Comparez les éléments nécessaires aux fichiers ajoutés, puis indiquez les images ou les polices manquantes.
Fonctionnement des références et de l’intégration
Chemins relatifs et mise en correspondance des fichiers
Les références sont mises en correspondance automatiquement lorsqu’un chemin relatif au SVG correspond de manière unique au chemin d’un élément ajouté. Sélectionnez manuellement un fichier si des fichiers portant le même nom se trouvent dans des dossiers différents ou si plusieurs candidats se chevauchent.
Indiquer le fichier correspondant à chaque nom de police
L’outil n’extrait pas de polices de votre appareil à partir des seuls noms de police présents dans le SVG. Ajoutez les fichiers de polices nécessaires et indiquez ceux qui correspondent.
Les éléments situés à des URL ne sont pas récupérés automatiquement
Même si une URL externe est référencée, fournissez les images ou les polices localement et sélectionnez-les. Cet écran ne permet pas de récupérer des éléments depuis des URL.
L’intégration est distincte de la réduction de la taille du fichier
L’intégration des données d’image dans le SVG peut augmenter la taille du fichier SVG lui-même. Les polices sont converties au format WOFF2 et intégrées. Optimisez le code SVG à l’aide d’un outil distinct.
Différences selon la méthode d’affichage
L’aperçu affiche le SVG comme une image. Le même rendu n’est pas garanti dans toutes les applications ; vérifiez donc également le rendu requis à destination.
Questions fréquentes
Que faire si un élément ne peut pas être trouvé ?
Ajoutez des images ou des polices, puis sélectionnez-les dans le champ de sélection de la référence correspondante. La mise en correspondance automatique peut échouer si les dossiers diffèrent, si des chemins sont en double ou s’il s’agit d’URL externes.
Quels éléments puis-je utiliser ?
Les images peuvent être au format PNG, JPEG, WebP ou GIF ; les polices peuvent être au format TTF, OTF, WOFF ou WOFF2. Indiquez les fichiers SVG un par un.
Les polices sont-elles détectées automatiquement ?
L’outil ne recherche pas de polices sur votre appareil ou sur le Web à partir d’un nom de police seul. Ajoutez et sélectionnez un fichier disponible localement.
Que deviennent les éléments déjà intégrés ?
Les images et les polices intégrées sous forme d’URI de données, ainsi que les références # dans le SVG, ne sont pas considérées comme des références externes. Vous pouvez créer le SVG s’il ne reste aucune référence détectée non résolue.
Que se passe-t-il lorsque j’ajoute ou sélectionne à nouveau des éléments ?
Lorsque vous ajoutez uniquement des éléments, ils sont ajoutés à la liste et ceux déjà associés sont conservés. Vérifiez la mise en correspondance automatique si, par exemple, de nouveaux candidats ayant le même chemin sont disponibles. Une entrée comprenant un nouveau SVG remplace le SVG actuel et tous ses éléments.
Que faire si des références ne sont pas prises en charge ?
Les références externes use ou script ne peuvent pas être intégrées. Les SVG contenant des importations de CSS externe ne peuvent pas non plus être chargés. Organisez les références dans l’application d’origine ou une autre application adaptée avant de sélectionner le SVG.
Le SVG sera-t-il plus petit ?
La réduction de la taille du fichier n’est pas l’objectif de cet outil. L’intégration des éléments dans le SVG peut augmenter sa taille. Pour nettoyer le code, utilisez l’optimisation SVG.
Que faire si le SVG créé ne peut pas être affiché ?
L’option d’enregistrement ne s’affiche pas sur cet écran tant que le SVG n’est pas rendu correctement. Vérifiez le SVG d’origine et ses éléments, examinez les associations ou les fichiers, puis créez-le à nouveau.
Entrées et résultats
- Entrée
- Un SVG, ainsi que des images et des polices. Ajoutez-les depuis des fichiers ou des dossiers.
- Images
- Les données d’origine des images ajoutées sont intégrées. Les images ne sont ni redimensionnées ni compressées.
- Polices
- Les polices associées sont converties au format WOFF2 puis intégrées.
- Résultat
- original-name-embedded.svg. Vous pouvez l’enregistrer une fois que le SVG créé s’affiche correctement.