Por qué un SVG no tiene tamaño hasta que lo conviertes
Mucha gente pregunta cómo convertir SVG a PNG "sin perder calidad", y la pregunta contiene un malentendido que conviene aclarar primero. Un SVG no tiene calidad que perder. No tiene píxeles en absoluto.
Los vectores describen, los píxeles almacenan
Un SVG es una descripción de formas (curvas, rellenos, texto) en un sistema de coordenadas sin tamaño fijo en píxeles. Un PNG es una cuadrícula fija de píxeles. Convertir SVG a PNG siempre implica, por tanto, elegir un tamaño, y el resultado es nítido a cualquier tamaño que elijas.
Abre un SVG en un editor de texto y encontrarás instrucciones: muévete a este punto, traza una curva hasta aquel, rellena con este color. Nada dice cuántos píxeles de ancho tiene el dibujo. El navegador lo decide al mostrarlo, y puede decidirlo distinto cada vez.
Qué significan realmente viewBox, width y height
Tres atributos del elemento raíz controlan el tamaño. El viewBox define el sistema de coordenadas: "este dibujo abarca de 0 a 240 a lo ancho y de 0 a 160 a lo alto". Los atributos width y height, si existen, sugieren un tamaño de visualización por defecto. Muchos SVG solo tienen viewBox, algunos solo width y height, y unos pocos no tienen ninguno.
Este convertidor lee los que estén presentes, calcula un tamaño intrínseco como lo haría un navegador y lo usa como base 1×. Si no se declara ninguno, recurre a 1.024 píxeles para que sigas obteniendo una imagen utilizable.
Por qué "sin perder calidad" es la pregunta equivocada
Como el SVG puede renderizarse a cualquier tamaño a partir de las mismas instrucciones, un PNG de 4.000 píxeles es exactamente tan nítido como uno de 400: el renderizador simplemente dibuja más detalle. La única forma de perder calidad es renderizar pequeño y ampliar después el PNG. La solución es elegir el tamaño final aquí, en el momento de la conversión, y no ampliar nunca el PNG.
Qué hace este convertidor de SVG a PNG
Esta herramienta lee tus archivos SVG en el navegador, elimina cualquier cosa ejecutable, renderiza cada uno al tamaño que elijas con el propio motor del navegador y te devuelve PNG sin pérdida con la transparencia intacta, por separado o en un ZIP.
El mismo renderizador que tu navegador
Los convertidores en servidor usan una biblioteca aparte (librsvg, Inkscape, ImageMagick) y cada una tiene lagunas: un filtro que no soporta, una fuente que sustituye, un degradado que dibuja ligeramente distinto. El PNG que recibes puede no coincidir con el SVG que miraste.
Aquí el renderizado lo hace Blink, Gecko o WebKit (el navegador que estés usando) dibujando el SVG en un canvas. Si el SVG se ve bien en tu navegador, el PNG se verá igual, porque es literalmente el mismo dibujo.
Scripts eliminados, nada subido
SVG es XML y puede contener elementos <script>, manejadores onload y HTML incrustado. Un archivo de origen desconocido no es algo que abrir a la ligera. Antes de renderizar, el convertidor elimina scripts, atributos de eventos y bloques foreignObject, y renderiza el resultado dentro de un elemento de imagen que de todos modos no puede ejecutar código. Dos capas, ambas locales.
No se sube nada en ningún momento. El panel Red de las herramientas de desarrollo de tu navegador permanece vacío mientras se convierte un lote.
Cómo convertir SVG a PNG en 3 pasos
Suelta tus archivos SVG
Arrastra uno o varios archivos .svg a la zona punteada, o haz clic para explorar. Hasta 10 a la vez en escritorio. Cada fila muestra una vista previa en vivo del vector: los navegadores muestran SVG de forma nativa, así que lo que ves es lo que se renderizará.
Elige tamaño y fondo
En Ajustes de conversión, elige Escala (1×, 2×, 3× o 4× del tamaño propio del SVG) o Ancho (un preajuste o cualquier ancho en píxeles; la altura sigue la proporción). Luego elige un fondo: transparente por defecto, o blanco, negro o cualquier color sobre el que aplanar.
Descarga los PNG o un ZIP
Pulsa Convertir. Cada archivo muestra sus dimensiones de salida y el tamaño del PNG. Descárgalos uno a uno, o pulsa Descargar todo para obtener un ZIP con los nombres originales y extensión .png.
Suelta hasta 10 archivos SVG. Se leen localmente y nunca se suben.
Elige una escala o escribe un ancho, y luego un fondo transparente o sólido.
Descarga cada PNG por separado o todo en un ZIP.
Elegir el tamaño de salida adecuado
Como el tamaño es una elección, ayuda saber para qué sirve cada opción. Dos modos cubren casi todos los casos.
1×, 2×, 3×: ajustarse a la densidad de pantalla
Un monitor estándar muestra un píxel por punto CSS. Una pantalla Retina o HiDPI muestra dos; la mayoría de los móviles modernos, tres. Un icono de 32 puntos en pantalla necesita, por tanto, un PNG de 32 píxeles para el primero, 64 para el segundo y 96 para el tercero. Ese es todo el significado de 1×, 2× y 3×.
En trabajo web y de apps se suele exportar el mismo SVG a las tres escalas. Suelta el archivo una vez, convierte a 1×, cambia el ajuste y vuelve a convertir; o simplemente exporta a 3× y deja que la plataforma reduzca.
Una tabla de tamaños para destinos habituales
Favicons: 16, 32 y 48 píxeles, mejor generados con la herramienta PNG a ICO a partir de un PNG de 512 píxeles. Iconos de app: 1024 píxeles para las tiendas, y después el generador de conjuntos de iconos. Avatares sociales: de 400 a 800 píxeles. Imágenes Open Graph: 1200 × 630. Fichas de marketplace: normalmente 2000 píxeles en el lado largo.
Ancho personalizado para impresión y marketplaces
Para impresión, calcula a partir del tamaño físico a 300 DPI: una página A4 tiene 2.480 píxeles de ancho, un A3 3.508, una pegatina de 6 pulgadas 1.800. Cambia al modo Ancho, escribe el número y la altura seguirá la proporción del SVG. El convertidor limita la salida a 16.384 píxeles en el lado más largo (el límite que los navegadores imponen a un canvas) y te avisa si ha tenido que reducir una petición.
Transparencia, fondos y bordes
La mayoría de los SVG (logotipos, iconos, ilustraciones) no tienen fondo: las formas flotan sobre nada. PNG puede guardar eso, y es una de las dos razones para preferirlo a JPG en esta tarea.
Mantener el fondo transparente
Aquí, transparente es el valor por defecto. Cada píxel que el SVG no pintó queda libre, incluidos los píxeles parcialmente cubiertos a lo largo de bordes curvos y diagonales. Esos píxeles suaves de borde son los que permiten que el PNG se asiente sobre una diapositiva oscura, un botón de color o una fotografía sin un contorno visible.
Los resultados se muestran sobre un tablero de ajedrez para que puedas confirmar la transparencia antes de descargar.
Cuándo aplanar sobre un color
Algunos destinos no admiten alfa: clientes de correo antiguos, ciertos flujos de impresión, algunos cargadores de marketplace que convierten a JPG por detrás. Para ellos, elige Blanco, Negro o un color personalizado en el ajuste de fondo. La forma se compone sobre ese color y el PNG queda totalmente opaco.
Elige el color que coincida con el lugar donde irá la imagen. Si aplanas sobre blanco y luego colocas el PNG sobre un fondo oscuro, los píxeles de borde (ahora naranja pálido, azul pálido, el color que tuviera la forma) aparecen como un halo tenue. Ese halo es la queja más habitual sobre logotipos convertidos, y es una elección de fondo, no un fallo de renderizado.
Qué puede salir mal (y cómo arreglarlo)
Renderizar en el navegador significa que el PNG coincide con la pantalla, pero también hereda las reglas del navegador sobre lo que una imagen puede cargar.
Fuentes que faltan
El texto de un SVG se renderiza con la fuente que este nombre. Si esa fuente no está instalada en tu equipo ni incrustada en el archivo, el navegador la sustituye y el PNG muestra la sustituta. Las fuentes web referenciadas por URL tampoco cargarán: un SVG renderizado como imagen no puede obtener recursos externos.
La solución fiable es convertir el texto a contornos en tu herramienta de diseño antes de exportar el SVG. Las letras se convierten en trazados y se renderizan idénticas en todas partes.
Imágenes enlazadas que faltan
La misma regla se aplica a <image href="https://…">. Una imagen rasterizada traída desde una URL saldrá en blanco. Incrústala en su lugar: la mayoría de los editores tienen una opción de exportación "incrustar imágenes" que convierte el enlace en un URI de datos dentro del SVG. Las imágenes incrustadas se renderizan sin problema.
Salida en blanco o diminuta
Un SVG sin viewBox ni width y height se renderiza aquí a un tamaño de respaldo; si el dibujo está lejos del origen, puede quedar fuera del área visible. Añade un viewBox que encierre la ilustración. Una salida diminuta casi siempre significa que el SVG declara un width y height pequeños: cambia al modo Ancho y escribe el tamaño que realmente quieres.
Síntoma, causa, solución
| Síntoma | Causa probable | Solución |
|---|---|---|
| Fuente incorrecta en el PNG | Fuente no instalada / fuente web bloqueada | Convierte el texto a contornos antes de exportar |
| La foto dentro del SVG sale en blanco | Enlazada por URL, no incrustada | Vuelve a exportar con las imágenes incrustadas |
| El PNG es diminuto | El SVG declara un width/height pequeño | Usa el modo Ancho y escribe el tamaño objetivo |
| Ilustración recortada | El viewBox no encierra el dibujo | Corrige el viewBox en el editor |
| Halo sobre fondos oscuros | Aplanado sobre blanco | Mantén la transparencia o aplana sobre el color de fondo real |
| El filtro o el desenfoque se ven distintos | El convertidor en servidor usó otro motor | Convierte aquí: lo renderiza el navegador |
Qué hace la gente con SVG como PNG
Si el SVG escala perfectamente, ¿para qué convertir SVG a PNG? Porque muchísimo software todavía no acepta un vector.
Conjuntos de iconos y favicons
Las tiendas de apps, los formatos de favicon y muchos sistemas de iconos quieren PNG de tamaño fijo. Convierte una vez al tamaño más grande que necesites y recorta el resto con el generador de iconos o PNG a ICO.
Plataformas que rechazan SVG
Redes sociales, marketplaces, foros y la mayoría de las bibliotecas de medios de los CMS rechazan subidas SVG, en parte por seguridad, ya que un SVG puede llevar scripts. Un PNG a 2× con fondo transparente es el sustituto universal.
Firmas de correo y boletines
Los clientes de correo eliminan el SVG o muestran una imagen rota. Los logotipos en el correo son PNG, idealmente exportados a 2× y mostrados a la mitad de tamaño para que se mantengan nítidos en pantallas Retina.
Impresión y gran formato
Las imprentas aceptan PDF y ráster de alta resolución. Usa el modo Ancho para renderizar un logotipo a 3.000 o 4.000 píxeles y se imprimirá limpiamente a tamaño póster: los vectores rasterizados al tamaño objetivo no tienen desenfoque por ampliación.
Convertidores SVG en el navegador vs en servidor
Casi todos los convertidores de SVG a PNG en línea suben el archivo y lo renderizan en un servidor con librsvg, Inkscape o un navegador headless. Funciona con formas sencillas y se desvía con cualquier cosa complicada.
Fidelidad
Cada biblioteca de renderizado soporta una porción ligeramente distinta de la especificación SVG. Filtros, máscaras, modos de fusión, CSS dentro del archivo y texto sobre trazado son las víctimas habituales. Los motores de los navegadores son los renderizadores SVG más completos que existen, y renderizar con el de tu equipo significa que el PNG no puede discrepar de la vista previa.
Privacidad y límites
Un logotipo sin publicar, un diagrama de producto, un gráfico con cifras internas: subirlos a un convertidor es una pequeña fuga que nadie pretende. Las herramientas en servidor también limitan el tamaño de archivo y el uso diario porque renderizar les cuesta dinero. Renderizar en tu propio dispositivo elimina ambas cosas: no hay nada que filtrar ni nada que medir.
Lo que un servidor hace mejor: un hardware muy antiguo renderizará un lote de SVG complejos más despacio que un centro de datos. Para diez logotipos, no hay diferencia.
Qué hacer después con los PNG
La salida es PNG estándar, así que cualquier herramienta de aquí lo acepta sin otra subida.
Para la web, pásalo por Comprimir PNG o conviértelo a WebP: ambos conservan la transparencia y reducen el tamaño. Para correo o fotos, PNG a JPG aplana y reduce. Para dimensiones exactas a posteriori, Redimensionar imagen. Y si empezaste con un ráster y te gustaría tener un vector, PNG a SVG va en la dirección contraria.