¿Por qué mi SVG se ve borroso? Causas comunes y soluciones
Los SVG son archivos vectoriales, así que no deberían perder nitidez a ningún tamaño. Si tu SVG se ve borroso, algo específico está fallando; aquí te mostramos cómo detectarlo.
Tu "SVG" podría ser en realidad una imagen rasterizada
La causa más común: algunas herramientas producen un archivo SVG que simplemente envuelve un PNG o JPEG codificado en Base64 dentro de una etiqueta `<image>`, en lugar de vectorizar trazados reales. Tiene la extensión .svg, pero sigue siendo una imagen rasterizada por dentro, así que se difumina al escalarse exactamente igual que lo haría un PNG. Abre el archivo en un editor de texto; si ves una larga cadena en Base64 en lugar de elementos `<path>`, ahí tienes la respuesta. Consulta PNG vs SVG para entender por qué importa esta distinción.
El trazado se configuró con un detalle muy alto sobre una imagen con ruido
De forma contraintuitiva, vectorizar una imagen de origen de baja calidad o muy comprimida con un detalle muy alto puede producir una enorme cantidad de segmentos de trazado diminutos y dentados que se ven ásperos en lugar de suaves: el trazado está reproduciendo fielmente el ruido del archivo original. Intenta volver a vectorizar desde una imagen de origen más limpia, o aumenta el ajuste de suavizado para que el algoritmo favorezca curvas más suaves y en menor número.
El SVG se está rasterizando en algún punto de tu proceso
Algunas plataformas (ciertos gestores de imágenes de CMS, navegadores antiguos o ajustes de exportación en herramientas de diseño) convierten un SVG en una imagen rasterizada a una resolución fija antes de mostrarlo; en ese momento, hereda todos los problemas de escalado de un PNG. Revisa si la plataforma que usas tiene una opción para servir o incrustar el SVG de forma nativa en lugar de convertirlo.
Cómo solucionarlo
- Vuelve a vectorizar desde el PNG original usando una herramienta que genere datos de trazado reales; prueba el convertidor gratuito de PNG a SVG e inspecciona el resultado antes de usarlo.
- Si el detalle se ve dentado, aumenta el ajuste de suavizado y vuelve a descargar.
- Si una plataforma está rasterizando tu SVG al mostrarlo, busca un ajuste para incrustarlo o enlazarlo como un SVG nativo en lugar de una imagen convertida.
Preguntas frecuentes
¿Cómo puedo comprobar rápidamente si mi SVG es realmente vectorial?
Abre el archivo en un editor de texto y busca elementos `<path>`, `<circle>` o similares. Si en cambio ves una larga cadena en Base64 dentro de una etiqueta `<image>`, es una imagen rasterizada disfrazada con extensión SVG.
¿Hacer zoom en el navegador vuelve borroso un SVG?
No; un SVG genuinamente vectorial se mantiene nítido a cualquier nivel de zoom del navegador. Si se difumina al hacer zoom, es muy probable que el archivo sea una imagen rasterizada y no trazados vectoriales reales.
¿Listo para convertir tu propia imagen? png to svg converter.
png to svg converterLecturas relacionadas
Por qué un archivo genuinamente vectorial se comporta de forma tan distinta a uno rasterizado.
Un caso de uso donde un SVG falso, envuelto en raster, fallará por completo.