Entra un vector, salen píxeles
Un archivo SVG no contiene píxeles. Es una descripción en texto de formas: un círculo en estas coordenadas, un trazado que pasa por estos puntos, relleno de este color. Por eso un logotipo en SVG se ve nítido tanto en un móvil como en un monitor 5K, y por eso el mismo archivo puede ocupar 4 KB a cualquier tamaño de visualización.
Muchos sitios no pueden usar esa descripción directamente. Las redes sociales, los marketplaces, las newsletters por correo, los documentos de Office, la mayoría de apps de mensajería, las tiendas de apps y muchos sistemas de contenidos exigen una imagen rasterizada. Convertir a PNG dibuja las formas a un tamaño fijo, con la transparencia intacta, así que el resultado funciona en cualquier sitio que acepte imágenes.
Como el dibujo se produce en el momento de la conversión, el tamaño de destino no cuesta calidad. Un PNG renderizado a 3000 px directamente desde el SVG es perfectamente nítido, mientras que el mismo logotipo exportado a 300 px y ampliado después se vería borroso.
Cómo se decide el tamaño de salida
Hay un único ajuste, el ancho en píxeles. El alto se calcula siempre a partir de las proporciones del SVG, así que el dibujo nunca se deforma.
Si dejas el campo vacío, el conversor usa el tamaño propio del SVG:
- Los atributos
widthyheightdel elemento raíz<svg>, cuando ambos son números simples o valores en píxeles, comowidth="512" height="256". - Si no, el
viewBox:viewBox="0 0 120 80"da 120×80 px. Es también lo que ocurre cuando el tamaño se indica en porcentaje, em o centímetros. - Si no, el tamaño que el navegador asigne a la imagen.
Muchos juegos de iconos declaran un tamaño de 24×24 o 16×16, lo que da un PNG diminuto. Escribe un ancho para renderizarlo más grande: 512 para un icono nítido al estilo de una app, 1200 para una imagen de vista previa en redes. La lista de archivos muestra el ancho × alto resultante y el tamaño de cada PNG, así que puedes comprobar el resultado antes de descargarlo.
Todos los archivos de un lote usan el mismo ancho. Con iconos de proporciones distintas, eso significa anchos iguales pero altos diferentes.
Qué ancho elegir según el uso
- Pantallas Retina y de alta densidad: renderiza a dos o tres veces el tamaño al que se muestra. Un logotipo que se ve a 200 px de ancho en la cabecera de una página debería tener 400 o 600 px de ancho como PNG.
- Documentos y presentaciones: entre 1500 y 2000 px de ancho mantienen el logotipo nítido incluso cuando la diapositiva se proyecta a pantalla completa.
- Impresión: multiplica el ancho impreso en pulgadas por 300. Un logotipo impreso a 4 pulgadas (unos 10 cm) de ancho necesita 1200 px.
- Favicons e iconos de app: para todo el juego de tamaños de icono de una sola vez, el generador de favicon es más cómodo.
Los anchos muy grandes los limita el navegador, no la herramienta. Los navegadores ponen un tope al número total de píxeles de un canvas; en iPhone y iPad el límite ronda los 16 millones de píxeles, unos 4000×4000. Si una conversión falla con un ancho grande en el móvil, prueba con uno menor o usa un navegador de escritorio.
Por qué el PNG puede no parecerse a la vista previa del editor
Tu navegador renderiza el SVG como una imagen aislada, igual que lo mostraría una etiqueta <img> en una página web. Por seguridad, un SVG en este modo no puede ejecutar scripts ni cargar nada de la red. En la práctica eso provoca algunas diferencias típicas:
- Fuentes. El texto con una fuente web enlazada en lugar de incrustada pasa a una fuente por defecto. Si el nombre de la fuente coincide con una instalada en tu dispositivo, se usa esa, lo que significa que el mismo SVG puede verse distinto en otro ordenador. Convertir el texto a contornos en la herramienta de diseño elimina el problema.
- Imágenes enlazadas. Las imágenes rasterizadas referenciadas por URL no aparecen; las incrustadas como datos dentro del SVG se ven con normalidad.
- Animación e interactividad. Los efectos al pasar el ratón y el comportamiento por script no se aplican, y los SVG animados se capturan como una imagen fija.
- Efectos. Los filtros y modos de fusión dependen del soporte de SVG del navegador, así que los efectos complejos pueden variar ligeramente entre Chrome, Firefox y Safari.
Fondo, archivos y privacidad
Las zonas vacías se mantienen transparentes en el PNG. Si necesitas un fondo sólido, por ejemplo para una plataforma que muestra la transparencia en negro, pasa el resultado por PNG a JPG y elige allí el color de fondo.
Se aceptan archivos SVG de hasta 20 MB. El renderizado y la codificación PNG se hacen en tu navegador, así que los archivos, que a menudo contienen logotipos y material de marca aún sin publicar, nunca se suben. Los resultados se pueden descargar uno a uno o en un ZIP.