Cómo convertir un logotipo SVG a PNG al tamaño adecuado

PNG es el formato de mapa de bits más parecido a lo que da SVG: sin pérdida, con bordes nítidos y fondo transparente, así que el logotipo queda limpio sobre cualquier color.

El PNG se dibuja al tamaño que declara el SVG: sus atributos width y height, o su viewBox si faltan. Nuestro propio logotipo es un buen ejemplo de la trampa. Su archivo solo declara viewBox="0 0 32 32", así que el PNG salió de 32 × 32 píxeles: sirve para la pestaña del navegador, pero no para una presentación.

Arreglarlo lleva un minuto. Abre el SVG en cualquier editor de texto, busca la etiqueta <svg> del principio y añade width y height con la misma proporción que el viewBox, por ejemplo width="512" height="512". Guarda y vuelve a convertir: el logotipo se redibuja a partir de sus formas al nuevo tamaño.

Convertimos nuestro logotipo de 304 bytes después de declarar cuatro tamaños distintos. Cada PNG se redibujó a partir de las formas, así que incluso el más grande tiene bordes perfectamente limpios, y los archivos siguen siendo pequeños porque un logotipo es casi todo color plano.

También lo probamos. Estirado a 512 píxeles en un editor de imágenes, el PNG de 32 píxeles se convirtió en un cuadrado blando y borroso: el programa solo puede adivinar los píxeles que faltan. La versión redibujada desde el SVG a 512 píxeles salió nítida. Vuelve siempre al SVG y convierte al tamaño que necesitas, en lugar de agrandar un PNG que ya tienes.

SVG a WebP conserva el fondo transparente y dio un archivo más pequeño: 5,6 KB para el logotipo de 512 píxeles frente a 11,7 KB en PNG, ideal para webs. SVG a JPG también funciona, pero JPG no tiene transparencia, así que el fondo queda blanco. Para imprimir, elige SVG a PDF: el logotipo sigue siendo un dibujo vectorial, nítido a cualquier tamaño de impresión, y el nuestro ocupó 1,2 KB declarásemos el tamaño que declarásemos.

Si el texto del logotipo usa una fuente que no está incrustada ni convertida en trazados, puede dibujarse con otra parecida. Los diseñadores suelen convertir el texto en trazados antes de entregar un logotipo; si el tuyo se ve distinto, pide una versión con trazados. Las imágenes que el SVG enlaza desde otras webs no se cargan.

Usamos el archivo de logotipo que sirve esta web, sin cambios salvo el ancho y el alto que añadimos, y lo convertimos con los conversores de SVG de esta web, que dibujan la imagen con librsvg sobre el mismo software que usan nuestros servidores. El peso de los archivos de tu logotipo dependerá de sus colores y detalle, pero la regla vale para cualquier SVG: el tamaño declarado decide el tamaño del PNG.