SVG en data URI CSS
SVG to CSS Data URI
Encode un SVG en data URI de fond CSS, en n’échappant que ce qui doit l’être pour rester court.
Transforme un SVG en URI de données à coller dans une feuille de style, encodée en URL plutôt qu’en Base64 parce que c’est à la fois plus court et encore lisible. Il montre les trois tailles côte à côte, rend l’URI encodée pour que vous voyiez qu’elle marche, et prévient des quelques choses qui font qu’un SVG ne s’affiche plus du tout une fois devenu une URI de données.
Déposez un SVG
Ou modifiez le balisage ci-dessous.
SVG
Aperçu
Dessiné depuis l’URI encodé lui-même : ce qui apparaît ici apparaîtra dans votre feuille de styles.
Taille
SVG brut
165 B
Encodé en URL
198 B
Base64
246 B
Ici, l’encodage en URL est 19,5 % plus petit que Base64.
Base64 coûte un forfait de 33⅓ % quelle que soit l’entrée. Un SVG est du texte, et seule une poignée de ses caractères doit être échappée dans un url() CSS — l’encodage en URL se situe donc en général autour de 10 % au-dessus du fichier brut. Il reste en outre lisible dans la feuille de styles, on peut le chercher au grep et le comparer dans un diff, ce que Base64 ne permet pas.
Sortie
Seuls %, <, >, # et quelques caractères de crochet sont échappés, et les guillemets doubles du SVG deviennent simples pour que la chaîne CSS puisse utiliser les doubles sans risque. Le plus important est # : non échappé dans fill="#fff", il ouvre un identifiant de fragment et tronque l’URL, ce qui n’affiche absolument rien et sans la moindre erreur nulle part.
Besoin d’un raster à la place ? Le convertisseur SVG vers PNG rend en PNG à n’importe quelle échelle. Vous voulez alléger le SVG avant de l’encoder ? L’optimiseur SVG réécrit les données de chemin.
Comment s’en servir
Collez ou déposez le SVG
La zone source est modifiable, vous pouvez donc corriger le balisage ici plutôt que de retourner au fichier. L’exemple est une icône au trait, qui est le cas courant.
Lisez les avertissements avant tout le reste
Un `xmlns` absent est celui qui attrape tout le monde : en ligne dans du HTML cela n’a pas d’importance, mais une URI de données est analysée comme un document XML autonome, et sans lui le navigateur n’affiche rien et ne signale rien. Les autres avertissements couvrent les images externes, les scripts et les tailles en pourcentage sans viewBox.
Vérifiez l’aperçu
Il est dessiné à partir de l’URI encodée elle-même, pas de la source : si l’icône apparaît dans cette boîte, elle apparaîtra dans votre feuille de style. Une boîte vide veut dire que l’URI est cassée, et les avertissements au-dessus disent d’habitude pourquoi.
Choisissez la propriété et copiez
La déclaration change avec la propriété : `background-image`, `mask-image`, `content` ou un `src` nu. Le Base64 est disponible pour le rare consommateur qui n’accepte pas une URI encodée en pourcent, et il est toujours plus gros.
Questions fréquentes
Pourquoi pas du Base64 ? Tout le monde utilise du Base64.
Le Base64 coûte 33⅓ % à plat sur n’importe quelle entrée, parce qu’il transforme trois octets en quatre. Un SVG est du texte, et seuls `%`, `<`, `>`, `#` et deux ou trois parenthèses ont réellement besoin d’être échappés dans un `url()` CSS : l’encodage en URL atterrit donc d’ordinaire autour de 10 % au-dessus du fichier brut. Il reste aussi lisible avec grep et dans un diff. Le panneau imprime les deux nombres pour votre fichier.
Mon icône a disparu et il n’y a d’erreur nulle part.
Presque toujours un `#` non échappé. Dans `fill="#fff"`, le croisillon commence un identifiant de fragment : l’URL est donc tronquée à cet endroit et le navigateur va chercher quelque chose qui n’est pas un SVG — en silence. Cet encodeur l’échappe. Si vous avez écrit l’URI à la main, c’est la première chose à vérifier.
Puis-je animer ou scripter le SVG dans l’URI de données ?
Pas en arrière-plan CSS. Un SVG chargé ainsi tourne dans un mode restreint et statique : pas de scripts, pas de `foreignObject`, pas de ressources externes, et le CSS de la page extérieure ne peut pas l’atteindre. L’animation déclarative SMIL marche parfois et parfois pas, selon le moteur. S’il vous faut l’une de ces choses, mettez le SVG en ligne dans le document.
Quand une URI de données est-elle le mauvais choix ?
Quand le SVG est gros ou employé à plus de deux ou trois endroits. Une URI de données ne peut pas être mise en cache séparément, donc chaque page qui livre la feuille de style relivre l’icône, et une illustration de 30 Ko intégrée au CSS fait 30 Ko sur le chemin critique. Les petites icônes et les motifs sont ce à quoi ceci sert ; tout ce qui est plus gros vaut mieux en fichier, ou en sprite.
À alimenter depuis
Optimiseur SVG
SVG Optimiser
Retire les restes d’éditeur, aplatit les transformations et arrondit la précision des tracés, en montrant le rendu avant et après.
Image vers Base64 ou data URI
Image to Base64 / Data URI
Encode une image en chaîne Base64 ou en data URI prête à coller dans du CSS, du HTML ou du JSON.
Formater ou minifier du CSS
CSS Beautifier & Minifier
Met en forme ou minifie du CSS sans rien réordonner, en conservant le flux de jetons à l’identique.
Éditeur et explicateur SVG
SVG Editor and Explainer
Modifie un SVG à côté de son rendu et explique le fichier : le viewBox et la mise à l’échelle, les transformations, chaque commande de tracé, la peinture héritée, les octets inutiles, et ce qui casse dans une balise img, dans un data URI ou en inline.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Formater ou minifier du CSS
CSS Beautifier & Minifier
Met en forme ou minifie du CSS sans rien réordonner, en conservant le flux de jetons à l’identique.
Image vers Base64 ou data URI
Image to Base64 / Data URI
Encode une image en chaîne Base64 ou en data URI prête à coller dans du CSS, du HTML ou du JSON.
Optimiseur SVG
SVG Optimiser
Retire les restes d’éditeur, aplatit les transformations et arrondit la précision des tracés, en montrant le rendu avant et après.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Vérificateur de contraste
Contrast Checker
Note un couple texte et fond selon WCAG 2 et APCA et propose la couleur conforme la plus proche.