SVG para ICO Não Funciona? Causas Comuns (Fontes, Imagens Externas, ViewBox)

SVG é um dos melhores formatos de origem para gerar arquivos ICO. Por ser um formato vetorial, ele escala para qualquer tamanho sem perder qualidade, o que o torna ideal para produzir as múltiplas camadas de tamanho (16 a 256 pixels) que um bom arquivo ICO precisa. Em teoria, você arrasta um SVG no Any2ICO e obtém um arquivo ICO nítido e multi-tamanho instantaneamente.

Na prática, arquivos SVG podem ser complicados. A especificação SVG é grande e complexa, e diferentes ferramentas criam SVGs com diferentes suposições sobre como o arquivo será renderizado. Um SVG que parece perfeito no Adobe Illustrator ou Figma pode renderizar incorretamente, parcialmente ou não renderizar ao ser aberto na API Canvas do navegador, que é o motor de renderização que conversores baseados em navegador usam. O resultado pode ser um ícone em branco, um ícone com texto ausente, um ícone na escala errada ou um ícone com pedaços faltando.

A boa notícia é que os problemas são bem conhecidos e as correções são diretas. Este artigo cobre as razões mais comuns pelas quais a conversão SVG para ICO falha ou produz resultados inesperados, e fornece uma correção clara para cada uma. Se você quer o caminho mais rápido para o sucesso, comece com o checklist na próxima seção.

Checklist Rápido: Corrija Seu SVG Antes de Converter

Antes de mergulhar nas explicações detalhadas, aqui está um checklist rápido que resolve a maioria dos problemas de SVG para ICO. Passe por estes itens primeiro; se seu problema for resolvido, não precisa ler mais.

1. Adicione ou corrija o atributo viewBox. Abra seu SVG em um editor de texto e verifique o elemento raiz <svg>. Ele deve ter um atributo viewBox como viewBox="0 0 100 100" que define o sistema de coordenadas. Se estiver ausente, adicione-o com valores que correspondam às dimensões do seu design.

2. Converta todo texto em contornos (caminhos). Selecione todos os elementos de texto no seu editor vetorial e converta-os em contornos ou caminhos. No Illustrator, é Tipo > Criar Contornos. No Figma, clique com botão direito e selecione Achatar. No Inkscape, use Caminho > Objeto para Caminho. Isso elimina dependências de fontes completamente.

3. Remova ou incorpore referências externas. Procure no seu arquivo SVG por referências href, xlink:href e url() que apontem para arquivos externos (imagens, fontes, CSS). Incorpore esses recursos diretamente no SVG ou remova-os se não forem essenciais.

4. Substitua CSS externo por estilos inline. Se seu SVG referencia uma folha de estilo externa, copie as regras CSS relevantes diretamente para um bloco <style> dentro do SVG, ou converta-as em atributos style inline em cada elemento.

5. Defina largura e altura explícitas. Embora nem sempre obrigatório, adicionar atributos width e height ao elemento raiz <svg> ajuda a API Canvas a determinar o tamanho correto de renderização. Use valores que correspondam ou excedam 256 pixels para melhores resultados.

Fontes e Renderização de Texto

Texto é a maior fonte de problemas de conversão SVG. Quando um SVG contém elementos <text>, o renderizador precisa de acesso à fonte especificada para exibir o texto corretamente. Em um aplicativo de design como Illustrator ou Figma, a fonte está instalada no seu computador, então tudo parece correto. Mas quando o SVG é renderizado na API Canvas de um navegador para conversão ICO, a situação é muito diferente.

A API Canvas só pode usar fontes disponíveis para o navegador no momento da renderização. Se seu SVG especifica font-family: "Proxima Nova" e essa fonte não está instalada no sistema do usuário ou carregada como web font, o navegador substitui por uma fonte padrão (geralmente sans-serif ou serif genérica). Isso muda a aparência do texto: espaçamento entre letras muda, caracteres podem ser mais largos ou estreitos, e o layout geral pode quebrar. Em alguns casos, o texto pode não renderizar de todo se o SVG usa recursos avançados de fonte ou ligaduras que a fonte substituta não suporta.

A correção confiável é converter todo texto em contornos (também chamado de "converter em caminhos" ou "achatar texto"). Isso substitui cada caractere de texto por um caminho vetorial que descreve sua forma exata. O SVG resultante não referencia mais nenhuma fonte porque as formas das letras são desenhadas como caminhos geométricos. O arquivo SVG será ligeiramente maior, mas renderizará de forma idêntica em qualquer sistema, em qualquer navegador e através de qualquer API Canvas, independentemente de quais fontes estejam instaladas.

No Illustrator: selecione todo texto, depois vá em Tipo > Criar Contornos. No Figma: selecione camadas de texto, clique com botão direito e escolha Achatar. No Inkscape: selecione o texto, depois use Caminho > Objeto para Caminho. Sempre salve o SVG editável original separadamente antes de converter em contornos, pois texto em contornos não pode mais ser editado como texto.

Imagens e Referências Externas

Arquivos SVG podem referenciar recursos externos: imagens carregadas via <image href="/pt/logo.png">, fontes carregadas via @font-face com URL, arquivos CSS vinculados via <?xml-stylesheet?> e padrões ou gradientes que referenciam outros arquivos SVG. Quando o SVG é aberto como arquivo independente em um conversor baseado em navegador, essas referências externas quase sempre falham ao carregar.

A API Canvas renderiza o SVG em um contexto isolado onde requisições cross-origin são bloqueadas por razões de segurança. Um elemento <image> apontando para https://exemplo.com/logo.png não carregará porque o navegador bloqueia a busca cross-origin. O resultado é um espaço em branco onde a imagem deveria aparecer. O mesmo se aplica a fontes hospedadas externamente, folhas de estilo e qualquer recurso referenciado por URL.

Até caminhos relativos como href="/pt/logo.png" falharão porque o SVG está sendo processado na memória pela API Canvas, não servido de um diretório onde caminhos relativos possam resolver. Não há contexto de sistema de arquivos para o SVG referenciar.

A correção é incorporar todos os recursos externos diretamente no SVG. Para imagens, converta-as em URIs de dados base64: <image href="data:image/png;base64,iVBOR...">. Para fontes, use uma declaração @font-face codificada em base64 dentro de um bloco <style> no SVG (embora converter texto em contornos seja geralmente mais simples e confiável). Para CSS, copie todas as regras em um elemento <style> inline dentro da tag <svg>.

Problemas com ViewBox, Largura e Altura

O atributo viewBox define o sistema de coordenadas de um SVG. Ele informa ao renderizador qual porção da tela SVG infinita exibir e como escalar o conteúdo. Quando viewBox está ausente ou incorreto, os resultados variam de saída em branco a um ícone que mostra apenas um canto do design ou renderiza na proporção errada.

viewBox ausente: Se o SVG tem width e height mas sem viewBox, alguns renderizadores inferirão o viewBox das dimensões, mas a API Canvas pode não. A abordagem mais segura é sempre incluir um viewBox explícito. Se seu SVG é projetado em 100x100 unidades, adicione viewBox="0 0 100 100" ao elemento raiz.

viewBox não corresponde ao conteúdo: Se as coordenadas do viewBox não abrangem todo o conteúdo do SVG, partes do design serão cortadas. Por exemplo, se seu ícone tem elementos que se estendem até x=120 mas o viewBox só cobre 0 a 100, as 20 unidades mais à direita são invisíveis. Abra o SVG em um editor de texto, examine os valores do viewBox e ajuste-os para conter todos os elementos visíveis.

Largura/altura definidas como 0 ou valores muito pequenos: Algumas ferramentas de exportação SVG definem largura e altura para valores muito pequenos como 1px ou 0, dependendo do CSS para escalar o SVG quando exibido em uma página web. Quando a API Canvas lê essas dimensões, pode renderizar o SVG em 1x1 pixel e depois ampliar, produzindo resultado completamente em branco ou fortemente borrado. Defina largura e altura para pelo menos 256 pixels para dar à API Canvas um tamanho de renderização razoável.

Dimensões baseadas em porcentagem: Um SVG com width="100%" height="100%" não tem tamanho intrínseco. A API Canvas precisa de valores absolutos em pixels para criar uma superfície de renderização. Substitua dimensões em porcentagem por valores absolutos como width="512" height="512".