SVG o PNG: vector o píxeles para logotipos y gráficos

SVG o PNG es en realidad vector contra píxeles. Un archivo SVG guarda las formas como instrucciones (dibuja aquí un círculo, rellénalo de este color), así que un navegador o una impresora lo redibuja nítido a cualquier tamaño, desde un favicon de 16 píxeles hasta el rótulo de una tienda. Un PNG guarda una cuadrícula fija de píxeles de color, así que se ve perfecto a su tamaño y borroso cuando lo amplías. Usa SVG para logotipos, iconos y gráficos sencillos en la web y en impresión. Usa PNG para fotos, ilustraciones con textura y todo lo que subas a redes sociales.

Qué es en realidad un archivo SVG

SVG significa Scalable Vector Graphics, y es texto plano. Ábrelo en un editor de código y verás un marcado legible, no ruido. Por eso los SVG pesan muy poco en formas sencillas, por eso puedes cambiarles el color con CSS y por eso los buscadores y los lectores de pantalla pueden leer el texto que contienen.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Studio Nine">
  <defs>
    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#4f46e5"/>
      <stop offset="1" stop-color="#db2777"/>
    </linearGradient>
  </defs>
  <circle cx="32" cy="32" r="28" fill="url(#g)"/>
  <path d="M22 40 L32 20 L42 40 Z" fill="#ffffff"/>
</svg>

Un PNG del mismo símbolo necesita un archivo distinto para cada tamaño en que quieras que se vea nítido, y ninguno se puede cambiar de color sin volver a exportarlo. La documentación de SVG de MDN cubre el formato al completo.

SVG y PNG frente a frente

¿SVG o PNG para un logotipo?

Guarda el logotipo maestro en SVG. Es el único archivo que sirve para cualquier uso futuro: la cabecera de una web, una pancarta de 4 metros, un bordado, un papel con membrete, un favicon. Después exporta PNG a partir de él para los sitios que no aceptan vectores, sobre todo redes sociales, firmas de correo y algunas herramientas de presentaciones.

Cuándo PNG es la elección correcta

Lo vectorial solo funciona cuando la imagen se puede describir como formas. En cuanto una imagen tiene detalle fotográfico, luz suave, grano o miles de cambios sutiles de color, un PNG pesa menos y es más fiel. Vectorizar una foto en un SVG produce un archivo más pesado y peor a la vez.

• Fotografías y collages de fotos.
• Ilustraciones con textura: grano, papel, pinceladas, efectos de película.
• Publicaciones, historias y carruseles para redes, ya que las plataformas solo aceptan píxeles.
• Capturas de pantalla y todo lo que se capture de una pantalla.
• Fondos ricos con capas de luz y ruido.

¿SVG o PNG para una web?

En una web, usa SVG en línea o un archivo SVG para logotipos, iconos e ilustraciones, y formatos modernos para las fotos. Los iconos SVG escalan con el texto, pueden usar currentColor para seguir tu tema y no necesitan archivos aparte para pantallas de alta densidad. Para imágenes de mapa de bits, WebP suele ser mejor opción que PNG en tus propias páginas.

Cómo convertir SVG a PNG

1. 1

   Decide el tamaño más grande que necesitas

   Una foto de perfil a 1080×1080 o una firma de correo a 1200×400 (el doble de su tamaño de visualización de 600×200). Exporta una vez a ese tamaño en lugar de ampliar después.

2. 2

   Exporta desde el original

   En Figma, Illustrator o Inkscape, exporta el marco como PNG al tamaño elegido. Exportar desde el vector mantiene nítidos todos los bordes.

3. 3

   Mantén la transparencia activada

   Deja el fondo vacío para que el PNG tenga canal alfa. Consulta fondo transparente para comprobarlo.

4. 4

   Revísalo al 100%

   Mira los trazos finos y el texto pequeño a tamaño real. Si se rompen, simplifica el logotipo para los usos pequeños en lugar de entregar un archivo emborronado.

Ir en sentido contrario, de PNG a SVG, no es una conversión sino un redibujo. La vectorización automática funciona con un logotipo plano y contundente y falla con cualquier cosa con textura o bordes suaves. Si tu logotipo solo existe como PNG, haz que lo redibujen una vez en vectorial; todos los archivos posteriores serán mejores.

Las exportaciones Pro de Gradiently cubren los dos lados: un diseño puede salir como SVG para la web y la impresión, o como PNG transparente para las plataformas, desde el mismo archivo. Exportar SVG y PNG transparente muestra cómo, y PNG o JPG resuelve la otra elección habitual.