Cómo mantener un fondo transparente al convertir a SVG
Un SVG no tiene fondo por defecto, así que un recuadro blanco significa que algo lo añadió. Aquí tienes cómo conservar la transparencia al convertir un PNG a SVG y qué revisar.
En esta página
Este es el detalle que lo vuelve tan confuso: un SVG no tiene ningún fondo por defecto. Es transparente a menos que algo coloque una forma sólida detrás de tu diseño. Así que, cuando tu SVG convertido aparece con un recuadro blanco alrededor, la pregunta útil es: ¿qué añadió ese blanco? Normalmente es una de tres cosas: una forma de fondo dentro del diseño, un ajuste de exportación que rellena el lienzo o un conversor que trazó el área vacía como un bloque blanco en lugar de dejarla intacta. La solución depende de cuál sea tu caso y de si el archivo original tenía transparencia real desde el principio. Vamos a aclararlo.
La versión rápida
- Un SVG es transparente por defecto. Un fondo blanco significa que algo lo añadió.
- ¿Estás convirtiendo un PNG transparente? Usa un conversor que respete el canal alfa, para que trace el sujeto y deje vacío el resto. Convierte un PNG a SVG y revisa el resultado.
- ¿Partes de un JPG? No puede ser transparente, así que no hay nada que conservar. Elimina primero el fondo y luego convierte.
- ¿Exportas desde Illustrator o Inkscape? Borra el rectángulo blanco de fondo en el lienzo y revisa los ajustes de exportación.
- Verifica siempre: coloca el SVG sobre un fondo de color. Si todavía ves blanco, hay algo ahí.
Primero, ¿qué está añadiendo el blanco?
Antes de corregir nada, identifica de dónde viene el blanco. Es una de estas tres situaciones, y la solución es diferente en cada una.
| Tu situación | Por qué se ve blanco | La solución |
|---|---|---|
| Convertir un PNG transparente a SVG | El conversor rellenó el área vacía o la trazó como una forma | Usa un conversor que respete la transparencia; elimina cualquier forma de fondo suelta que haya añadido |
| Convertir un JPG, o un PNG con un fondo blanco sólido | Nunca hubo transparencia que conservar | Elimina primero el fondo y luego convierte |
| Exportar un SVG que diseñaste en Illustrator o Inkscape | Hay un rectángulo de fondo en el lienzo, o un ajuste de exportación añade un relleno | Elimina la forma de fondo; revisa la opción de transparencia al exportar |
La fila del medio es la que más confunde, así que empieza por ahí.
Si tu archivo no es realmente transparente, ningún conversor puede arreglarlo
Esta es la parte que los foros suelen saltarse. Un JPG no puede almacenar transparencia, nunca. Si tu logotipo es un JPG, tiene un fondo sólido incrustado en los píxeles, incluso cuando ese fondo es blanco y parece "nada". Convertirlo a SVG no lo quitará. El trazado incluirá el fondo como una forma o quedará justo encima de él. (Convertir un JPG suele ser una tarea un poco distinta, como explica cómo convertir un JPG a SVG.)
Algunos PNG tienen el mismo problema. Un PNG puede almacenar transparencia, es decir, un canal alfa, pero muchos se guardaron con un relleno blanco plano. Si no sabes cuál tienes, abre el archivo sobre un fondo oscuro. ¿Ves un rectángulo blanco alrededor de tu logotipo? Entonces no es transparente. Solo lo parecía sobre una página blanca.
La solución en ambos casos es la misma: elimina el fondo antes de convertir, para que el conversor tenga transparencia real con la que trabajar. Recorta el sujeto en cualquier editor de fotos, exporta un PNG transparente y luego trázalo. (PNG vs SVG explica por qué un PNG puede contener transparencia y un JPG no.)
Convertir un PNG realmente transparente a SVG
Si tu fuente es un PNG genuinamente transparente, mantener esa transparencia durante la conversión depende sobre todo del conversor que uses. En principio, el trabajo es simple: trazar el sujeto visible como trazados vectoriales y dejar el área transparente como espacio vacío, no como una forma blanca. Un buen conversor hace exactamente eso. Uno descuidado hace en cambio una de estas dos cosas molestas:
- Rellena el área transparente con blanco, y terminas con un recuadro sólido.
- Traza el borde del área transparente como un trazado propio, y terminas con un rectángulo invisible pero real alrededor de tu diseño, que aparece en cuanto lo colocas sobre un fondo de color o lo envías a una máquina de corte. A quienes hacen manualidades les pasa todo el tiempo. Es el mismo recuadro suelto alrededor de un diseño para Cricut.
Así que lo correcto es convertir con una herramienta que maneje limpiamente el canal alfa y luego verificar el resultado (más sobre eso abajo). Un logotipo transparente es la versión más común de este caso.
Cómo se ve esto con PerfectVector
PerfectVector lee la transparencia de tu PNG y traza solo lo que realmente existe. La parte visible de tu logotipo se convierte en trazados vectoriales limpios y editables, y el área transparente se mantiene transparente: sin recuadro blanco, sin rectángulo delimitador oculto. El resultado se puede colocar sobre cualquier fondo de color, un sitio web, una hoja de stickers o un tapete de Cricut, y el color que está detrás simplemente se ve a través. Puedes convertir tu PNG transparente y revisarlo contra un fondo de color en unos segundos. Las primeras conversiones son gratis, sin tarjeta de crédito.
Para ser directos: PerfectVector conserva la transparencia que ya está en tu archivo. No puede inventar una transparencia que nunca existió. Si tu fuente es un JPG o un PNG con relleno blanco, recorta primero el fondo, como se explicó arriba, y entonces la conversión se mantendrá limpia.
Cómo comprobar que realmente funcionó
No confíes en la miniatura. Un SVG transparente se ve idéntico a uno con fondo blanco sobre una página blanca, que es exactamente la razón por la que muchas personas creen que todo está bien hasta que no lo está. Dos comprobaciones rápidas:
- Colócalo sobre un color. Pon el SVG sobre un fondo de color en tu navegador, Figma, Canva o Design Space. La transparencia real deja pasar el color. Un recuadro blanco no.
- Busca un rectángulo suelto. Abre el SVG y selecciona las formas. Si hay un rectángulo de tamaño completo detrás del diseño, elimínalo. Ese suele ser el culpable en la mayoría de los casos de "sigue viéndose blanco".
Exportar un SVG que diseñaste tú mismo (el otro caso)
Si no estás convirtiendo una imagen raster sino exportando un SVG que dibujaste tú, el blanco suele venir de tu propio lienzo, no de un conversor:
- Illustrator: elimina cualquier rectángulo blanco que esté funcionando como fondo. El color de la mesa de trabajo no se exporta de todas formas, así que una vez que desaparece la forma de fondo, guarda o exporta como SVG y será transparente.
- Inkscape: asegúrate de que no haya ningún rectángulo de fondo seleccionado, oculta o elimina la imagen raster original si trazaste una, y exporta el vector. Los SVG de Inkscape son transparentes a menos que hayas añadido un relleno.
En cualquier caso, la regla del principio sigue vigente: un SVG no tiene fondo a menos que tú le hayas dado uno.
FAQ
¿Un SVG admite un fondo transparente? Sí, y es transparente por defecto. Un SVG no tiene fondo a menos que se añada una forma o un relleno, así que la transparencia es el estado inicial, no algo que tengas que activar. El blanco aparece solo cuando algo lo coloca ahí.
¿Cómo guardo un SVG con fondo transparente? Asegúrate de que no haya un rectángulo de fondo en tu diseño y luego exporta sin un relleno de fondo (la mayoría de las herramientas exportan transparente por defecto). Después, verifica colocando el SVG sobre un fondo de color. Si ves blanco, busca y elimina la forma de fondo.
¿Por qué mi SVG tiene un fondo blanco después de convertirlo? O bien el conversor añadió un relleno blanco o trazó el área vacía como una forma, o bien el archivo original no era realmente transparente. Revisa primero la fuente: si es un JPG o un PNG con relleno blanco, no había transparencia que conservar, y tendrás que eliminar el fondo antes de convertir.
¿Puedo convertir un JPG a SVG con fondo transparente? No directamente, porque un JPG no puede almacenar transparencia. Su fondo está incrustado en los píxeles. Elimina primero el fondo (recorta el sujeto y exporta un PNG transparente), y luego convierte ese archivo a SVG.
¿Cómo mantengo la transparencia al convertir un PNG a SVG? Empieza con un PNG genuinamente transparente y usa un conversor que respete el canal alfa, para que trace el sujeto y deje vacío el resto. Luego confirma el resultado sobre un fondo de color y elimina cualquier rectángulo suelto que el trazado haya podido añadir.
¿Cómo elimino un fondo blanco de un SVG? Abre el SVG, selecciona las formas y elimina el rectángulo blanco de tamaño completo que está detrás de tu diseño. Si el blanco forma parte de una imagen raster incrustada en lugar de ser una forma, vuelve a convertir desde una fuente verdaderamente transparente.
¿Tienes un logotipo transparente atrapado como PNG? Conviértelo en un SVG limpio que conserve su transparencia, y luego colócalo sobre un fondo de color para confirmar que se mantuvo.
Más del blog
¿Puedes convertir una foto a SVG? Qué pasa realmente (y cuándo funciona)
Puedes pasar una foto por un conversor de SVG, pero una foto detallada no se convertirá en un vector nítido. Esto es lo que realmente obtienes y qué fotos vale la pena convertir.
Cómo crear un SVG en capas para Cricut
Un SVG en capas corta cada color como su propia pieza. La forma más limpia es separar tu imagen por colores en un SVG primero, para que se suba a Cricut ya organizada en capas.