Conversor de SVG a PNG

Qué es un SVG, y por qué rasterizarlo solo va en un sentido

Un SVG no es una imagen. Es la descripción de una — una lista de formas, trazados, colores y texto, cada cosa con sus coordenadas, escrita en un archivo de texto que otra cosa lee y dibuja. Un JPG o un PNG son lo contrario: una cuadrícula de píxeles, decidida de una vez cuando se escribió el archivo. Esa única diferencia está detrás de todo lo que hay en esta página, incluida la única pregunta que este conversor tiene que hacerte y que los otros dos conversores no hacen nunca.

• Es texto que puedes leer. Abre un SVG en cualquier editor de texto y las formas están escritas delante de ti, lo que es también la manera de comprobar por ti mismo qué tamaño dice tener el archivo y a qué apunta.
• No tiene resolución en absoluto. El mismo archivo es un icono nítido del tamaño de un punto y un cartel nítido en una pared, porque quien lo muestra vuelve a calcular el dibujo cada vez, en lugar de estar almacenado en alguna parte.
• En lo que es bueno es en la ilustración plana — logotipos, iconos, esquemas, gráficos, mapas, cualquier cosa dibujada en vez de fotografiada. En lo que es desastroso es en una fotografía, que no tiene formas que describir y necesitaría una línea del archivo por cada píxel.
• Rasterizar uno es lo que hace esta página, y el motivo es casi siempre algún sitio que no acepta el formato: un formulario de subida, un editor de imágenes antiguo, una plantilla de documento o de diapositivas, la vista previa de una red social, un correo, un servicio de impresión.

Convertirlo en un PNG fija el dibujo en píxeles a un tamaño elegido, y esa es una puerta que solo se abre en un sentido. Las formas no quedan almacenadas en el resultado y ningún ajuste de aquí las conserva, así que ampliar el PNG después amplía sus píxeles en lugar de volver a dibujar nada, y esta página no escribe ningún formato vectorial — convertir una imagen de vuelta en formas es un problema distinto con respuestas distintas, y no el reverso de este. Así que conserva el SVG. Lo que descargas aquí es una copia hecha para un propósito y un tamaño, y la manera de conseguir un segundo tamaño es convertir el original otra vez y no redimensionar lo que ya tienes.

De dónde ha salido el tamaño que hay en los campos

Como un vector no tiene píxeles propios, algo tiene que decidir con cuántos sale, y esta página empieza por leer lo que el propio archivo da a entender. Ese número va a los campos de ancho y alto, y una frase junto a ellos nombra el archivo y dice de cuál de exactamente tres sitios se ha tomado el número. Vale la pena leerla antes de convertir, porque los tres no son igual de fiables y solo tú sabes cuál querías.

• El archivo declara un tamaño propio, en píxeles. Este es el más firme de los tres: alguien que exportó el dibujo dijo cómo de grande debía ser, y los campos se limitan a repetirlo.
• El archivo indica su tamaño en unidades físicas — pulgadas, centímetros, milímetros, puntos o picas — y se ha convertido a noventa y seis píxeles por pulgada, que es lo que la web entiende por una pulgada y no una medida de tu pantalla. Un dibujo preparado para imprenta llega a menudo así, y el tamaño en píxeles que sale de ahí es una conversión fiel de un número que nunca trató de píxeles.
• El archivo no declara ningún tamaño utilizable, así que el tamaño se ha medido a partir de su viewBox. Ese es el caso que hay que mirar dos veces: un viewBox es el sistema de coordenadas en el que están dibujadas las formas y no un tamaño que alguien haya elegido, de modo que un icono cuyas coordenadas van de cero a veinticuatro llega pidiendo ser una imagen del tamaño de un punto. Los juegos de iconos se escriben además con frecuencia con un ancho y un alto en tanto por ciento, que es el tamaño de algo que este archivo no tiene y se lee como ningún tamaño, así que esos aterrizan aquí también.

Sea cual sea de los tres el que haya respondido, el número se redondea a píxeles enteros una sola vez, en el momento en que se lee, porque un lienzo se reserva en píxeles enteros y no hay dónde poner una fracción. Eso importa para una cosa en particular: todo lo demás trabaja con el número redondeado que tienes a la vista y no con la fracción que hay detrás, así que el doble de un dibujo que se muestra como de treinta y un píxeles de ancho es sesenta y dos y no los sesenta y tres que daría un segundo redondeo. El tamaño en pantalla y el tamaño con el que se hacen las cuentas son el mismo tamaño, que es la única disposición en la que los campos significan lo que dicen.

Elegir el tamaño que necesitas — y el dibujo que no declara ninguno

El tamaño que el archivo da a entender no es nunca más que un punto de partida, y se ofrece como tal en lugar de imponerse. Todo en los dos campos está dispuesto para que el caso corriente no cueste ningún pensamiento y el caso exacto siga estando a mano, y en eso consiste toda la diferencia entre esta página y sus dos hermanas — una fotografía se convierte al tamaño que ya tiene, y no hay nada que decidir.

• Escribe un ancho y el alto lo sigue, y escribe un alto y el ancho lo sigue, de modo que el dibujo mantiene sus proporciones sin que tengas que calcular nada. Es lo predeterminado porque deformar un logotipo sin querer es el error que vale la pena hacer imposible.
• Quita la marca de «Mantener las proporciones» cuando de verdad necesites una caja exacta — un hueco de banner, un avatar de medida fija, una hoja de iconos — y los dos campos pasan a ser independientes. El dibujo se estira entonces hasta llenar lo que hayas pedido, que es lo que querías y es también por lo que se trata de un acto deliberado y no de lo predeterminado.
• La fila de multiplicadores es el camino rápido a los tamaños que la gente quiere de verdad, y cada uno de ellos se mide contra el tamaño que declara el archivo y no contra lo que haya en los campos en ese momento. Así que pulsar el mismo multiplicador dos veces te da la misma respuesta dos veces, en lugar de acumularse hasta algo que no habías pedido.
• Un multiplicador que no tiene respuesta se ofrece como no disponible en lugar de como un botón que no hace nada. Multiplicar un dibujo que ya es enorme puede alcanzar un tamaño que ningún formato de imagen puede expresar, y un control que se negara en silencio sería peor que uno que te enseña que no puede.

Luego está el archivo que no declara nada: ni un ancho y un alto que esta herramienta pueda leer, ni tampoco un viewBox que medir. Es más frecuente de lo que parece — un dibujo exportado directamente desde algunos editores, o uno escrito a mano para una página que iba a darle el tamaño con CSS. De verdad no hay ningún tamaño dentro, así que los campos se abren vacíos, no aparece ninguna frase sobre de dónde ha salido un número, no hay nada que multiplicar ni proporción que mantener, y la fila se niega y te pide un ancho y un alto. Esa negativa es el objetivo y no un fallo: un navegador al que se le entrega un archivo así recurre a una caja pequeña y fija que no ha elegido nadie, y que te pregunten una vez es mejor que descargar eso y enterarte más tarde.

Un par que no es un tamaño se rechaza con sus propias palabras, que es la otra mitad del mismo cuidado. Cero, un número negativo, medio píxel o un número mayor de lo que cualquier formato de imagen puede expresar se rechazan cada uno en lugar de redondearse, recortarse o sustituirse en silencio por el tamaño propio del archivo — una conversión a un tamaño que no ha pedido nadie es exactamente lo que esta página existe para no hacer. Y si lo que has elegido es una fotografía en vez de un dibujo, los campos de tamaño no aparecen siquiera: una imagen de píxeles se convierte con sus propias dimensiones, y un control que no pudiera cambiar nada es peor que ningún control.

A qué formato rasterizar

Esta página se abre en PNG porque es la respuesta correcta para casi cualquier vector, y los otros formatos están a un clic y no detrás de otra página. Estás eligiendo entre un formato que almacena los píxeles exactamente y dos que ceden una parte de ellos a cambio de un archivo más pequeño, y un dibujo inclina la balanza de un modo poco habitual: el color plano y los bordes duros son justo el contenido que peor lleva la compresión con pérdida.

• PNG es lo predeterminado y suele ser el final de la discusión. Almacena exactamente el dibujo rasterizado, admite transparencia y comprime extraordinariamente bien las zonas planas de un solo color — que es en su mayor parte lo que son un logotipo o un icono, así que el archivo sale a menudo más pequeño de lo que sugiere la fama del formato.
• JPG solo merece la pena cuando algo del otro extremo se empeña en él. No puede almacenar transparencia en absoluto, así que antes hay que pintar un color de fondo detrás de tu dibujo, y su compresión pone una orla gris justo a lo largo de los bordes nítidos y las letras que rasterizaste el vector para conservar.
• WebP es la respuesta intermedia para una página web: admite transparencia y suele ser más pequeño que el PNG. Aquí tiene pérdida en cualquier ajuste de calidad, incluido el extremo superior del control, así que es una buena elección para una imagen que va a una página y una mala para una copia maestra que vayas a editar otra vez.
• Ninguno de los tres es un vector, y esta página no escribe ningún formato vectorial. Si lo que necesitas es un archivo que escale, el SVG que ya tienes es ese archivo — consérvalo, y trata lo que descargues aquí como una copia hecha para un único sitio.

El control de calidad aparece solo para los dos formatos que tienen algo que ceder, que son JPG y WebP; PNG no descarta nada, así que no se ofrece ningún control en lugar de uno que estuviera ahí sin hacer nada. Cada fila muestra el tamaño con el que ha salido el archivo, de modo que el trato que estás haciendo es una cifra que tienes delante. Mover ese control vuelve a codificar, cuando puede, una imagen ya dibujada en lugar de rasterizar el dibujo otra vez, mientras que cambiar el tamaño sí que obliga a dibujarlo de nuevo — y ese es el orden correcto, porque lo segundo es lo que produce de verdad píxeles distintos.

Lo que una rasterización no puede llevarse consigo

Todo lo de aquí se hace con la maquinaria de dibujo que ya viene dentro de tu navegador: el archivo se le entrega como una imagen, se dibuja una vez al tamaño que has elegido y se vuelve a escribir en el formato que has pedido. Eso es lo que permite que la herramienta funcione sin subir nada, sin instalar nada y sin descargar nada más allá de la propia página — y en el caso de un vector decide además qué puede llegar a contener el resultado, porque un SVG es un documento y no un bloque de píxeles, y un documento puede pedir cosas.

Entregado como se entrega aquí, no las consigue. Nada de dentro del archivo se ejecuta y nada de fuera del archivo se descarga, que es una propiedad deliberada y de verdad valiosa: un SVG puede llevar un script, y puede llevar una referencia a una dirección de algún sitio que se pediría en el momento en que el dibujo se mostrara. Abrir aquí el dibujo de un desconocido no hace ninguna de las dos cosas. Lo que cuesta esa seguridad viene aquí abajo, y los dos primeros puntos se anuncian en la fila en vez de dejarse para que los notes tú.

• Todo aquello a lo que el archivo apunte fuera de sí mismo no se cargará — una imagen enlazada, una hoja de estilos, una tipografía. Eso vale para una dirección de la web e igualmente para un archivo que esté en la misma carpeta, que es con mucho el caso más frecuente y la razón por la que el aviso dice que esas partes no se cargarán en lugar de decir que estaban en otro servidor. Aquello para lo que servían falta en el resultado, y el arreglo consiste en incrustarlas en el dibujo y convertirlo otra vez.
• El texto se traza con las tipografías instaladas en esta máquina. Las letras están en el resultado y a ti te parecen correctas, pero el mismo archivo rasterizado en otro ordenador puede elegir otra tipografía y salir como una imagen distinta. Si las formas exactas importan, convierte el texto en trazados en el programa que dibujó el archivo, y entonces ya no se busca nada en ninguna parte.
• Todo lo que el dibujo haga a lo largo del tiempo no está en el resultado. La salida es una imagen fija en todos los formatos que se ofrecen, así que un archivo que se anima a sí mismo aporta el único instante que se dibujó, y nada interactivo sobrevive tampoco al viaje.

Hay dos techos de la salida que conviene decir claramente en vez de dejar que se descubran. El PNG lo escribe el compresor del propio navegador, que es decente pero no exhaustivo, así que un optimizador especializado todavía podría quitarle una rebanada al archivo sin cambiarle un solo píxel; y el WebP es una codificación con pérdida en cualquier ajuste, porque a un navegador no se le puede pedir el modo sin pérdida del formato en absoluto. Los dos podrían levantarse incluyendo un codificador de verdad compilado para ejecutarse dentro de la página, y esta herramienta no lo hace a propósito: serían unos cuantos cientos de kilobytes que descargaría cada visitante para que algunos de ellos obtengan un archivo un poco más pequeño, en un sitio en el que todas las demás páginas funcionan en el momento en que aparecen. En esta página en particular aportaría además menos de lo que parece: la rasterización es el dibujo que el propio navegador hace de tu vector, y un codificador no puede cambiar cómo se dibujó.

Qué te dice cada fila sobre tu dibujo, y cuándo se niega

Un conversor que trabaja en silencio es la manera de que alguien acabe con un logotipo sobre un fondo negro, o con un dibujo al que le falta la imagen a la que apuntaba, y se entere días después y en otra parte. Cada fila de aquí lleva una breve relación de lo que se le hizo realmente a ese archivo — y no lleva nada en absoluto cuando no ocurrió nada digno de mención, que es lo que hace que valga la pena detenerse en los avisos. Un vector se encuentra con un conjunto de avisos distinto del de una fotografía, y tres de los avisos de la herramienta no pueden aplicársele en absoluto: un dibujo no tiene datos de cámara que perder, ni nada que diga hacia dónde queda su parte de arriba, ni fotogramas que se le pierdan.

• Algo a lo que apunta el dibujo no se cargará. Aparece en un archivo que remite a una imagen, una hoja de estilos o una tipografía que no están dentro de él, ya sea por una dirección o por una ruta de al lado, y es la explicación de un resultado que ha salido con un trozo de menos.
• El texto se trazó con las tipografías de esta máquina. Aparece solo donde el dibujo pone letras de verdad en el lienzo, así que un archivo con un elemento de texto vacío no dice nada, y un dibujo sin texto ninguno tampoco dice nada.
• Se rellenó la transparencia, y con qué color. Convertir a JPG obliga a poner algo detrás del dibujo, y aparece un control de color en cuanto un archivo de tu lista lo necesita de verdad. Este aviso se mide en vez de suponerse: espera a que se haya encontrado un píxel realmente transparente en lo que se dibujó, así que un dibujo cuya propia ilustración cubre toda la imagen se convierte a JPG sin decir nada al respecto.
• El nombre y el contenido no coinciden. El formato se decide por el contenido del archivo y nunca por su extensión, así que un dibujo que alguien guardó con la terminación equivocada se lee y se convierte correctamente como el SVG que es — y se te dice, porque es algo cierto sobre tu archivo que probablemente no sabías.
• WebP en este ajuste sigue teniendo pérdida. Rasterizar un dibujo y pedir luego el extremo mismo del control de calidad da la sensación de que debería devolver exactamente lo que se dibujó, y no lo hace — esa es la creencia que el aviso existe para corregir, y por eso aparece ahí y en ninguna posición más baja.

Cuando un archivo no se puede convertir en absoluto, la herramienta dice por qué en lugar de producir algo. Un archivo que no es ninguno de los formatos que lee se nombra y se rechaza, y también uno que sí es un formato admitido pero cuyo comienzo no se puede leer — que en un dibujo quiere decir su etiqueta de apertura, que es lo único que un vector tiene a modo de cabecera. Un archivo con un dibujo en algún lugar dentro de una página web no es un archivo de imagen y se rechaza como tal, y también un dibujo que tu navegador resulta no ser capaz de dibujar, por íntegro que pareciera desde fuera. No se adivina nada, y nada a medio hacer se devuelve como si estuviera terminado.

El rechazo con el que más probablemente te encuentres aquí es el del tamaño, y eso es un hecho sobre esta página más que sobre tu archivo: un multiplicador está a un clic, a un dibujo se le puede pedir de buena gana cualquier tamaño y no hay nada en un vector que te frene. Quien te frena es el navegador, que solo sostiene una imagen hasta cierta superficie — una superficie distinta en un móvil y en un ordenador de sobremesa, y distinta otra vez entre dos navegadores de la misma máquina. Cruzarla no produce error alguno, solo una imagen en blanco de unos pocos kilobytes que parece una conversión terminada hasta que se abre. Por eso esta herramienta escribe un píxel conocido en la imagen al tamaño que has pedido y vuelve a leerlo antes de que se dibuje una sola forma; si no vuelve, recibes el rechazo con el tamaño dentro y ningún archivo. En ninguna parte se compara nada con una cifra fija, así que el techo con el que te topas es el de tu propio dispositivo y nunca uno elegido para otra persona.

Por qué tu dibujo no sale nunca de esta pestaña

Un dibujo delata más que una fotografía, porque un dibujo es un archivo de texto y se puede leer. Los nombres de las capas, el nombre de quien lo exportó, un comentario que alguien dejó dentro, la dirección de cada pieza a la que apuntaba: todo eso está escrito en el archivo, y nada de ello va a ninguna parte. Tu SVG lo lee esta pestaña del navegador y lo rasteriza el procesador de tu propia máquina. En el otro extremo de esta página no hay ningún servidor capaz de aceptar uno, así que esto es una descripción de cómo está construida la herramienta y no una promesa sobre cómo se administra.

Unos segundos en el panel de red de las herramientas de desarrollo de tu navegador lo zanjan, y en el caso de un dibujo hay dos cosas que mirar en vez de una. No sale nada que lleve tu archivo, y tampoco sale nada en nombre del archivo, por muchas direcciones que estén escritas dentro de él. Una vez cargada, la página es un puñado de archivos estáticos sin código ejecutándose en ninguna otra parte, así que puedes desconectarte por completo de la red y seguir rasterizando tanto tiempo como quieras.

• Un dibujo que no le enviarías a un desconocido — un logotipo aún sin anunciar, el plano de una planta, el esquema de algo interno — se puede rasterizar aquí sin que salga de tu máquina en absoluto.
• Lo que sale de la rasterización se queda en esta pestaña hasta que lo guardas, y cerrar la pestaña es todo el borrado que hace falta. Ni el dibujo que trajiste ni la imagen hecha a partir de él se recuerdan de una visita a otra.
• Un dibujo que ha llegado de un sitio del que no te fías del todo se puede abrir aquí sin peligro, porque nada de lo que hay dentro se ejecuta y nada de aquello a lo que apunta se descarga. Rasterizarlo es además una manera de despojarlo: lo que descargas son píxeles, y los píxeles no pueden pedir nada.