A prévia ao vivo acrescenta um atributo xmlns só para exibição, então ela mostra um SVG que não tem esse atributo. A exportação em PNG e o Data URI copiado não o acrescentam. Tenha isso em mente ao copiar um SVG Data URI para uma folha de estilo ou exportar um PNG: uma prévia bonita não prova que o arquivo carrega como imagem.
A armadilha do xmlns ausente
Para o PNG, o navegador carrega o seu código como imagem. Sem xmlns="http://www.w3.org/2000/svg", isso costuma falhar. Nesse caso o download não começa e aparece uma mensagem de erro. Adicione o atributo e clique no botão de novo.
Copiar, converter, conferir: os passos
- Cole o código SVG no campo de texto. Ele começa com um exemplo, um círculo azul com uma estrela branca.
- Olhe a prévia. Ela fica sobre um fundo xadrez escuro, para que formas claras continuem visíveis.
- Clique em Copiar Data URI para uma string
data:image/svg+xml,...ou em Copiar Base64 paradata:image/svg+xml;base64,.... Os dois botões copiam o URI completo, com o prefixodata:. - Para um PNG, informe um tamanho em pixels e clique em Baixar como PNG. O nome do arquivo leva o tamanho, por exemplo
vector-512x512.png.
SVG Data URI ou Base64: qual colar
O primeiro botão usa codificação por porcentagem e também escapa aspas simples e duplas, então a string cabe dentro de um url() do CSS ou de um atributo HTML. Para SVG, essa forma costuma ser mais curta. O segundo botão acrescenta cerca de um terço ao comprimento do texto, mas contém apenas caracteres seguros e lida com texto não ASCII. A ferramenta não minifica o seu SVG. O URI guarda o seu código como está, apenas codificado. Um ícone pequeno, por exemplo uma seta de 400 bytes para uma caixa de seleção personalizada, economiza uma requisição assim.
O que o PNG e a prévia fazem com o seu código
O PNG é sempre quadrado. O gráfico é desenhado numa tela de tamanho por tamanho, nas suas próprias proporções e centralizado, então um desenho largo não é esticado. A margem vazia fica transparente, como o resto do fundo. Um tamanho vazio ou inválido volta para 512, e um decimal é cortado para inteiro. Imagens, fontes e folhas de estilo externas às quais o SVG faz referência não são carregadas. Tamanhos muito grandes podem falhar, conforme o limite de canvas do navegador.
Tudo roda no seu dispositivo. Clicar num botão não envia nenhuma requisição, e os botões de copiar gravam na sua área de transferência. A prévia é um elemento de imagem com um data URI, então scripts e manipuladores de eventos do código colado não são executados.