SVG para Data URI

SVG para Data URI converte a marcação SVG em uma string data URI otimizada que pode ser incorporada diretamente em atributos HTML img src, propriedades CSS background-image ou variáveis JavaScript sem a necessidade de uma requisição HTTP separada para o arquivo SVG. Um data URI codifica o recurso inline no documento usando URL encoding ou Base64, eliminando uma viagem de ida e volta na rede e simplificando a implantação de SVG icons, logos e gráficos decorativos em web applications. Data URIs URL-encoded são geralmente preferidos em relação ao Base64 para SVGs porque são mais compactos e permanecem parcialmente legíveis em browser developer tools. A ferramenta opcionalmente minifica a marcação SVG antes da codificação para reduzir o tamanho final do data URI.

Explorar todas as ferramentas de Conversor

Como Usar

Cole seu SVG code na área de entrada e o data URI é gerado instantaneamente no painel de saída. Escolha entre URL encoding e Base64 encoding usando o seletor de formato: URL encoding produz uma saída menor para a maioria dos SVGs, enquanto Base64 é mais seguro para conteúdo SVG contendo caracteres incomuns que poderiam quebrar a análise de atributos HTML. Copie a string completa do data URI e cole-a em um valor url() de CSS background-image, um atributo HTML img src ou uma constante JavaScript. Uma prévia ao vivo do SVG renderizado é mostrada para que você possa verificar a correção visual antes de copiar a saída.

Casos de Uso Comuns

• •Incorporar SVG icons como data URIs de CSS background-image em stylesheets de componentes para eliminar requisições HTTP extras para pequenos assets vetoriais
• •Incorporar logos de empresas e ilustrações de marketing como data URIs em HTML email templates onde o carregamento de imagens externas é bloqueado por clientes de e-mail
• •Converter SVG favicons, app icons e cursores para data URIs para incorporação inline em documentos HTML de arquivo único e browser extensions
• •Incorporar conteúdo SVG crítico acima da dobra como data URIs para eliminar requisições de rede que bloqueiam a renderização para o carregamento inicial da página
• •Atribuir SVG mask images, patterns e filters como data URIs em CSS para stylesheets de componentes autocontidos e portáteis