Cómo elegir las dimensiones en píxeles al convertir SVG a PNG

Distingue las coordenadas SVG de los píxeles PNG

Un SVG describe formas, trayectorias, texto y otros elementos mediante coordenadas e instrucciones de dibujo. Los cuatro valores de viewBox indican la posición mínima en los ejes y el ancho y alto de un rectángulo interno. Sirven para relacionar el dibujo con una ventana de visualización, pero no obligan a crear un PNG con esa misma cantidad de píxeles. Un único SVG puede representarse como icono pequeño, ilustración de documentación o gráfico grande sin que cambie su viewBox.

El PNG, en cambio, guarda el resultado renderizado en una cuadrícula fija. Una vez exportado, ampliar el archivo no vuelve a calcular las curvas como lo haría el SVG; solo interpola los píxeles disponibles. Por eso, copiar un viewBox de 100 por 100 como salida de 100 por 100 puede ser insuficiente para una colocación grande o innecesario para una miniatura. Antes de convertir, anota el mayor tamaño de presentación, si habrá ampliación y si debe verse bien en pantallas de alta densidad.

• Interpreta el viewBox como coordenadas internas
• Anota el tamaño máximo de presentación antes de exportar

Trabaja hacia atrás desde el destino real

Empieza por el ancho y el alto con los que la imagen aparecerá de verdad. Un gráfico mostrado a 200 píxeles CSS de ancho puede utilizar un mapa de bits mayor para conservar nitidez en una pantalla densa, pero el multiplicador adecuado depende del producto, del dispositivo y de las restricciones de entrega. Aumentar dimensiones ofrece margen de muestreo, aunque también suele elevar el peso y el coste de procesamiento. Prueba una opción razonable en lugar de seleccionar el máximo permitido sin comprobarlo.

Si el gráfico tiene varios destinos, registra cada uno por separado. Un símbolo de 24 píxeles en una barra, una ilustración de 300 píxeles en una guía y una imagen para una diapositiva no necesitan la misma salida. Prepara versiones específicas cuando una sola imagen grande desperdicie recursos o una pequeña vaya a ampliarse. Incluye las dimensiones en los nombres aprobados y conserva una breve referencia del uso, para que otra persona no coloque por error la variante de icono en una ubicación grande.

• Define tamaños distintos para web, aplicación, documento o presentación
• Crea varias salidas cuando los destinos difieran mucho

Conserva la proporción y examina el espacio interno

Cuando la proporción del viewBox y la del rectángulo de salida no coinciden, el renderizador debe resolver la diferencia. Según el SVG y los ajustes, puede mantener el dibujo completo y añadir espacio, recortar una parte o estirarlo. No modifiques ancho y alto de forma independiente salvo que esa deformación sea intencionada. Calcula la relación original, cambia ambas medidas juntas y revisa el resultado, porque no todos los conversores aplican exactamente la política que imaginas.

También conviene separar el tamaño del lienzo del área realmente ocupada por el dibujo. Un viewBox amplio puede contener márgenes grandes; en ese caso, aumentar las dimensiones del PNG seguirá dejando pequeño el símbolo visible. Si controlas el SVG, corrige el espacio innecesario en el origen. Si no puedes editarlo, considera un recorte cuidadosamente comprobado después de rasterizar, sin eliminar sombras ni márgenes deliberados. Añadir píxeles no elimina el espacio interno ni repara por sí mismo un recorte equivocado.

• Haz coincidir el rectángulo de salida con la proporción original
• Revisa por separado el lienzo y los límites del dibujo

Prueba trazos finos, texto y recursos vinculados

Los trazos que se ven suaves como vectores pueden caer entre límites de píxel al rasterizarse en pequeño, por lo que parecen borrosos o desiguales. El texto diminuto y los huecos estrechos también pueden cerrarse. Examina el PNG al tamaño final, no solo con gran aumento. Si la versión mínima pierde legibilidad, valora simplificar el diseño, reforzar trazos y separaciones, aumentar el tamaño de salida cuando sea viable o preparar una variante específica para tamaños pequeños.

Algunos SVG dependen de tipografías, imágenes externas, hojas de estilo, máscaras o efectos disponibles en un visor pero no en el conversor. Una fuente sustituida puede alterar saltos de línea y proporciones; un recurso que no se carga puede desaparecer. Compara el PNG con una representación fiable del original. En una marca denominativa, inspecciona cada letra; en una ilustración, confirma que estén presentes las imágenes, gradientes, máscaras y sombras. Tener las dimensiones correctas no compensa una dependencia ausente.

• Revisa trazos y texto al tamaño de uso
• Confirma que fuentes e imágenes vinculadas se hayan renderizado

Verifica el PNG descargado dentro de su contexto

Procesa primero un SVG representativo con la herramienta de SVG a PNG y las dimensiones elegidas. Descarga el resultado y abre el archivo en otro visor para confirmar su ancho y alto reales. Revisa proporción, márgenes vacíos, recorte, colores, texto y uniformidad de los trazos. Si necesitas transparencia, coloca el PNG sobre fondos claros y oscuros para detectar un relleno blanco inesperado o un halo en los bordes. La vista previa del conversor no sustituye la inspección del archivo guardado.

Después inserta exactamente ese PNG en la página, aplicación o documento de destino. Comprueba el menor y el mayor tamaño previstos y averigua si algún sistema lo amplía más de lo esperado. Si se ve suave, distingue entre falta de píxeles, cambio de una fuente o imagen durante la conversión y redimensionado posterior. Nombra las variantes aprobadas con sus dimensiones y conserva el SVG para generar futuros tamaños sin pérdida acumulada. Repite la prueba en al menos un navegador o visor representativo, ya que el reescalado puede diferir del mostrado de forma aislada.

Antes de convertir una carpeta completa, repite esta comprobación con otro SVG que tenga detalles distintos. Un archivo con texto y otro con formas simples pueden reaccionar de manera diferente al mismo tamaño. Documenta qué dimensiones, fondo y ubicación fueron aprobados. Así, una corrección futura parte de una decisión verificable y no de sucesivas conversiones hechas a ciegas.

• Confirma las dimensiones en el archivo descargado
• Coloca la misma salida en el destino más pequeño y en el más grande