Aller au contenu principal

SVG vers data URI

Convertir SVG en URI de données pour CSS ou HTML

Créez un URI de données SVG encodé pour une URL ou en Base64, ainsi que des extraits prêts à l’emploi pour CSS background-image, CSS mask-image et HTML img. Optimisez le balisage, vérifiez l’aperçu et copiez le format voulu sans envoyer le SVG.

Déposez les fichiers ici

Modification des valeurs par défaut pour les nouveaux fichiers

Encodage

L'encodage URL n'échappe que les caractères qu'une URL ne peut pas transporter : pour des fichiers de la taille d'une icône, il donne en général 20-30 % de moins que le Base64 et le balisage reste lisible. Choisissez Base64 quand une étape de build ou un CMS réécrit les signes pourcent.

Encode aussi les espaces, les apostrophes et les parenthèses, pour que l'URI reste valide dans un url(...) sans guillemets et dans les chaînes Sass ou Less. Coûte quelques octets. Le Base64 n'en a pas besoin.

Optimisation

Applique le préréglage d'optimisation sûr avant la génération de la sortie.

Mise en forme

Remplace les remplissages et les contours pour que l'icône hérite de la couleur du texte environnant. Utile uniquement pour un dessin en une seule couleur : un SVG multicolore est aplati en une seule couleur.

Aucun aperçu. Ajoutez et sélectionnez des fichiers pour voir les résultats.

Aucun fichier pour le moment. Déposez des fichiers ci-dessus ou cliquez sur SÉLECTIONNER DES FICHIERS.

Aucun fichier pour le moment. Déposez des fichiers ci-dessus ou cliquez sur SÉLECTIONNER DES FICHIERS.

Qu'est-ce que le SVG ?

Le SVG (Scalable Vector Graphics) est un format d'image vectoriel basé sur XML. Au lieu de pixels, un SVG décrit mathématiquement des formes, des chemins, des remplissages et des contours, afin d'être rendu à toute taille sans perte de qualité.

SVG est le format vectoriel standard du Web. Tous les navigateurs modernes le prennent en charge nativement ; il peut être mis en forme avec CSS ou animé avec JavaScript ou SMIL. Il est souvent compact pour les logos, les icônes et les illustrations, mais les fichiers SVG complexes peuvent devenir volumineux.

Quand intégrer un SVG en data URI

Un URI de données place l'intégralité du SVG dans la feuille de style ou le balisage, de sorte que le navigateur n'a pas besoin d'une seconde requête pour le dessiner. Cela s'avère payant pour les petites œuvres d'art décoratives : des puces, des flèches, des chevrons, des cases à cocher ou une marque dans un pied de page. L'encodage URL est généralement plus compact pour le texte SVG, tandis que Base64 peut être utile lorsqu'un autre outil l'attend. Un masque CSS traite le SVG comme un pochoir pour la couleur d'arrière-plan de l'élément, de sorte qu'une icône monochrome peut être recolorée par état, par thème ou par composant avec une seule déclaration CSS.

Comment convertir un SVG en data URI en ligne

  1. 1

    Déposez vos SVG, ou cliquez sur SÉLECTIONNER DES FICHIERS, pour les ajouter à la file. Jusqu'à 40 à la fois.

  2. 2

    Choisissez l'encodage URL ou Base64 et décidez s'il faut d'abord optimiser le balisage. Les cinq sorties, et leur taille en octets, se mettent à jour à mesure que vous changez les options.

  3. 3

    Copiez l'extrait dont vous avez besoin, ou cliquez sur TOUT ENREGISTRER pour télécharger un fichier .css par SVG contenant les règles de fond et de masque.

Confidentialité : vos fichiers ne quittent pas le navigateur

La conversion s'exécute localement dans votre navigateur à l'aide de JavaScript et WebAssembly. Il n'y a pas de téléchargement de fichiers ni de conversion côté serveur, donc les fichiers que vous ajoutez restent sur votre appareil.

Le traitement local permet de protéger les logos confidentiels, les documents internes et les illustrations client inédites. Les pages et le code de conversion sont mis en cache au fur et à mesure que vous les utilisez, afin que les outils que vous avez déjà ouverts puissent continuer à fonctionner sans connexion réseau.

Questions fréquentes

Un data URI encodé en URL est-il plus petit que le Base64 ?

Habituellement. Base64 ajoute une surcharge de codage aux octets bruts, tandis que le codage URL développe uniquement les caractères qui doivent être échappés. La différence exacte dépend du balisage SVG, donc l'outil affiche les deux tailles et vous permet de les comparer pour le fichier devant vous.

Comment la règle de masque CSS recolore-t-elle une icône ?

mask-image utilise le SVG comme un pochoir : l'élément peint son propre background-color, et le masque décide quels pixels subsistent. Comme la couleur vient du CSS, un même data URI peut prendre n'importe quelle couleur, et une variante au survol ou en thème sombre se résume à un seul changement de background-color. Cela ne fonctionne que pour un dessin en une seule couleur, puisqu'un masque conserve le canal alpha et écarte les couleurs propres du SVG. Safari a toujours besoin du préfixe -webkit-mask-image, que la règle générée inclut.

Quand vaut-il mieux ne pas intégrer un SVG en data URI ?

Lorsque le fichier est volumineux ou partagé. Un URI de données est copié dans chaque feuille de style ou page qui l'utilise, il ne peut donc pas être mis en cache seul et il est retéléchargé chaque fois que ce fichier est modifié. Pour les illustrations plus volumineuses ou les ressources réutilisées sur plusieurs pages, un fichier .svg distinct avec ses propres en-têtes de cache est souvent le meilleur choix. Un URI de données ne peut pas non plus être stylisé de l'extérieur, c'est pourquoi la règle de masque générée est utile pour les icônes monochromes.