Encodeur d'URL SVG
Convertissez le balisage SVG en un URI de données compatible CSS et décodez les URI de données en SVG.
Encodeur d'URL SVG
Collez un SVG et obtenez un URI de données que vous pouvez déposer directement dans CSS, prêt pour une image d'arrière-plan ou un masque. Au lieu de base64, l'encodeur utilise l'approche compacte de codage d'URL : il remplace les guillemets doubles par des guillemets simples, réduit les espaces et code en pourcentage uniquement les caractères qui en ont réellement besoin, de sorte que le résultat reste court et lisible par l'homme. Cela maintient votre feuille de style plus petite qu'un blob base64 et vous permet de toujours reconnaître les formes à l'intérieur de l'URI.
Trois formats de sortie couvrent les cas courants. La règle CSS encapsule l'URI des données dans background-image : url("…"); vous pouvez donc coller une déclaration entière. L'URI des données nues vous donne uniquement la valeur d'une propriété personnalisée, un src <img> ou un masque SVG. Le formulaire base64 produit un URI data:image/svg+xml;base64 sécurisé UTF-8 pour les outils ou les étapes de construction qui attendent cet encodage, y compris les SVG avec des emoji ou des nœuds de texte accentués. L'option de type MIME ouvre le même encodeur à n'importe quel contenu : choisissez text/plain, text/html, text/css, application/json ou un autre type et ce que vous collez devient une data URI de ce type. Seul image/svg+xml compacte les espaces et remplace les guillemets doubles par des simples, car ces deux astuces raccourcissent le balisage mais abîment le texte brut et le JSON.
Basculez vers le décodage et l’outil inverse l’une des trois formes en balisage SVG brut. Collez une règle CSS, un URI de données nues ou une base64, et il extrait le SVG afin que vous puissiez modifier une icône qui n'existe que dans une feuille de style. Le décompte indique la taille d'entrée, la taille de sortie et le pourcentage de changement, afin que vous puissiez voir en un coup d'œil si l'encodage a réduit ou agrandi l'icône. L'URI peut aussi sortir dans une balise <img> ou <link>, avec un charset explicite dans l'en-tête.
Tout fonctionne dans votre navigateur. Votre balisage SVG n'est jamais téléchargé, vous pouvez donc encoder des icônes privées, des logos et des ressources internes sans qu'ils quittent votre appareil.