Incorporar imagens e fontes no SVG
Adicione 1 SVG e as imagens (PNG, JPEG, WebP, GIF) ou fontes (TTF, OTF, WOFF, WOFF2) que ele referencia e combine-os em 1 SVG para não precisar compartilhar os recursos separadamente. Especifique o recurso a usar para cada referência e crie o SVG. Você pode salvá-lo quando a pré-visualização for exibida com sucesso. Recursos em URLs externas não são obtidos automaticamente.
O que você pode fazer
Agrupar imagens e fontes
Incorporar os recursos locais adicionados ao SVG para reduzir a necessidade de enviar recursos separadamente.
Verificar referências e recursos
Especifique o arquivo correspondente para cada caminho de imagem ou nome de fonte no SVG. O SVG não é criado enquanto restarem referências não resolvidas.
Verificar a exibição do SVG criado e salvar
Verifique como é exibido como imagem e salve o SVG com os recursos incorporados. Os arquivos originais não são sobrescritos.
Como usar
Adicionar um SVG e recursos
Escolha um SVG e as imagens e fontes que ele referencia. Você também pode adicioná-los juntos a partir de uma pasta.
Associar os recursos a incorporar
Verifique o arquivo local a usar para cada referência. Para referências que não correspondem automaticamente, selecione entre os recursos já adicionados.
Criar o SVG
Quando não houver mais referências não resolvidas, pressione “Criar SVG com imagens e fontes”.
Verificar a exibição e salvar
Confira o texto e as imagens na pré-visualização criada antes de salvar. Se falhar a exibição, verifique o SVG original e os recursos.
Útil quando
Entregar o SVG e os recursos juntos
Combinar um gráfico que referencia imagens e fontes em pastas separadas em um único SVG fácil de entregar.
Verificar a causa de referências quebradas
Comparar os recursos necessários com os arquivos adicionados e depois especificar as imagens ou fontes que faltam.
Como funcionam as referências e a incorporação
Caminhos relativos e correspondência de arquivos
As referências são correspondidas automaticamente quando um caminho de referência relativo ao SVG coincide de forma única com o caminho de um recurso adicionado. Selecione manualmente quando houver arquivos com o mesmo nome em pastas diferentes ou candidatos sobrepostos.
Especificar o arquivo para cada nome de fonte
A ferramenta não extrai fontes do seu dispositivo apenas com base nos nomes de fonte no SVG. Adicione os arquivos de fonte necessários e especifique os arquivos correspondentes.
Recursos em URLs não são buscados automaticamente
Mesmo quando uma URL externa é referenciada, forneça as imagens ou fontes localmente e especifique-as. Esta tela não tem operação para buscar recursos a partir de URLs.
A incorporação é separada da redução de tamanho
Incluir os dados da imagem no SVG pode aumentar o tamanho do próprio arquivo SVG. As fontes são convertidas em WOFF2 e incorporadas. Otimize o código SVG com uma ferramenta separada.
Diferenças conforme o método de exibição
A pré-visualização exibe o SVG como imagem. A mesma aparência não é garantida em todos os aplicativos, então verifique também a exibição necessária no destino.
Perguntas frequentes
O que devo fazer se um recurso não for encontrado?
Adicione imagens ou fontes e depois especifique-as no campo de seleção da referência correspondente. A correspondência automática pode não funcionar com pastas diferentes, caminhos duplicados ou URLs externas.
Quais recursos posso usar?
As imagens podem ser PNG, JPEG, WebP ou GIF; as fontes podem ser TTF, OTF, WOFF ou WOFF2. Especifique os SVG um de cada vez.
Ela encontra fontes automaticamente?
A ferramenta não procura fontes no seu dispositivo nem na web apenas pelo nome da fonte. Adicione e selecione um arquivo que você tenha localmente.
O que acontece com os recursos que já estão incorporados?
Imagens e fontes incorporadas como data URIs, e as referências # dentro do SVG, não são contadas como referências externas. Você pode criar o SVG se não restar nenhuma referência detectada não resolvida.
O que acontece quando adiciono ou reseleciono recursos?
Se você adicionar apenas recursos, eles são incluídos na lista e os recursos já atribuídos são mantidos. Verifique a correspondência automática caso surjam mais candidatos com o mesmo caminho, por exemplo. Uma entrada que inclua um novo SVG substitui o SVG atual e todos os seus recursos.
E se houver referências não compatíveis?
Referências externas de use ou script não podem ser incorporadas. SVGs que contenham importações de CSS externo também não podem ser carregados. Organize as referências no aplicativo de origem ou em outro aplicativo adequado antes de selecionar o SVG.
O SVG ficará menor?
Reduzir o tamanho do arquivo não é o objetivo desta ferramenta. Incluir recursos no SVG pode aumentar o tamanho. Use a otimização de SVG se quiser limpar o código.
E se o SVG criado não puder ser exibido?
A opção de salvar não é exibida nesta tela enquanto o SVG não for exibido com sucesso. Verifique o SVG original e os recursos, revise os mapeamentos ou arquivos e crie novamente.
Entrada e resultados
- Entrada
- 1 SVG mais imagens e fontes. Adicione a partir de arquivos ou pastas.
- Imagens
- Os dados originais das imagens adicionadas são incorporados. As imagens não são redimensionadas nem comprimidas.
- Fontes
- As fontes associadas são convertidas em WOFF2 e incorporadas.
- Saída
- original-name-embedded.svg. Você pode salvar depois que o SVG criado for exibido com sucesso.