Convertire SVG in URI dati sicuro per CSS
Incolli il codice SVG e ottenga un URI dati che inizia con data:image/svg+xml, pronto per un url() del CSS o per la sorgente di un'immagine. Un colore come #0a7 diventa %230a7, così nessun carattere rompe il suo foglio di stile. Gratis nel suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Funziona nel tuo browser: gratis, senza registrazione, i file non escono dal tuo dispositivo.
Trasformi il markup SVG grezzo in un URI dati da inserire in un valore CSS url() o in qualsiasi posizione che accetti un URL immagine. Il convertitore verifica innanzitutto che l’input sia XML ben formato, quindi codifica il documento in UTF-8 ed esegue l’escape di ogni carattere che potrebbe alterare l’interpretazione dell’URL o del CSS. Il risultato inizia con il tipo di media SVG e non aggiunge uno strato base64, perciò è semplice da esaminare, copiare, memorizzare nella cache e versionare insieme ai fogli di stile.
Perché gli URI dati SVG richiedono un escape rigoroso
Un SVG è testo, ma incollarlo direttamente in un token CSS <code>url()</code> non è affidabile. Un colore come <code>#0a7</code> introduce un frammento URL, gli spazi possono separare i token e virgolette o parentesi possono chiudere il valore CSS. Questo convertitore elimina tali ambiguità codificando l’SVG come byte UTF-8 e lasciando leggibili soltanto i caratteri URL non riservati.
Tutto il resto diventa un escape percentuale, inclusi cancelletti, parentesi angolari, virgolette, apostrofi, parentesi tonde, spazi e interruzioni di riga. Il valore rimane quindi integro in <code>url(...)</code>, senza virgolette oppure con virgolette singole o doppie. Il prefisso è <code>data:image/svg+xml,</code>, seguito dal markup codificato.
Non viene aggiunto base64, quindi lettere e numeri comuni restano visibili. Copi l’intera stringa: il prefisso comunica al browser come interpretare il contenuto.
La convalida avviene prima della conversione
Codificare markup difettoso produrrebbe un valore perfettamente protetto che continuerebbe a fallire quando il browser analizza l’immagine. Per evitare un risultato ingannevole, il convertitore controlla prima il documento XML. Richiede un solo elemento radice SVG, tag di apertura e chiusura corrispondenti e correttamente annidati, valori degli attributi tra virgolette, nomi degli attributi univoci, commenti e sezioni CDATA chiusi e riferimenti a entità validi.
Il testo esterno alla radice e una seconda radice vengono rifiutati. Dichiarazioni XML, istruzioni di elaborazione, commenti, CDATA e dichiarazioni del tipo di documento sono accettati in posizioni strutturalmente valide. La verifica conferma la sintassi XML, ma non garantisce che ogni elemento, attributo, colore, animazione o riferimento SVG funzioni in tutti i browser.
Come usare il risultato in CSS e HTML
Utilizzi l’URI restituito ovunque la piattaforma richieda un URL immagine. In CSS, destinazioni tipiche sono l’immagine di sfondo, l’origine di una maschera, un indicatore di elenco o contenuto generato. Può racchiudere il valore tra virgolette singole o doppie per migliorarne la leggibilità, anche se l’escape rigoroso protegge pure un token <code>url()</code> senza virgolette.
In HTML può assegnarlo all’attributo <code>src</code> di un’immagine applicando la normale quotatura degli attributi. Gli URI dati duplicano i propri byte a ogni occorrenza, salvo che il sistema di build estragga o riutilizzi la dichiarazione; sono quindi ideali per piccole icone e decorazioni, non per illustrazioni grandi. La conversione è deterministica: input identici generano output identici.
Il convertitore non recupera font, immagini o stili, non ottimizza i tracciati e non bonifica contenuto SVG attivo. Gestisca il markup non attendibile secondo le regole di sicurezza della destinazione.
Casi d'uso
Incorporare una piccola icona nel CSS
Converta una risorsa SVG versionata in un’immagine di sfondo sicura senza aggiungere un’altra richiesta di rete.
Generare stili per temi diversi
Codifichi le varianti SVG durante il build e inserisca URI deterministici nei design token o negli stili dei componenti.
Controllare markup SVG generato
Rifiuti XML difettoso prodotto da un modello prima di pubblicare la stringa immagine codificata.
Domande frequenti
Perché usare la codifica percentuale invece di base64?
L’SVG è già testo. La codifica percentuale evita uno strato base64, mantiene leggibili i caratteri non riservati e produce un URI standard.
Il convertitore ottimizza o bonifica l’SVG?
No. Convalida la struttura XML e codifica il markup originale senza eliminare metadati, script, riferimenti esterni o tracciati ridondanti.
Posso incollare il risultato direttamente in un url() del CSS?
Sì. Ogni carattere che potrebbe chiudere o spezzare un valore CSS, comprese virgolette, parentesi, spazi e cancelletti, viene codificato, quindi il valore funziona senza virgolette, con apici singoli o doppi. Copi l'intera stringa, prefisso compreso.
Perché il mio SVG viene rifiutato?
Perché il codice non è ben formato. Un tag non è chiuso o annidato correttamente, un attributo è senza virgolette o ripetuto, un commento resta aperto, un'entità non è valida oppure c'è testo o un secondo elemento fuori dalla radice svg.
Quando conviene evitare un URI dati per un SVG?
Quando l'immagine è grande o si ripete in molti punti. Un URI dati copia tutti i suoi byte ovunque compaia, quindi è più adatto a icone piccole, badge e decorazioni che a illustrazioni di grandi dimensioni.
Strumenti correlati
Per sviluppatori — accesso via API
Tutto quello che vedi in questa pagina è disponibile anche via API. Questa sezione è per i team che vogliono integrarlo nei propri sistemi; chi non ne ha bisogno può semplicemente usare lo strumento qui sopra.
Endpoint
Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.
Chiamala dal tuo 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)Esempio di richiesta
{
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.svg_to_data_uri",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L'API è asincrona: ricevi subito un task_id e puoi fare polling fino a 1 richiesta al secondo.
Prezzi
Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.
Limiti
timeout_sec | 30 |
max_crawl_pages | 25 |
Errori
| HTTP | Codice | Significato |
|---|---|---|
401 | unauthorized | Chiave API mancante o non valida: controlla l'header Authorization. |
402 | insufficient_balance | Credito esaurito: ricarica per continuare a eseguire attività. |
404 | unknown_type | Tipo di attività sconosciuto: controlla il campo type della richiesta. |
429 | rate_limited | Troppe richieste in poco tempo: rallenta e riprova tra qualche secondo. |
Note tecniche
La convalida avviene prima della conversione
Se il controllo fallisce, la richiesta restituisce un errore <code>invalid_input</code> con la descrizione del problema, non un URI.
Domande tecniche
Quanto costa la conversione tramite API?
Ogni richiesta API costa $0.002. La versione per browser può essere eseguita localmente in questa pagina.
Posso incollare il risultato direttamente in CSS url()?
Sì. Virgolette, parentesi, spazi, cancelletti e altri caratteri sensibili del payload SVG vengono codificati.
Cosa accade se l’XML non è ben formato?
La conversione si interrompe e restituisce un errore invalid_input che descrive il difetto. Non viene prodotto alcun URI parziale.