Convertir un SVG en URI de données sûre pour CSS
Collez le code SVG et obtenez une URI de données qui commence par data:image/svg+xml, prête pour un url() CSS ou la source d'une image. Une couleur comme #0a7 devient %230a7, si bien qu'aucun caractère ne casse votre feuille de style. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Tout se passe dans votre navigateur : gratuit, sans envoi de vos données.
Transformez un balisage SVG brut en URI de données utilisable dans une valeur CSS url() ou partout où une URL d’image est acceptée. Le convertisseur vérifie d’abord que l’entrée constitue un XML bien formé, puis encode le document en UTF-8 et échappe chaque caractère susceptible de perturber l’analyse de l’URL ou du CSS. Le résultat commence par le type de média SVG et n’ajoute aucune couche base64 ; vous pouvez donc facilement l’examiner, le copier, le mettre en cache et le versionner avec vos feuilles de style.
Pourquoi une URI SVG exige un échappement rigoureux
Un SVG est du texte, mais le coller directement dans un jeton CSS <code>url()</code> n’est pas fiable. Une couleur telle que <code>#0a7</code> introduit un fragment d’URL, les espaces peuvent séparer les jetons, tandis que les guillemets ou parenthèses peuvent fermer la valeur CSS. Ce convertisseur supprime ces ambiguïtés : il encode le SVG en octets UTF-8 et ne conserve lisibles que les caractères non réservés des URL.
Tout le reste devient un échappement pourcentage, notamment les dièses, chevrons, guillemets, apostrophes, parenthèses, espaces et retours à la ligne. La valeur reste donc intacte dans <code>url(...)</code>, sans guillemets ou avec des guillemets simples ou doubles. Le préfixe <code>data:image/svg+xml,</code> précède le balisage encodé.
Sans couche base64, les lettres et chiffres courants restent visibles. Copiez toute la chaîne, car le préfixe indique au navigateur comment interpréter les données.
La validation précède toujours la conversion
Encoder un balisage défectueux donnerait une valeur parfaitement échappée qui échouerait encore lorsque le navigateur analyserait l’image. Pour éviter ce résultat trompeur, le convertisseur contrôle d’abord le document XML. Il exige un seul élément racine SVG, des balises ouvrantes et fermantes correspondantes et correctement imbriquées, des valeurs d’attribut entre guillemets, des noms d’attribut uniques, ainsi que des commentaires, sections CDATA et références d’entité valides.
Le texte extérieur à la racine et toute seconde racine sont refusés. Les déclarations XML, instructions de traitement, commentaires, sections CDATA et déclarations de type de document sont acceptés à des emplacements structurellement valides. Ce contrôle confirme la syntaxe XML, mais ne garantit pas la prise en charge de chaque élément, attribut, peinture, animation ou référence SVG par tous les navigateurs.
Utiliser le résultat dans CSS et HTML
Employez l’URI renvoyée partout où la plateforme attend une URL d’image. Dans CSS, elle convient notamment à une image d’arrière-plan, une source de masque, une puce de liste ou du contenu généré. Vous pouvez entourer la valeur de guillemets simples ou doubles pour la lisibilité, même si l’échappement strict protège aussi un jeton <code>url()</code> non cité.
Dans HTML, affectez-la à l’attribut <code>src</code> d’une image en appliquant les règles ordinaires de citation des attributs. Les URI de données répètent leurs octets à chaque occurrence si votre système de build ne mutualise pas la déclaration ; réservez-les donc aux petites icônes et illustrations décoratives. La conversion est déterministe : une entrée identique produit une sortie identique.
Le service ne télécharge ni polices, ni images, ni styles, n’optimise pas les tracés et ne neutralise pas le contenu SVG actif. Appliquez les règles de sécurité du contexte cible aux sources non fiables.
Cas d’usage
Intégrer une petite icône dans CSS
Convertissez une ressource SVG versionnée en image d’arrière-plan sûre sans requête réseau supplémentaire.
Produire des styles adaptés aux thèmes
Encodez les variantes SVG lors du build et placez des URI déterministes dans vos jetons de conception ou composants.
Contrôler un SVG généré
Refusez le XML défectueux d’un modèle avant de publier la chaîne d’image encodée.
Questions fréquentes
Pourquoi un encodage pourcentage plutôt que base64 ?
Le SVG est déjà textuel. Cet encodage évite une couche base64, garde les caractères non réservés lisibles et fournit une URI normalisée.
Puis-je coller le résultat directement dans CSS url() ?
Oui. Les guillemets, parenthèses, espaces, dièses et autres caractères sensibles de la charge SVG sont encodés.
Le convertisseur optimise-t-il ou assainit-il le SVG ?
Non. Il valide la structure XML et encode le balisage original sans retirer métadonnées, scripts, références externes ou tracés redondants.
Pourquoi mon SVG est-il refusé ?
Parce que le code n'est pas bien formé. Une balise n'est pas fermée ou mal imbriquée, un attribut est sans guillemets ou répété, un commentaire reste ouvert, une entité est invalide, ou du texte ou un second élément se trouve hors de la racine svg.
Quand vaut-il mieux éviter une URI de données pour un SVG ?
Quand l'image est grande ou répétée à de nombreux endroits. Une URI de données recopie tous ses octets partout où elle apparaît, elle convient donc mieux aux petites icônes, aux badges et aux décors qu'aux grandes illustrations.
Outils associés
Pour les développeurs — accès API
Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.
Endpoint
Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.
Appeler depuis votre stack
curl -X POST https://api.kit.forhosting.com/web/svg-to-data-uri \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"}'const res = await fetch("https://api.kit.forhosting.com/web/svg-to-data-uri", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/svg-to-data-uri",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/svg-to-data-uri", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"svg":"<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\"><path fill=\\"#0a7\\" d=\\"M2 2h20v20H2z\\"/></svg>"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/svg-to-data-uri", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemple de requête
{
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.svg_to_data_uri",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.
Tarifs
Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.
Limites
timeout_sec | 30 |
max_crawl_pages | 25 |
Erreurs
| HTTP | Code | Signification |
|---|---|---|
401 | unauthorized | Clé API absente ou invalide : vérifiez l’en-tête Authorization. |
402 | insufficient_balance | Solde insuffisant : rechargez votre compte pour lancer cette tâche. |
404 | unknown_type | Type de tâche inconnu : vérifiez le champ type de votre requête. |
429 | rate_limited | Trop de requêtes : ralentissez la cadence, puis réessayez. |
Notes techniques
La validation précède toujours la conversion
En cas d’échec, la requête renvoie une erreur <code>invalid_input</code> décrivant le défaut, jamais une URI.
Questions techniques
Quel est le prix de la conversion par API ?
Chaque requête API coûte $0.002. La version pour navigateur peut s’exécuter localement sur cette page.
Que se passe-t-il si le XML est mal formé ?
La conversion s’arrête et renvoie une erreur invalid_input qui décrit le défaut. Aucune URI partielle n’est produite.