¿SVG a ICO no funciona? Causas comunes (fuentes, imágenes externas, ViewBox)

SVG es uno de los mejores formatos de origen para generar archivos ICO. Debido a que SVG es un formato vectorial, escala a cualquier tamaño sin perder calidad, lo que lo hace ideal para producir las múltiples capas de tamaño (16 a 256 píxeles) que un buen archivo ICO necesita. En teoría, arrastras un SVG a Any2ICO y obtienes un archivo ICO nítido y multitamaño al instante.

En la práctica, los archivos SVG pueden ser complicados. La especificación SVG es amplia y compleja, y diferentes herramientas crean SVGs con diferentes suposiciones sobre cómo se renderizará el archivo. Un SVG que se ve perfecto en Adobe Illustrator o Figma puede renderizarse incorrectamente, parcialmente o no renderizarse en absoluto cuando se abre en la Canvas API de un navegador, que es el motor de renderizado que usan los conversores basados en navegador. El resultado podría ser un icono en blanco, un icono con texto faltante, un icono a la escala incorrecta o un icono con piezas faltantes.

La buena noticia es que los problemas son bien conocidos y las soluciones son directas. Este artículo cubre las razones más comunes por las que la conversión de SVG a ICO falla o produce resultados inesperados, y proporciona una solución clara para cada una. Si quieres el camino más rápido al éxito, comienza con la lista de verificación en la siguiente sección.

Lista de verificación rápida: corrige tu SVG antes de convertir

Antes de profundizar en las explicaciones detalladas, aquí tienes una lista de verificación rápida que resuelve la mayoría de los problemas de SVG a ICO. Repasa estos elementos primero; si tu problema se soluciona, no necesitas leer más.

1. Añade o corrige el atributo viewBox. Abre tu SVG en un editor de texto y verifica el elemento raíz <svg>. Debería tener un atributo viewBox como viewBox="0 0 100 100" que defina el sistema de coordenadas. Si falta, añádelo con valores que coincidan con las dimensiones de tu diseño.

2. Convierte todo el texto a contornos (trazados). Selecciona todos los elementos de texto en tu editor vectorial y conviértelos a contornos o trazados. En Illustrator, esto es Texto > Crear contornos. En Figma, clic derecho y selecciona Aplanar. En Inkscape, usa Trazado > Objeto a trazado. Esto elimina las dependencias de fuentes por completo.

3. Elimina o incrusta referencias externas. Busca en tu archivo SVG referencias href, xlink:href y url() que apunten a archivos externos (imágenes, fuentes, CSS). Incrusta estos recursos directamente en el SVG o elimínalos si no son esenciales.

4. Reemplaza CSS externo con estilos en línea. Si tu SVG referencia una hoja de estilo externa, copia las reglas CSS relevantes directamente en un bloque <style> dentro del SVG, o conviértelas a atributos style en línea en cada elemento.

5. Establece ancho y alto explícitos. Aunque no siempre es requerido, añadir atributos width y height al elemento raíz <svg> ayuda a la Canvas API a determinar el tamaño de renderizado correcto. Usa valores que igualen o excedan 256 píxeles para mejores resultados.

Fuentes y renderizado de texto

El texto es la fuente más grande de problemas de conversión SVG. Cuando un SVG contiene elementos <text>, el renderizador necesita acceso a la fuente especificada para mostrar el texto correctamente. En una aplicación de diseño como Illustrator o Figma, la fuente está instalada en tu computadora, así que todo se ve bien. Pero cuando el SVG se renderiza en la Canvas API de un navegador para la conversión a ICO, la situación es muy diferente.

La Canvas API solo puede usar fuentes que estén disponibles para el navegador en el momento del renderizado. Si tu SVG especifica font-family: "Proxima Nova" y esa fuente no está instalada en el sistema del usuario o cargada vía una fuente web, el navegador sustituye una fuente predeterminada (generalmente una sans-serif o serif genérica). Esto cambia la apariencia del texto: el espaciado entre letras cambia, los caracteres pueden ser más anchos o estrechos, y la disposición general puede romperse. En algunos casos, el texto puede no renderizarse en absoluto si el SVG usa funciones avanzadas de fuentes o ligaduras que la fuente de respaldo no soporta.

La solución fiable es convertir todo el texto a contornos (también llamado "convertir a trazados" o "aplanar texto"). Esto reemplaza cada carácter de texto con un trazado vectorial que describe su forma exacta. El SVG resultante ya no referencia ninguna fuente porque las formas de las letras se dibujan como trazados geométricos. El archivo SVG será ligeramente más grande, pero se renderizará de forma idéntica en cualquier sistema, en cualquier navegador y a través de cualquier Canvas API, independientemente de qué fuentes estén instaladas.

En Illustrator: selecciona todo el texto, luego ve a Texto > Crear contornos. En Figma: selecciona las capas de texto, clic derecho y elige Aplanar. En Inkscape: selecciona el texto, luego usa Trazado > Objeto a trazado. Siempre guarda el SVG editable original por separado antes de convertir a contornos, ya que el texto convertido a contornos ya no puede editarse como texto.

Imágenes externas y referencias

Los archivos SVG pueden referenciar recursos externos: imágenes cargadas vía <image href="/es/logo.png">, fuentes cargadas vía @font-face con una URL, archivos CSS vinculados vía <?xml-stylesheet?>, y patrones o degradados que referencian otros archivos SVG. Cuando el SVG se abre como archivo independiente en un conversor basado en navegador, estas referencias externas casi siempre fallan al cargarse.

La Canvas API renderiza el SVG en un contexto aislado donde las solicitudes de origen cruzado están bloqueadas por razones de seguridad. Un elemento <image> que apunta a https://ejemplo.com/logo.png no se cargará porque el navegador bloquea la obtención de origen cruzado. El resultado es un espacio en blanco donde debería aparecer la imagen. Lo mismo aplica a fuentes alojadas externamente, hojas de estilo y cualquier recurso referenciado por URL.

Incluso las rutas relativas como href="/es/logo.png" fallarán porque el SVG está siendo procesado en memoria por la Canvas API, no servido desde un directorio donde las rutas relativas puedan resolverse. No hay contexto de sistema de archivos para que el SVG referencie.

La solución es incrustar todos los recursos externos directamente en el SVG. Para imágenes, conviértelas a URIs de datos base64: <image href="data:image/png;base64,iVBOR...">. Para fuentes, usa una declaración @font-face codificada en base64 dentro de un bloque <style> dentro del SVG (aunque convertir el texto a contornos suele ser más simple y fiable). Para CSS, copia todas las reglas en un elemento <style> en línea dentro de la etiqueta <svg>.

Problemas de ViewBox, ancho y alto

El atributo viewBox define el sistema de coordenadas de un SVG. Le dice al renderizador qué porción del lienzo SVG infinito mostrar y cómo escalar el contenido. Cuando viewBox falta o es incorrecto, los resultados van desde una salida en blanco hasta un icono que muestra solo una esquina del diseño o se renderiza con la relación de aspecto incorrecta.

ViewBox faltante: Si el SVG tiene width y height pero no viewBox, algunos renderizadores inferirán el viewBox de las dimensiones, pero la Canvas API puede que no. El enfoque más seguro es siempre incluir un viewBox explícito. Si tu SVG está diseñado a 100x100 unidades, añade viewBox="0 0 100 100" al elemento raíz.

ViewBox no coincide con el contenido: Si las coordenadas del viewBox no abarcan todo el contenido del SVG, partes del diseño serán recortadas. Por ejemplo, si tu icono tiene elementos que se extienden hasta x=120 pero el viewBox solo cubre de 0 a 100, las 20 unidades más a la derecha son invisibles. Abre el SVG en un editor de texto, examina los valores del viewBox y ajústalos para contener todos los elementos visibles.

Ancho/alto establecido a 0 o valores muy pequeños: Algunas herramientas de exportación SVG establecen el ancho y alto a valores muy pequeños como 1px o 0, dependiendo del CSS para escalar el SVG cuando se muestra en una página web. Cuando la Canvas API lee estas dimensiones, puede renderizar el SVG a 1x1 píxel y luego ampliar, produciendo un resultado completamente en blanco o muy borroso. Establece el ancho y alto a al menos 256 píxeles para dar a la Canvas API un tamaño de renderizado razonable.

Dimensiones basadas en porcentaje: Un SVG con width="100%" height="100%" no tiene tamaño intrínseco. La Canvas API necesita valores absolutos en píxeles para crear una superficie de renderizado. Reemplaza las dimensiones en porcentaje con valores absolutos como width="512" height="512".