Incorpora immagini e font nell'SVG
Aggiungi 1 SVG e le immagini (PNG, JPEG, WebP, GIF) o i font (TTF, OTF, WOFF, WOFF2) a cui fa riferimento e uniscili in un unico SVG, così non dovrai condividere le risorse separatamente. Specifica la risorsa da usare per ogni riferimento e crea l'SVG. Puoi salvarlo quando l'anteprima viene visualizzata correttamente. Le risorse agli URL esterni non vengono recuperate automaticamente.
Cosa puoi fare
Raggruppa immagini e font
Incorporare nell'SVG le risorse locali aggiunte per ridurre la necessità di inviare le risorse separatamente.
Controlla riferimenti e risorse
Specifica il file corrispondente per ogni percorso di immagine o nome di font nell'SVG. L'SVG non viene creato lasciando riferimenti non risolti.
Controlla la visualizzazione dell'SVG creato e salva
Controlla come viene visualizzato come immagine e salva l'SVG con le risorse incorporate. I file originali non vengono sovrascritti.
Come usarlo
Aggiungi un SVG e le risorse
Scegli un SVG e le immagini e i font a cui fa riferimento. Puoi anche aggiungerli insieme da una cartella.
Associa le risorse da incorporare
Controlla il file locale da usare per ogni riferimento. Per i riferimenti non associati automaticamente, seleziona tra le risorse già aggiunte.
Crea l'SVG
Quando non ci sono più riferimenti non risolti, premi “Crea SVG con immagini e font”.
Controlla la visualizzazione e salva
Controlla il testo e le immagini nell'anteprima creata prima di salvare. Se la visualizzazione non riesce, controlla l'SVG originale e le risorse.
Utile quando
Consegna insieme SVG e risorse
Combina una grafica che fa riferimento a immagini e font in cartelle separate in un unico SVG facile da consegnare.
Controlla la causa dei riferimenti interrotti
Confronta le risorse necessarie con i file aggiunti, poi specifica eventuali immagini o font mancanti.
Come funzionano i riferimenti e l'incorporamento
Percorsi relativi e corrispondenza dei file
I riferimenti vengono associati automaticamente quando un percorso di riferimento relativo all'SVG corrisponde in modo univoco al percorso di una risorsa aggiunta. Seleziona manualmente quando file con lo stesso nome si trovano in cartelle diverse o i candidati si sovrappongono.
Specifica il file per ogni nome di font
Lo strumento non estrae i font dal tuo dispositivo solo in base ai nomi dei font nell'SVG. Aggiungi i file dei font necessari e specifica quelli corrispondenti.
Le risorse agli URL non vengono recuperate automaticamente
Anche quando viene referenziato un URL esterno, fornisci localmente le immagini o i font e specificali. Questa schermata non ha operazioni per recuperare risorse dagli URL.
L'incorporamento è separato dalla riduzione della dimensione
Poiché i dati delle immagini vengono inclusi nell'SVG, la dimensione del solo file SVG può aumentare. I font vengono convertiti in WOFF2 e incorporati. Ottimizza il codice SVG con uno strumento separato.
Differenze in base al metodo di visualizzazione
L'anteprima visualizza l'SVG come immagine. Non è garantita la stessa resa in ogni app, quindi controlla anche la visualizzazione necessaria presso la destinazione.
Domande frequenti
Cosa devo fare se una risorsa non viene trovata?
Aggiungi immagini o font, poi specificali nel campo di selezione del riferimento corrispondente. La corrispondenza automatica potrebbe non funzionare con cartelle diverse, percorsi duplicati o URL esterni.
Quali risorse posso usare?
Le immagini possono essere PNG, JPEG, WebP o GIF; i font possono essere TTF, OTF, WOFF o WOFF2. Specifica gli SVG uno alla volta.
Trova i font automaticamente?
Lo strumento non cerca font sul tuo dispositivo o sul web solo in base al nome del font. Aggiungi e seleziona un file che hai in locale.
Cosa succede alle risorse già incorporate?
Le immagini e i font incorporati come data URI e i riferimenti # all'interno dell'SVG non vengono contati come riferimenti esterni. Puoi creare l'SVG se non restano riferimenti rilevati non risolti.
Cosa succede quando aggiungo o riseleziono le risorse?
Se aggiungi solo risorse, queste vengono aggiunte all'elenco e le risorse già assegnate vengono mantenute. Controlla la corrispondenza automatica se, ad esempio, diventano disponibili più candidati con lo stesso percorso. Un input che include un nuovo SVG sostituisce l'SVG attuale e tutte le sue risorse.
Cosa fare se ci sono riferimenti non supportati?
I riferimenti a use o script esterni non possono essere incorporati. Anche gli SVG che contengono import di CSS esterni non possono essere caricati. Sistema i riferimenti nell'app originale o in un'altra app adatta prima di selezionare l'SVG.
L'SVG diventerà più piccolo?
Ridurre la dimensione del file non è lo scopo di questo strumento. Includere le risorse nell'SVG può aumentarne la dimensione. Usa l'ottimizzazione SVG se vuoi riordinare il codice.
Cosa fare se l'SVG creato non può essere visualizzato?
In questa schermata l'opzione di salvataggio non viene mostrata finché l'SVG non viene visualizzato correttamente. Controlla l'SVG originale e le risorse, rivedi le associazioni o i file e crealo di nuovo.
Input e risultati
- Input
- 1 SVG più immagini e font. Aggiungi da file o cartelle.
- Immagini
- I dati originali delle immagini aggiunte vengono incorporati. Le immagini non vengono ridimensionate né compresse.
- Font
- I font associati vengono convertiti in WOFF2 e incorporati.
- Output
- nome-originale-embedded.svg. Puoi salvare dopo che l'SVG creato viene visualizzato correttamente.