GUÍA DE FORMATOS · ALLONLINE EDITORIAL

SVG vs PNG: elige el formato correcto para cada trabajo.

SVG y PNG pueden verse muy nítidos, pero resuelven problemas distintos. SVG describe formas vectoriales; PNG guarda una cuadrícula de píxeles.

12–14 minGuía completaSVG ↔ PNG

En esta guía

01Respuesta rápida 02Comparativa 03Elige SVG cuando importa la escala 04Elige PNG cuando importan los píxeles 05El peso depende del contenido 06Flujo recomendado 07Casos de uso 08Flujo recomendado 09Errores frecuentes 10Preguntas frecuentes

00 · Respuesta rápida

Respuesta rápida

SVG y PNG pueden verse muy nítidos, pero resuelven problemas distintos. SVG describe formas vectoriales; PNG guarda una cuadrícula de píxeles.

SVGElige SVG

Logos, iconos, diagramas, ilustraciones y gráficos interactivos.
Independiente de resolución; mantiene nitidez a cualquier tamaño.
Opacidad por elemento, máscaras, recortes y gradientes.
geometría escalable y editable

PNGElige PNG

Capturas, UI, pixel art y gráficos raster transparentes.
Dimensiones fijas; necesita resolución suficiente.
Canal alfa completo.
píxeles sin pérdida y transparencia

Regla práctica: Conserva el original editable como SVG cuando sea posible y exporta PNG cuando una plataforma o flujo necesite salida raster.

01 · COMPARATIVA

SVG vs PNG

Los dos formatos optimizan cosas distintas. Compara el uso real antes de convertir.

Criterio	SVG	PNG
Modelo de imagen	Geometría vectorial descrita como markup XML.	Cuadrícula raster con compresión sin pérdida.
Escalado	Independiente de resolución; mantiene nitidez a cualquier tamaño.	Dimensiones fijas; necesita resolución suficiente.
Compresión	Optimización de texto y vectores, no compresión fotográfica.	Compresión sin pérdida; no usa un slider de calidad como JPG.
Transparencia	Opacidad por elemento, máscaras, recortes y gradientes.	Canal alfa completo.
Mejor uso	Logos, iconos, diagramas, ilustraciones y gráficos interactivos.	Capturas, UI, pixel art y gráficos raster transparentes.
Compatibilidad	Excelente en navegadores modernos; algunas plataformas de subida lo restringen.	Compatibilidad prácticamente universal.

VECTORSVG

RASTERPNG

02 · GUÍA DE FORMATOS

Elige SVG cuando importa la escala

SVG y PNG pueden verse muy nítidos, pero resuelven problemas distintos. SVG describe formas vectoriales; PNG guarda una cuadrícula de píxeles.

SVG suele ser mejor para logos, iconos, diagramas e ilustraciones construidas con formas. Puede escalar sin pixelarse.

Logos y marcas
Iconos de interfaz
Ilustraciones simples
Diagramas y gráficos

03 · GUÍA DE FORMATOS

Elige PNG cuando importan los píxeles

PNG es raster. Funciona muy bien para capturas, arte con textura e imágenes donde quieres conservar cada píxel. También admite transparencia.

Capturas de pantalla
Arte raster
Recursos transparentes
Imágenes con textura

04 · GUÍA DE FORMATOS

El peso depende del contenido

Un icono simple puede ser muchísimo más ligero como SVG, mientras que una imagen compleja puede no tener sentido como vector. Hay que comparar el recurso real, no solo la extensión.

05 · GUÍA DE FORMATOS

Flujo recomendado

Conserva el original editable como SVG cuando sea posible y exporta PNG cuando una plataforma o flujo necesite salida raster.

06 · CASOS DE USO REALES

Casos de uso reales

Empieza por el trabajo, no por la extensión.

Logos, iconos, diagramas, ilustraciones y gráficos interactivos.

SVG

geometría escalable y editable

Capturas, UI, pixel art y gráficos raster transparentes.

PNG

píxeles sin pérdida y transparencia

Escalado

SVG

SVG: Independiente de resolución; mantiene nitidez a cualquier tamaño. PNG: Dimensiones fijas; necesita resolución suficiente.

Transparencia

SVG

SVG: Opacidad por elemento, máscaras, recortes y gradientes. PNG: Canal alfa completo.

07 · FLUJO RECOMENDADO

Flujo recomendado

Protege el mejor original y exporta de forma deliberada para el destino.

1. Identifica el original

Decide si el original es fundamentalmente vectorial o raster.

2. Conserva el mejor master

Conserva la fuente editable de mayor calidad antes de generar derivados.

3. Optimiza antes de distribuir

Elimina metadatos, dimensiones o complejidad estructural innecesarios.

4. Exporta para el destino

Genera el formato y tamaño que realmente necesita la plataforma destino.

5. Verifica en contexto

Comprueba nitidez, transparencia, peso y apariencia al tamaño real.

08 · ERRORES FRECUENTES

Errores frecuentes

01

Cambiar la extensión esperando que mejore la calidad.

02

Perder el master editable después de exportar.

03

Asumir que un formato siempre pesa menos.

04

Usar assets raster enormes para todos los tamaños.

05

Ignorar transparencia o restricciones de plataforma.

09 · FAQ

Preguntas frecuentes

01SVG vs PNG: Mejor uso?+

SVG: Logos, iconos, diagramas, ilustraciones y gráficos interactivos. PNG: Capturas, UI, pixel art y gráficos raster transparentes.

02SVG vs PNG: Compresión?+

SVG: Optimización de texto y vectores, no compresión fotográfica. PNG: Compresión sin pérdida; no usa un slider de calidad como JPG.

03SVG vs PNG: Transparencia?+

SVG: Opacidad por elemento, máscaras, recortes y gradientes. PNG: Canal alfa completo.

04SVG vs PNG: Compatibilidad?+

SVG: Excelente en navegadores modernos; algunas plataformas de subida lo restringen. PNG: Compatibilidad prácticamente universal.

10 · DECISIÓN FINAL