Cómo saber si un SVG contiene una imagen ráster

Sí, un SVG puede contener una imagen ráster. Puede incluir trazados vectoriales y píxeles en el mismo documento o ser poco más que un envoltorio para un PNG o JPEG. La extensión .svg indica el formato del contenedor, no si cada parte visible es vectorial.

La comprobación fiable consiste en revisar tanto los objetos como el código del archivo. Ampliar ayuda a detectar un problema, pero no permite saber si una aplicación rasteriza su vista previa o si los píxeles están realmente almacenados en el SVG.

Para una aplicación WPF, la guía de representación SVG en WPF distingue el original SVG de los objetos de dibujo nativos y la entrega de mapas de bits. Comprueba qué recibe la aplicación antes de tratar una visualización rasterizada como prueba sobre el archivo original.

Qué puede contener un SVG

SVG es un formato gráfico basado en XML y su modelo de contenido abarca más que trazados. La especificación de contenido incrustado de SVG 2 define un elemento <image> que coloca un archivo completo referenciado dentro de un rectángulo. Ese archivo puede ser PNG, JPEG u otro SVG.

Esto crea cuatro estructuras habituales:

El contenido mixto no es automáticamente incorrecto. Un mapa puede utilizar trazados para etiquetas y límites y conservar como ráster una capa sombreada de satélite. Un gráfico de producto puede colocar una insignia editable sobre una fotografía. El problema empieza cuando esperabas que una conversión produjera trazados editables y recibiste píxeles dentro de otro contenedor.

Comprobación 1: revisa los objetos

Abre el SVG en Illustrator, Inkscape, Affinity Designer u otro editor con panel de objetos o capas. Selecciona la zona que sospechas que es ráster.

• Un único objeto rectangular identificado como imagen es una prueba clara de contenido de imagen.
• Los nodos visibles a lo largo de los bordes reales de la ilustración indican geometría vectorial.
• Un trazado de recorte puede ocultar una imagen rectangular; despliega el árbol de capas u objetos antes de decidir.
• Tener trazados en otra parte no demuestra que todo el documento sea vectorial. Un archivo puede contener ambos.

Esta comprobación sirve para diseñadores que no quieran leer XML, pero tiene un límite: un objeto rectangular <image> puede referenciar otro SVG. La revisión del código indica qué carga realmente.

Comprobación 2: revisa el código SVG

Haz una copia y abre el archivo .svg en un editor de texto plano. Busca <image. Si no hay un elemento de imagen, está ausente el mecanismo habitual de imágenes incrustadas. Si encuentras uno, lee su valor href.

Un PNG incrustado suele empezar así:

<image href="data:image/png;base64,iVBORw0KGgo..." />

Un JPEG incrustado suele empezar por data:image/jpeg;base64,. La referencia de URL de datos de MDN explica que los datos se colocan directamente en la URL, opcionalmente codificados en Base64. Es normal que esta forma tenga un contenido muy largo e ilegible.

Un ráster vinculado se parece más a esto:

<image href="photos/product-shot.png" />

Ese PNG no está almacenado dentro del SVG. El documento depende de un archivo separado en esa ruta. Si mueves o envías el SVG sin la imagen, la ilustración puede desaparecer.

Por último, esto no demuestra contenido ráster:

<image href="icons/mark.svg" />

La referencia de <image> de MDN señala expresamente que el elemento puede mostrar formatos ráster u otro SVG. Comprueba el tipo de contenido o la extensión antes de clasificarlo.

Tres estructuras dentro o junto a un SVG

Incrustar y vincular plantean problemas distintos

Al importar una imagen, Inkscape puede vincularla o incrustarla. Su guía de importación de imágenes explica claramente el compromiso: vincular mantiene pequeño el SVG, pero hace que dependa de la ubicación de la imagen; incrustar hace autónomo el SVG, pero aumenta su tamaño.

La diferencia importa al entregar:

• Ráster incrustado: transportable como un único archivo, pero sigue limitado por la resolución y suele ser mucho mayor de lo esperado.
• Ráster vinculado: más fácil de actualizar de forma independiente, pero frágil al moverlo entre carpetas, equipos, sitios web o proveedores.
• Trazados vectoriales: editables como geometría, pero solo si el original se trazó o dibujó como trazados desde el principio.

Incrustar es empaquetar, no vectorizar. Base64 no convierte píxeles en curvas. Si preparas ilustraciones para una plataforma de imágenes de archivo, sigue la revisión de entregas vectoriales a Adobe Stock para las comprobaciones adicionales de mesa de trabajo, edición y origen.

Por qué ampliar no basta

Si la zona sospechosa se vuelve cuadriculada con mucho aumento en varios visores, probablemente sea ráster. Aun así, un visor puede rasterizar un SVG correcto para una miniatura, un lienzo, una vista previa de impresión o una caché de importación. A la inversa, un PNG incrustado de alta resolución puede verse suave con aumento normal y pasar inadvertido dentro del documento.

Utiliza el aumento como comprobación del síntoma y confirma después con objetos o código. La guía general de por qué un SVG se ve pixelado distingue el contenido incrustado del comportamiento del visor y el renderizado de iconos pequeños. Para aplicaciones de lienzo, compara las importaciones de imágenes y trazados editables en Konva antes de interpretar un único nodo de imagen como problema del SVG original.

Decide si conservar, volver a vincular o reemplazar

Conserva el ráster cuando los píxeles sean intencionados

Las fotografías, escaneos, texturas, iluminación suave y detalles pintados complejos suelen corresponder a ráster. Si el SVG sirve para combinar esa imagen con etiquetas o superposiciones vectoriales, un archivo mixto puede ser el diseño correcto. Confirma que el ráster tenga resolución suficiente al tamaño físico final y decide si la entrega debe ser autónoma o incluir recursos vinculados.

Vuelve a vincular o incrusta cuando el problema sea el traslado

Si una imagen vinculada desaparece en otro equipo, empaqueta el SVG y su imagen con la misma estructura relativa de carpetas o incrusta la imagen antes de entregar. Esto resuelve el recurso ausente. No hace que la imagen sea editable como trazados.

Sustituye el ráster cuando se prometieron trazados

Si un conversor envolvió un logotipo plano, icono o dibujo lineal en un SVG, busca el PNG o JPEG original. Si no está disponible, extrae la imagen incrustada o exporta ese objeto a su tamaño nativo. Después convierte la imagen en trazados vectoriales, revisa las formas y reemplaza el objeto <image> por el resultado vectorial verificado.

PerfectVector resulta útil para reconstruir diseños planos adecuados como formas editables. No convierte mágicamente la fotografía de tono continuo en un conjunto pequeño y fiel de trazados. Para una foto, conserva el ráster salvo que busques una interpretación deliberadamente posterizada. Si necesitas una copia PNG de entrega a partir de un SVG aprobado, renderiza directamente al tamaño final de píxeles con Sharp; ampliar un PNG pequeño no añade detalle a ninguna imagen ráster incrustada en ese SVG.

Los usuarios de Scratch deben comprobar por qué Convert to Vector no traza un mapa de bits antes de exportar otro envoltorio.

Reconstruye los efectos rasterizados al exportar

Algunos SVG son principalmente vectoriales, pero contienen una sombra, desenfoque, textura o efecto no compatible rasterizado. Decide si el efecto debe permanecer editable y ser fácil de trasladar. Reconstruye un efecto sencillo con funciones vectoriales compatibles, aplánalo deliberadamente como ráster a la resolución de entrega o elimínalo. Trazar una sombra suave suele crear formas con ruido en lugar de mejorar el efecto.

Revisión de entrega para SVG mixtos

Antes de enviar el archivo a una web, imprenta, cortadora o colaborador:

1. Busca en el código <image, data:image/, .png, .jpg y .jpeg.
2. Confirma si cada recurso referenciado debe ser ráster, vectorial o estar ausente.
3. Mueve temporalmente los archivos vinculados y vuelve a abrir el SVG para detectar dependencias rotas.
4. Selecciona la ilustración importante y verifica que las partes que deban ser editables sean trazados.
5. Compara las dimensiones nativas en píxeles del ráster con su tamaño final de visualización o impresión.
6. Abre de nuevo la copia de entrega en otra aplicación.
7. Conserva el original y una prueba ráster cuando la apariencia importe más que la edición.

Para corte o fabricación, elimina el contenido ráster decorativo del archivo de máquina y realiza la comprobación previa de SVG para corte. Una cortadora sigue trazados; no convierte una fotografía incrustada en un contorno de corte.

Preguntas frecuentes

¿Un SVG puede contener un PNG o JPEG? Sí. Un elemento de imagen SVG puede referenciar un PNG o JPEG como archivo separado o incluir sus datos dentro del SVG. El ráster conserva su comportamiento original basado en píxeles.

¿Una etiqueta de imagen siempre significa que el SVG contiene una imagen ráster? No. El elemento de imagen también puede referenciar otro SVG. Revisa su valor href o el antiguo xlink:href para identificar el tipo de contenido, la URL de datos o el nombre de archivo antes de clasificarlo.

¿Cómo sé si el ráster está incrustado o vinculado? Una imagen incrustada suele tener un href que empieza por data:image, de modo que sus bytes están dentro del SVG. Una imagen vinculada tiene una ruta o URL como images/photo.png y depende de ese recurso independiente.

¿Puedo eliminar una imagen incrustada de un SVG? Sí. Elimínala si no es necesaria, reemplázala por un recurso ráster intencionado o vectoriza un diseño plano adecuado y sustituye la imagen por los trazados resultantes. Conserva una copia de seguridad antes de editar el XML.

¿Por qué mi SVG contiene trazados y una imagen? Es un SVG mixto. Puede combinar intencionadamente una foto con superposiciones vectoriales, o un exportador puede haber rasterizado un efecto. Revisa qué partes necesitan edición antes de cambiarlo.

Fuentes

1. W3C — Contenido incrustado de SVG 2 — Define el elemento <image>, su href y los recursos ráster o SVG que puede referenciar.
2. MDN — SVG <image> — Referencia práctica del contenido de imagen compatible y su dimensionado.
3. Guía de iniciación de Inkscape — Importar imágenes — Explica las imágenes importadas vinculadas e incrustadas y el compromiso al trasladarlas.
4. MDN — URL de datos — Documenta el esquema data: utilizado habitualmente para almacenar datos de imagen dentro de un SVG.

¿Has encontrado un mapa de bits envuelto donde debía haber trazados editables? Convierte el diseño plano original en un vector real, abre de nuevo el SVG y verifica que los objetos importantes ahora se seleccionen como formas.