> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# Por qué tu SVG se ve pixelado y cómo solucionarlo

> Un SVG real también puede mostrar píxeles: una imagen incrustada, un visor que rasteriza o falta de nitidez a tamaño de icono. Aquí tienes un diagnóstico rápido y cada solución.

Source: https://perfectvector.com/es/blog/svg-looks-pixelated

Language: es
Author: Jay Lee
Published: 2026-08-09T08:00:00+09:00
Updated: 2026-09-11T08:00:00+09:00

Se supone que un SVG se amplía sin perder nitidez, así que, si aun así muestra bordes en bloques, empieza por tres causas habituales. El archivo puede contener píxeles reales, una aplicación puede estar rasterizando su vista previa o su importación, o un vector auténtico puede simplemente verse poco nítido en una cuadrícula de píxeles diminuta. Cada causa tiene una solución distinta, y un diagnóstico breve te indica cuál tienes delante. Este artículo *no* trata de un logotipo PNG o JPG que se pixela al ampliarlo. Ese archivo nunca fue un SVG, y [ese problema tiene su propia solución](https://perfectvector.com/es/blog/pixelated-logo).

> **El diagnóstico de 30 segundos**
>
> * **Amplía mucho (500% o más) en dos visores.** Los bloques en todos los visores apuntan a contenido ráster. Si solo una aplicación muestra bloques, probablemente esté rasterizando la vista previa.
> * **Abre el SVG en un editor de texto.** Una etiqueta `<image>` con un bloque largo de `data:image/png;base64,…` significa que tu «vector» es un mapa de bits disfrazado.
> * **Decide tras comprobar el archivo.** La ampliación despierta la sospecha; un elemento `<image>` o un objeto de imagen rectangular confirma los píxeles incrustados.

## Causa 1: hay píxeles dentro de tu SVG

Esta es la trampa de la imagen incrustada. SVG es un formato contenedor, y [la especificación SVG 2 permite que un elemento `<image>` incruste contenido ráster o lo referencie](https://www.w3.org/TR/SVG2/embedded.html). Si necesitas distinguir un PNG enlazado de datos incrustados o de un SVG anidado, utiliza la [auditoría de SVG con contenido mixto](https://perfectvector.com/es/blog/svg-contains-raster-image). Las herramientas pueden utilizar esa capacidad de varias maneras:

* **Conversiones falsas.** Algunas herramientas de «PNG a SVG» no vectorizan nada. Envuelven tu mapa de bits en una etiqueta `<image>` y lo devuelven con extensión .svg. Se amplía tan mal como el PNG original porque *es* el PNG original.
* **Exportaciones que rasterizan las partes difíciles.** Las aplicaciones de diseño exportan como trazados lo que pueden y rasterizan silenciosamente lo que no: sombras paralelas, desenfoques, mallas de degradado, rellenos de imagen. Así termina un logotipo nítido en todas partes excepto en una curva o un efecto: el mismo misterio de «parcialmente pixelado» que llena los foros de diseño.
* **Contenido fotográfico.** Una fotografía no puede convertirse en trazados limpios, así que las herramientas que «convierten» fotos a SVG suelen incrustarlas o producir [una aproximación posterizada](https://perfectvector.com/es/blog/convert-photo-to-svg). Las herramientas cartográficas incluso lo hacen deliberadamente con las capas de sombreado, lo cual es válido porque el sombreado tiene tonos continuos por naturaleza.
* **Contenedores de formato.** Un archivo puede llevar datos vectoriales que una aplicación lee y otra no. Cuando una aplicación encuentra datos que no entiende, recurre a la vista previa ráster incluida, y ves píxeles en un programa mientras otro muestra vectores limpios.

**Cómo confirmarlo:** abre el .svg en cualquier editor de texto y busca `<image`. Un bloque base64 es el culpable. En Inkscape o Illustrator, haz clic en la región borrosa: si la selección es un único objeto rectangular de «imagen» en lugar de trazados, la respuesta es la misma. Es la misma comprobación que detecta [SVG falsos de herramientas de IA y exportadores](https://perfectvector.com/es/blog/ai-svg-generator-vs-vectorizer), y lleva menos de un minuto.

**La solución:** los píxeles deben convertirse en trazados, lo que significa vectorizar de verdad el contenido ráster. Pasa la imagen original (o la incrustada) por [una conversión real de imagen a vector](https://perfectvector.com/es/image-to-vector) y sustituye el elemento `<image>` por el resultado vectorizado. Si el contenido incrustado es una fotografía, la vectorización tiene sus propios límites; a veces la solución honesta es aceptar una imagen ráster donde corresponde.

**La pista, en el propio archivo**

![Un archivo SVG abierto en un editor de texto muestra una etiqueta image con un bloque largo de datos base64 en lugar de elementos de trazado vectorial](https://perfectvector.com/blog/svg-looks-pixelated/embedded-image-code.webp)

*Un vector real está formado por elementos de trazado. Una etiqueta image con un bloque base64 es un mapa de bits con extensión .svg.*

## Causa 2: el archivo está bien, el visor lo rasteriza

Si un navegador o Inkscape muestra trazados nítidos mientras una aplicación muestra bloques, deja de editar el archivo. El problema está en el proceso de importación o vista previa de esa aplicación:

* **Algunos procesos de importación de aplicaciones** rasterizan un SVG al tamaño de importación o de vista previa. Si después amplías esa imagen en caché, estás ampliando un mapa de bits. La solución en la aplicación consiste en importar o renderizar a la resolución de destino.
* **After Effects** puede rasterizar continuamente las capas vectoriales mientras la capa se transforma; Adobe documenta el [interruptor Continuously Rasterize para capas vectoriales](https://helpx.adobe.com/after-effects/desktop/work-with-layers/manage-layers/layers.html). Si solo se ve irregular la vista previa de la composición, revisa su resolución y el interruptor de la capa antes de cambiar el SVG.
* **Illustrator** puede mostrar deliberadamente la ilustración mediante [Pixel Preview](https://helpx.adobe.com/illustrator/using/viewing-artwork.html). Desactiva **View > Pixel Preview** antes de concluir que el propio trazado está pixelado.
* **Miniaturas y vistas previas.** Las miniaturas del gestor de archivos y las vistas previas rápidas son rasterizaciones de baja resolución. No te dicen nada sobre el archivo.

La prueba universal: abre el mismo archivo en un navegador o en Inkscape. Si ahí se ve nítido, tu SVG está bien y la solución está en los ajustes de importación o vista previa de la otra aplicación.

Para recursos de juegos, consulta [el flujo de importación y rasterización de SVG de Godot](https://perfectvector.com/es/blog/godot-svg-import) o [el método de importación de SVG de Unity para tu editor y sistema de interfaz](https://perfectvector.com/es/blog/unity-svg-import) antes de suponer que el original carece de trazados vectoriales.

## Causa 3: un vector real que pierde nitidez a tamaños pequeños

Los iconos se usan a tamaños de entre 16 y 24 píxeles, y a ese tamaño una curva matemáticamente perfecta debe encajar en una cuadrícula de píxeles gruesa. El suavizado de bordes convierte los píxeles de los bordes en grises, y el resultado se percibe «ligeramente borroso», sobre todo con trazos finos y posiciones de medio píxel. Al ampliar aparecen bordes vectoriales perfectamente nítidos, lo que permite descartar la trampa de la imagen incrustada.

Las soluciones corresponden al diseño: alinea los bordes horizontales y verticales con píxeles enteros al tamaño de destino, mantén anchos de trazo en valores de píxeles enteros y prefiere conjuntos de iconos dibujados para el tamaño que utilizas. Los datos de trazado de gran precisión que exportan las herramientas de diseño pueden empeorar la falta de nitidez a tamaños diminutos; los trazados simplificados se renderizan de forma más predecible.

## Causa y solución, de un vistazo

| Qué ves                                                               | La causa                                                        | La solución                                                                       |
| --------------------------------------------------------------------- | --------------------------------------------------------------- | --------------------------------------------------------------------------------- |
| Bloques en todos los visores, con un elemento `<image>` en el archivo | Imagen ráster incrustada en el SVG                              | Vectoriza de verdad el contenido y sustituye el `<image>`                         |
| Una curva nítida y otra pixelada                                      | La exportación rasterizó un efecto o relleno                    | Reconstruye ese elemento como trazados o vectoriza todo el gráfico                |
| Nítido en el navegador, pixelado en una aplicación                    | Esa aplicación rasteriza al importar o en la vista previa       | Corrige los ajustes de importación o vista previa de la aplicación, no el archivo |
| Nítido al 100%, borroso como icono pequeño                            | Falta de nitidez por la cuadrícula de píxeles en un vector real | Alinea bordes y trazos con los píxeles al tamaño de destino                       |
| «Pixelado» solo en una miniatura                                      | Rasterización de baja resolución de la vista previa             | Ignórala; comprueba el renderizado real                                           |

## Cómo evitar píxeles en tus SVG

La prevención depende principalmente del momento de conversión o exportación. Antes de confiar en cualquier SVG, realiza una vez la comprobación en un editor de texto: elementos `<path>`, bien; bloques `<image>`, no es un vector. Al convertir una imagen, usa un conversor que vectorice en lugar de envolver y confirma el resultado seleccionando formas individuales. Al exportar desde una herramienta de diseño, aplana o expande primero los efectos en trazados, ya que todo lo que el exportador no pueda expresar como vectores se entregará como píxeles. Y ten presente [qué es realmente un SVG](https://perfectvector.com/es/blog/what-is-an-svg-file): la extensión promete un formato, no un contenido.

## Cómo se ve esto con PerfectVector

PerfectVector evita esta trampa: vectoriza tu imagen en trazados auténticos, nunca la envuelve. Sube un PNG o JPG y el resultado son formas que puedes seleccionar, recolorear y ampliar sin límite, con cada color como objeto editable independiente y sin ningún elemento `<image>` en el archivo. Si acabas de descubrir que tu «SVG» era un mapa de bits disfrazado, [convierte correctamente la imagen original](https://perfectvector.com/es/image-to-vector) y realiza la misma comprobación con un editor de texto en el resultado. Ver la diferencia una vez es la forma más rápida de no volver a caer en la trampa. Las primeras conversiones son gratis y no requieren tarjeta de crédito.

**Imagen incrustada, ampliada**

![Un logotipo dentro de un archivo SVG muy ampliado muestra bloques de píxeles porque el archivo contiene un mapa de bits incrustado](https://perfectvector.com/blog/svg-looks-pixelated/fake-svg-zoomed.webp)

*Píxeles disfrazados: la ampliación revela el mapa de bits oculto dentro del archivo .svg.*

**Vector real, ampliado**

![El mismo logotipo como SVG realmente vectorizado al mismo nivel de ampliación, con bordes de trazado perfectamente nítidos](https://perfectvector.com/blog/svg-looks-pixelated/true-svg-zoomed.webp)

*El mismo logotipo vectorizado de verdad en trazados: nítido a cualquier ampliación, con bordes que siguen siendo matemáticos.*

## Preguntas frecuentes

**¿Por qué mi SVG se ve pixelado al ampliarlo?**
La ampliación por sí sola no demuestra que el SVG contenga píxeles, porque algunas aplicaciones rasterizan sus vistas previas. Abre el archivo en un navegador o en Inkscape y luego busca un elemento `<image>` en su código, o selecciona el área borrosa y comprueba si es un objeto de imagen rectangular. Si esas comprobaciones confirman contenido ráster incrustado, vectorízalo y sustituye el elemento de imagen.

**¿Cómo sé si mi SVG tiene una imagen incrustada?**
Ábrelo en cualquier editor de texto y busca `<image`. Una cadena larga data:image/png;base64 es un mapa de bits incrustado en el archivo. También puedes hacer clic en el área borrosa en Inkscape o Illustrator: si se selecciona como un único objeto de imagen rectangular en lugar de trazados, está incrustada.

**¿Por qué mi SVG está pixelado en una aplicación, pero se ve bien en el navegador?**
La aplicación lo está rasterizando. Los motores de juegos rasterizan los SVG al tamaño de importación, las vistas previas de After Effects rasterizan a la resolución de la composición y algunas aplicaciones renderizan las imágenes incrustadas con interpolación en bloques de forma predeterminada. Si un navegador o Inkscape lo muestra nítido, el archivo está bien; ajusta la configuración de la aplicación.

**¿Puedo arreglar un SVG que contiene una imagen incrustada?**
Sí. Toma el ráster original (o extrae el incrustado), pásalo por un vectorizador real y utiliza el resultado vectorizado en lugar del elemento de imagen. Si el contenido incrustado es una foto, espera una aproximación vectorial estilizada en lugar de una copia fiel, porque las fotos no se reducen a trazados limpios.

**¿Por qué mis iconos SVG se ven borrosos a tamaños pequeños?**
Suele ser falta de nitidez por la cuadrícula de píxeles, no una imagen incrustada. A tamaños de entre 16 y 24 píxeles, el suavizado de bordes convierte los bordes desalineados en píxeles grises. Alinea los bordes y los anchos de trazo con píxeles enteros al tamaño de destino para mejorar la nitidez de los iconos. Amplía para confirmar que los propios trazados son nítidos.

**¿Convertir un PNG a SVG siempre produce vectores reales?**
No. Algunas herramientas vectorizan de verdad la imagen en trazados y otras solo envuelven el PNG en un contenedor SVG. El resultado solo se amplía sin perder nitidez en el primer caso. Busca etiquetas image en cualquier archivo convertido y prefiere un conversor que muestre formas editables en el resultado.

## Fuentes

1. [W3C: contenido incrustado de SVG 2](https://www.w3.org/TR/SVG2/embedded.html) — Define el elemento `<image>` de SVG y el contenido ráster dentro de un documento SVG.
2. [Adobe Illustrator: visualización de ilustraciones](https://helpx.adobe.com/illustrator/using/viewing-artwork.html) — Documenta Pixel Preview y otros modos de visualización.
3. [Adobe After Effects: capas](https://helpx.adobe.com/after-effects/desktop/work-with-layers/manage-layers/layers.html) — Documenta el interruptor Continuously Rasterize para capas vectoriales.
4. [Adobe Illustrator: creación de ilustraciones ajustadas a píxeles](https://helpx.adobe.com/in_hi/illustrator/how-to/pixel-perfect.html) — Explica la alineación con la cuadrícula de píxeles en ilustraciones pequeñas.

***

¿Desconfías de un archivo con el que estás trabajando? Haz la prueba de ampliación y después [convierte la imagen original en un SVG real basado en trazados](https://perfectvector.com/es/image-to-vector) para comparar. Los píxeles se esconden; los trazados, no.

## Explore

- [Read the HTML article](https://perfectvector.com/es/blog/svg-looks-pixelated)
- [Importar SVG en PixiJS: elige Graphics o una textura](https://perfectvector.com/es/blog/pixijs-svg-import.md)
- [Imágenes SVG en fpdf2: conserva los trazados en tu PDF de Python](https://perfectvector.com/es/blog/fpdf2-svg-image.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)