SVG para CSS

Converta SVG em um data URI otimizado para background-image no CSS, codificado para URL ou em Base64, com pré-visualização ao vivo. Grátis.

Sobre esta ferramenta

Transforme código SVG em um data URI para background-image no CSS. A codificação para URL deixa o resultado curto e legível; Base64 também está disponível.

Como usar

Cole o seu SVG.
Escolha Codificado para URL ou Base64.
Copie a declaração CSS e confira a pré-visualização.

Perguntas frequentes

Codificado para URL ou Base64?

SVG codificado para URL costuma ser menor e continua legível. Base64 é mais seguro em ferramentas que lidam mal com caracteres especiais.

Por que o xmlns foi adicionado?

Um SVG usado como data URI precisa de xmlns="http://www.w3.org/2000/svg" para renderizar, então ele é adicionado quando falta.

Os espaços em branco são removidos?

Sim. Quebras de linha e espaços extras entre tags são compactados para encurtar o resultado.

Ferramentas relacionadas

Codificar / Decodificar imagem Base64 – Converta imagens em data URI e visualize imagens Base64
Conversor de cores – Converta entre HEX, RGB, HSL, HWB e CMYK
HTML para JSX – Converta HTML em JSX do React

Formatar

Formatar / Validar JSON – Formate, minifique e valide JSON
Ordenar / Remover linhas duplicadas – Ordene, remova duplicadas, inverta e apare linhas

Codificar / Decodificar

Codificar / Decodificar Base64 – Converta texto para Base64 e vice-versa (UTF-8)
Codificar / Decodificar URL – Codificação percentual de URL
Codificar / Decodificar entidades HTML – Escape e desfaça o escape de entidades HTML
Codificar / Decodificar imagem Base64 – Converta imagens em data URI e visualize imagens Base64
Escapar / Desfazer barras invertidas – Escape aspas, quebras de linha e caracteres de controle
Hex ↔ ASCII – Converta texto em bytes hexadecimais e vice-versa
Depurador JWT – Decodifique o cabeçalho e o payload de um JSON Web Token

Gerar

Gerar / Decodificar UUID / ULID – Gere UUID v4 / v7 e ULID, e decodifique IDs existentes
Gerador de hash – MD5, SHA-1, SHA-256, SHA-384 e SHA-512
Gerador de strings aleatórias – Strings aleatórias criptograficamente seguras
Gerador de Lorem Ipsum – Texto de preenchimento em parágrafos, frases ou palavras
Gerar / Ler QR code – Crie QR codes e leia-os a partir de imagens

Converter

Conversor de horário mundial – Converta um horário entre fusos; começa pelo horário atual deste computador
Conversor de tempo Unix – Converta timestamps Unix e datas
Conversor de bases numéricas – Converta entre binário, octal, decimal e hexadecimal
YAML ↔ JSON – Converta YAML em JSON e vice-versa
CSV ↔ JSON – Converta CSV em JSON e vice-versa
HTML para JSX – Converta HTML em JSX do React
Query string ↔ JSON – Converta query strings de URL em JSON e vice-versa
Analisador de URL – Divida uma URL em partes e parâmetros de consulta
Conversor de cores – Converta entre HEX, RGB, HSL, HWB e CMYK
SVG para CSS – Converta SVG em data URI para fundos CSS
JSON ↔ array PHP – Converta JSON para sintaxe de array PHP e vice-versa
PHP Serialize / Unserialize – Converta JSON para o formato serialize() do PHP e vice-versa

Texto

Testador de RegExp – Teste expressões regulares e veja as correspondências
Conversor de maiúsculas/minúsculas – camelCase, snake_case, kebab-case e mais
Inspetor de strings – Conte caracteres, bytes e palavras e inspecione code points
Comparador de texto – Compare dois textos por linha, palavra ou caractere

Inspecionar

Analisador de cron – Explique expressões cron e veja as próximas execuções
Analisador de cURL – Decomponha um comando cURL e converta para fetch()
Decodificador de certificado X.509 – Inspecione certificados PEM e cadeias

Pré-visualização

Pré-visualização de Markdown – Renderize Markdown no estilo GitHub
Pré-visualização HTML – Renderize HTML em um quadro isolado