Cómo convertir de SVG a PNG para impresión y para la web
¿Y para qué convertir de SVG a PNG?
El SVG (Scalable Vector Graphics) debería ser el formato perfecto. Almacena las formas como trazados matemáticos, no como píxeles, por lo que un logotipo puede escalar desde un pequeño favicon hasta una valla publicitaria gigante sin perder ni un ápice de nitidez. Entonces, ¿por qué siquiera hablamos de convertirlo? Porque en el mundo real, muchas plataformas simplemente no lo admiten. Intenta subir un SVG a la biblioteca de medios por defecto de WordPress y te toparás con un bloqueo de seguridad. La mayoría de los servicios de impresión bajo demanda como Printful y Redbubble exigen formatos rasterizados —PNG o JPEG— porque su software de impresión industrial (el RIP, o Raster Image Processor) necesita píxeles, no XML. Incluso los clientes de correo electrónico y las versiones antiguas de Microsoft Office renderizan los SVG de forma inconsistente o simplemente se rinden. Aquí es donde entra en juego el PNG. El PNG proporciona el crucial canal alfa de transparencia, manteniendo el fondo de tu logo transparente en lugar de plantarle una caja blanca detrás. También utiliza compresión sin pérdidas, por lo que no pierdes calidad cada vez que guardas el archivo. ¿La pega? El PNG depende de la resolución. Una vez que lo exportas a 300 píxeles de ancho, no puedes estirarlo a 3000 píxeles sin obtener un desastre pixelado. Esta es la concesión fundamental, y significa que acertar con las dimensiones de exportación desde el principio es el paso más importante de todo el proceso.
Entendiendo la resolución: PPI, DPI y qué números usar
Aclaremos esto primero: la resolución es la parte más confusa de todo este proceso. La gente habla de DPI (puntos por pulgada) y PPI (píxeles por pulgada) como si fueran lo mismo, pero no lo son. PPI es lo que tú controlas. Es la densidad de píxeles de la imagen digital que estás creando. DPI es lo que hace una impresora física: cuántos diminutos puntos de tinta pone sobre el papel. Cuando exportas un SVG a PNG, estás estableciendo los PPI. Para los gráficos web, vamos a quitarnos esto de en medio: la vieja regla de '72 PPI para la web' es una reliquia. No tiene ningún sentido. Lo que importa son las dimensiones absolutas en píxeles. Exporta tus gráficos al tamaño exacto en que se mostrarán. Si el espacio para tu imagen principal es de 1200 × 600 píxeles, exporta un PNG de 1200 × 600 píxeles. Para las pantallas modernas retina y HiDPI, también necesitarás una versión '2x' —en este caso, de 2400 × 1200 píxeles— para que todo se vea nítido. En la impresión es donde los números realmente importan. El estándar de la industria es 300 PPI, calculados al tamaño físico final. Si estás diseñando una tarjeta de visita estándar de 3.5 × 2 pulgadas, tu PNG necesita tener al menos 1050 × 600 píxeles (eso es 3.5 × 300 y 2 × 300). Para un póster grande A4, necesitarás una imagen de 2480 × 3508 píxeles para alcanzar ese objetivo de 300 PPI. La única excepción es para impresiones de gran formato que se ven desde lejos, como pancartas, donde a menudo puedes apañártelas con 150 PPI o incluso 96 PPI porque la distancia hace que los píxeles se mezclen. Esta flexibilidad es la clave de todo. Tu SVG original es independiente de la resolución. Puedes generar un PNG para un icono diminuto y otro para un póster gigante desde el mismo archivo de origen, sin tocar nunca el original. Ese es un poder que simplemente no tienes cuando empiezas con un JPEG de baja resolución.
Cómo convertir de SVG a PNG usando CocoConvert
Como CocoConvert funciona en tu navegador, no necesitas tener Illustrator o Inkscape instalados. La conversión se gestiona en nuestros servidores. El proceso es simple, pero no te limites a pulsar el botón 'Convertir' sin antes revisar los ajustes. La magia está en los detalles. 1. Ve a la página del [conversor de SVG a PNG](/convert/svg-to-png). 2. Arrastra tu archivo SVG al área de subida, o usa el botón 'Elegir archivo'. El límite de 50 MB es generoso; la mayoría de los SVG son diminutos, a menudo por debajo de 1 MB. 3. Este es el paso crucial. Antes de convertir, abre el panel 'Ajustes de salida'. Aquí es donde estableces el ancho deseado en píxeles. Usa los números que calculaste antes —por ejemplo, 2480 px para ese trabajo de impresión A4 a 300 PPI. CocoConvert mantiene automáticamente la relación de aspecto original. Usa la casilla 'Dimensiones personalizadas' solo si necesitas forzar una altura específica y potencialmente distorsionar la imagen. 4. El fondo por defecto es transparente, preservando el canal alfa. Esto es generalmente lo que quieres. Si necesitas un fondo sólido (por ejemplo, para un flujo de trabajo que más tarde solo acepta JPEGs), puedes establecer un color aquí en lugar de arreglarlo después en Photoshop. 5. Haz clic en Convertir y descarga tu nuevo PNG. Un aviso rápido sobre las fuentes: CocoConvert renderiza los SVG usando un motor de navegador estándar. Esto significa que si tu SVG usa una fuente especial a través de una regla CSS `@font-face`, podría no mostrarse correctamente a menos que esa fuente esté incrustada dentro del propio archivo SVG. Cualquiera que haya peleado con el renderizado de fuentes en la web conoce este particular dolor de cabeza. La solución universal es convertir tu texto a contornos (o trazados) en tu editor de vectores antes de exportar el SVG. En Illustrator, es Texto > Crear contornos. En Inkscape, es Trayecto > Objeto a trayecto. Esto convierte el texto en formas y garantiza que se verá idéntico en todas partes, lo cual es una buena práctica para los logotipos de todos modos.
Convertir múltiples archivos SVG en lote
Si estás trabajando con una biblioteca de iconos, un kit de interfaz de usuario o una carpeta de activos de marca, convertir archivos uno por uno es inviable. CocoConvert te permite convertir en lote. Simplemente selecciona todos tus archivos SVG a la vez en el selector de archivos (mantén pulsada la tecla Shift o Ctrl/Cmd) y todos se procesarán con los mismos ajustes de salida. Tus PNG convertidos llegarán en un único y ordenado archivo ZIP. Hay un par de comportamientos que debes entender al ejecutar un trabajo en lote. El ajuste de ancho que elijas se aplica a todos los archivos del lote, pero se preserva la relación de aspecto de cada archivo individual. Por ejemplo, si tienes un icono cuadrado de 24 × 24 px y un banner ancho de 1200 × 300 px en el mismo lote, y estableces el ancho de salida en 512 px, el icono se convertirá en un PNG de 512 × 512 px, y el banner se convertirá en un PNG de 512 × 128 px. Esto es casi siempre lo que quieres para lotes de tamaños mixtos, pero es bueno ser consciente de ello antes de procesar una carpeta enorme. Además, presta atención a los nombres de tus archivos de entrada. El ZIP de salida los reflejará, simplemente cambiando la extensión a .png. Si tus archivos de origen están bien nombrados como `icono-inicio.svg` e `icono-carrito.svg`, tu salida estará igual de organizada. Si se llaman `descarga(1).svg`, tendrás un desastre. Limpia los nombres de tus archivos antes de subirlos. Seamos claros sobre la herramienta adecuada para cada tarea. CocoConvert está diseñado para la comodidad, perfecto para convertir docenas o incluso un par de cientos de archivos. Si tienes una carpeta con más de 500 archivos para un pipeline de automatización masivo, te irá mejor con una herramienta de línea de comandos como Inkscape o ImageMagick. Usa la herramienta que se ajuste a la escala de tu tarea.
Preparar los SVG antes de la conversión: errores comunes
Tu PNG final es tan bueno como el SVG de origen. Es el clásico problema de 'si entra basura, sale basura'. Si tu conversión no se ve bien, el problema casi siempre está al acecho dentro del propio código SVG. Aquí están los culpables más comunes que debes investigar. ¿Faltan piezas o hay cajas blancas extrañas? Esto a menudo apunta a máscaras o trazados de recorte rotos. Los SVG pueden usar una forma para enmascarar otra, but si la referencia entre la máscara y la forma se rompe (a menudo al exportar desde una aplicación y editar en otra), el renderizador se confunde. Si ves esto, abre el SVG en un editor de texto y busca elementos `clipPath` o `mask` con referencias de ID incorrectas. ¿El tamaño de salida es incorrecto? El culpable es probablemente un atributo `viewBox` ausente. Un SVG bien formado necesita un `viewBox` (como `viewBox='0 0 100 100'`) para definir su sistema de coordenadas interno y permitir que escale correctamente. Algunas herramientas exportan SVG solo con los atributos `width` y `height`, lo que puede hacer que los renderizadores ignoren el tamaño de salida que solicitaste y simplemente usen las dimensiones literales en píxeles del archivo. La solución es editar el SVG y añadir un `viewBox` que coincida con las dimensiones del documento. ¿Secciones pixeladas en un archivo vectorial? Tu SVG podría contener una imagen rasterizada incrustada. Sí, los SVG pueden tener JPEGs o PNGs ocultos dentro de etiquetas `<image>`. Si un logotipo tiene una textura fotográfica, por ejemplo, esa textura solo será tan nítida como la imagen original incrustada. Escalar todo el archivo a 4000 píxeles de ancho no va a despixelar mágicamente esa parte. ¿Colores incorrectos para impresión? Recuerda que tanto SVG como PNG son formatos RGB, que viven en el espacio de color sRGB por defecto. PNG no puede almacenar datos de color CMYK. Si tu imprenta requiere sí o sí un archivo CMYK, no puedes llegar ahí convirtiendo a PNG. Tendrás que volver a tu editor de vectores y exportar un formato nativo de CMYK como TIFF o un PDF configurado correctamente.
Optimizar el PNG después de la conversión
No te sorprendas si el hermoso PNG de alta resolución que acabas de crear es enorme. Un PNG listo para imprimir a partir de un SVG complejo, como un archivo de 2480 × 3508 px con degradados, puede superar fácilmente los 15–25 MB. Para la web, eso es inaceptable. Para la impresión, el tamaño es menos preocupante, pero muchos servicios de impresión tienen límites de subida, así que es una buena práctica mantener los archivos por debajo de 10 MB si es posible. Para la entrega en la web, la optimización no es opcional. Debes pasar tus PNG por un optimizador sin pérdidas. Herramientas como Squoosh, que funciona en el navegador, la utilidad de línea de comandos `pngquant`, o el servicio web TinyPNG pueden reducir el tamaño de los archivos en un 40–70% sin ningún cambio visible en la calidad. Funcionan reduciendo inteligentemente la paleta de colores y aplicando una compresión más eficiente. Un PNG de 2 MB a menudo puede reducirse a menos de 300 KB usando `pngquant --quality=65-80 tuarchivo.png`. También deberías preguntarte si PNG es siquiera el mejor formato final para la web. Si tu imagen no necesita transparencia, convertirla a WebP es una jugada inteligente. WebP goza de soporte universal en los navegadores modernos y generalmente produce archivos que son un 25–35% más pequeños que un PNG comparable. Para activos exclusivos de la web, puedes pasar directamente de SVG a WebP con CocoConvert y saltarte el paso intermedio de PNG por completo. Para la impresión, haz exactamente lo contrario: no optimices. Envía el PNG sin comprimir y a resolución completa que descargaste directamente a tu servicio de impresión. Algunos servicios, como Printful, advierten específicamente que no se suban PNG comprimidos. Los artefactos de compresión con pérdida que son completamente invisibles en tu pantalla pueden volverse flagrantemente obvios al imprimirse.
Guía de referencia rápida: ajustes por caso de uso
No deberías tener que hacer cálculos cada vez que conviertes un archivo. Guarda esta sección en tus marcadores o tenla a mano como una guía de referencia para los ajustes de exportación más comunes. Favicon (web): Exporta a 512 × 512 px. Los generadores de favicons modernos tomarán este único PNG grande y crearán todos los tamaños más pequeños (16, 32, 180, 192 px) por ti. Foto de perfil para redes sociales: Usa 800 × 800 px como mínimo. Aunque plataformas como Twitter/X y Facebook las muestran más pequeñas, subir un archivo de origen más grande alimenta a sus algoritmos de compresión con mejores datos, lo que resulta en una imagen final mucho más nítida. Imagen para Open Graph / compartir en redes: 1200 × 630 px. Esta es la relación de aspecto estándar recomendada por Facebook y ahora utilizada por casi todos. Tarjeta de visita (impresión, 3.5 × 2 pulgadas a 300 PPI): 1050 × 600 px. Si tu imprenta requiere sangrado, añade 0.125 pulgadas a cada lado, haciendo que tu documento sea de 1125 × 675 px (un extra de 75 píxeles en total para cada dimensión). Póster A4 (impresión, 300 PPI): 2480 × 3508 px. Póster tamaño Carta (impresión, 300 PPI): 2550 × 3300 px. Área de impresión para camiseta (12 × 14 pulgadas a 300 PPI): Un tamaño común es 3600 × 4200 px. Gráfico web para Retina (2x): Duplica las dimensiones definidas en tu CSS. Una imagen con un estilo de 600 × 400 px necesita un PNG de origen de 1200 × 800 px. Todos estos valores de píxeles se pueden escribir directamente en el campo de ancho en la página del [conversor de SVG a PNG](/convert/svg-to-png). Para imágenes no cuadradas donde necesites definir ambas dimensiones, simplemente usa el interruptor de dimensiones personalizadas. Si bien esta lista es un excelente punto de partida, la fuente de verdad definitiva son siempre las directrices específicas del servicio de impresión. Redbubble, Printful, Gooten y otros publican requisitos detallados de píxeles y DPI para cada producto que venden. Siempre revisa sus especificaciones antes de una gran tirada de impresión.