Convertir SVG a PNG o JPG en línea

¿Qué es esta herramienta?

SVG es un formato vectorial: figuras descritas mediante fórmulas matemáticas, escalables infinitamente, ideales para logotipos e iconos. Sin embargo, hay muchos sitios que no lo admiten: los documentos de Word, la mayoría de las redes sociales, los clientes de correo electrónico y un sinfín de formularios de subida de archivos requieren imágenes pixeladas. La conversión (rasterización) transforma el vector en un archivo PNG o JPG de un tamaño concreto.

Dado que los vectores no tienen una resolución fija, tú eliges el ancho de salida; y, como el código fuente es matemático, una exportación de 2048 píxeles tiene exactamente la misma nitidez que una de 256 píxeles. El formato PNG conserva el fondo transparente del SVG; el JPG lo rellena de blanco.

¿Por qué utilizarlo?

• Cualquier resolución a partir de una misma fuente: desde un favicon de 256 píxeles hasta un recurso de impresión de 2048 píxeles, todo con una precisión perfecta al píxel.
• El archivo PNG resultante conserva la transparencia, por lo que los logotipos se pueden colocar sobre cualquier fondo.
• Soluciona en cuestión de segundos los rechazos de subida por «SVG no compatible».
• Conversión por lotes, procesamiento local, sin necesidad de subir archivos.
• Gestiona archivos SVG sin anchura ni altura explícitas leyendo su «viewBox».

Cómo utilizarlo

1. Arrastra los archivos .svg al recuadro o haz clic para seleccionarlos.
2. Elige un ancho de salida: la opción «Auto» utiliza el tamaño declarado en el propio archivo SVG.
3. Elige entre PNG (mantiene la transparencia) o JPG (fondo blanco).
4. Descarga cada imagen renderizada; las dimensiones se indican en cada archivo.

Ejemplo

Entrada

logo.svg — 4 KB vector

Resultado

logo.png — 1024×1024, transparent background, crisp at every pixel

Una única y pequeña fuente vectorial genera imágenes rasterizadas con una precisión de píxel a cualquier tamaño que se desee.

Casos de uso habituales

• Insertar el logotipo de una empresa (que normalmente el diseñador proporciona en formato SVG) en un documento de Word o PowerPoint que no admite la incrustación de archivos SVG.
• Generar iconos de aplicaciones o favicons en todos los tamaños de píxeles necesarios (16, 32, 180, 512 px) a partir de un archivo SVG maestro.
• Añadir un icono a la firma de un correo electrónico, ya que la mayoría de los clientes de correo electrónico solo muestran imágenes rasterizadas.
• Subir material gráfico a una red social o a un sistema de gestión de contenidos (CMS) que rechaza los archivos SVG como medida de seguridad en la subida de archivos.

¿Por qué existen, en primer lugar, restricciones para la subida de archivos SVG?

Muchas plataformas bloquean específicamente la subida de archivos SVG por motivos de seguridad, no por descuido: dado que el formato SVG se basa en XML y, técnicamente, puede incrustar código JavaScript, un archivo SVG malicioso puede servir de vector para la inyección de scripts si la plataforma lo procesa sin depurarlo. La rasterización de un SVG a PNG o JPG elimina todo lo que no sean datos de píxeles, lo cual es una de las razones por las que esta conversión suele ser necesaria y no solo una cuestión de comodidad: la plataforma de destino realmente no puede aceptar de forma segura el formato vectorial, independientemente de que tu SVG concreto sea inofensivo.

Cómo funciona realmente la independencia de resolución

Un archivo SVG no almacena píxeles en absoluto, sino que almacena definiciones matemáticas de trazados («traza una línea desde este punto hasta aquel», «rellena esta curva con este color») y un «viewBox» que define el espacio de coordenadas en el que se encuentran esos trazados. Al rasterizarlo, el motor de renderizado del navegador vuelve a calcular cada curva y cada relleno con las dimensiones en píxeles que solicites, partiendo de cero, cada vez. Esto es fundamentalmente diferente a cambiar el tamaño de una imagen rasterizada existente (un JPG o un PNG), donde ampliarla significa inventar píxeles que nunca existieron e inevitablemente da lugar a un aspecto difuminado: un SVG renderizado a 4000 píxeles es exactamente tan nítido como uno renderizado a 100 píxeles, porque ambos se calculan de nuevo a partir de los mismos cálculos matemáticos exactos, y no se estiran a partir de una fuente más pequeña.

Preguntas frecuentes