Escrito por Jamie Park — Diseñador UI/UX. Llevo 8 años creando interfaces y sistemas de diseño. Desarrollé SVG2PNG después de cansarme de tener los activos de clientes en servidores aleatorios. Más sobre mí →
Una vez, una gestora de redes sociales me envió una captura de pantalla de la publicación de Instagram de nuestro cliente. El logo — que yo había diseñado como un SVG nítido — era un desastre pixelado. Ella había abierto el SVG en Preview, y arrastró el raster resultante de 72dpi a Canva. No la culpo. El flujo de trabajo que va de “el equipo de diseño entrega el SVG” a “la plataforma de redes sociales lo muestra correctamente” está roto, y es nuestro trabajo como diseñadores cerrar esa brecha.
Ninguna de las plataformas sociales principales acepta subidas de SVG. Ni Instagram, ni Twitter/X, ni LinkedIn, ni TikTok, ni Facebook. La razón oficial es la seguridad — los SVG pueden contener JavaScript embebido, lo que supone un riesgo de cross-site scripting. La razón real, sospecho, es que soportar la subida de SVG requeriría que cada plataforma construyera una tubería de renderizado completa, y ninguna considera que valga la pena el esfuerzo de ingeniería.
Esto significa que todo activo SVG destinado a redes sociales debe ser rasterizado. Y si lo rasterizas con un tamaño, perfil de color o formato incorrectos, el resultado se verá peor que si nunca hubieras usado SVG en primer lugar.
| Plataforma | Tipo de activo | Tamaño de exportación (px) |
|---|---|---|
| Publicación (cuadrada) | 1080 × 1080 | |
| Historia | 1080 × 1920 | |
| Twitter/X | Cabecera | 1500 × 500 |
| Twitter/X | Imagen en el feed | 1200 × 675 |
| Portada de empresa | 1128 × 191 | |
| Imagen de publicación | 1200 × 627 | |
| Foto de portada | 851 × 315 | |
| Imagen de enlace compartido | 1200 × 630 | |
| TikTok | Portada de vídeo | 1080 × 1920 |
Tengo esta tabla guardada en marcadores. SVG2PNG te permite establecer una escala de exportación personalizada: multiplica el tamaño nativo de tu SVG por el factor necesario para llegar a estas dimensiones. Para la mayoría de iconos y logos diseñados en una cuadrícula de 24×24, eso supone una escala de 45× para publicaciones de Instagram.
Las plataformas sociales recomprimen todo lo que subas. Instagram aplica su propia compresión JPEG al 85% de calidad sin importar lo que le envíes. Si subes un JPG, lo estás comprimiendo dos veces: una al exportarlo, otra en los servidores de Instagram. Esta doble compresión crea bandas visibles en los gradientes y artefactos de contorno alrededor del texto.
Yo exporto en PNG al doble de las dimensiones de visualización, y dejo que la plataforma reduzca la escala y comprima una sola vez. El resultado es notablemente más limpio, especialmente para gráficos con texto, colores planos o bordes definidos — que es precisamente lo que suelen ser los activos SVG.
Todas las plataformas sociales eliminan los perfiles de color y dan por sentado que usas sRGB. Si exportas con Display P3 o Adobe RGB embebido, los colores cambiarán: a veces de forma sutil (tu azul de marca se vuelve ligeramente morado), otras de forma drástica. Me enteré de esto cuando el logo azul marino de un cliente de fintech se volvió morado intenso en LinkedIn. Su guía de marca especifica P3, y tuve que explicarle que a las redes sociales no les importan las guías de marca.
Al exportar desde SVG2PNG, selecciona un color de fondo si tu SVG tiene transparencia. Las plataformas sociales convierten las áreas transparentes en blanco por defecto, lo que puede hacer que logos de colores claros desaparezcan por completo en los feeds del modo claro.
Por cada activo de marca que diseño, ahora exporto un “kit de redes sociales”:
Todos se exportan al doble de densidad de píxeles, en sRGB, con el color de fondo correcto. Los nombro brandname-social-ig.png, no logo-final-v3-EXPORT.png. La convención de nombres importa más de lo que crees: los gestores de redes sociales manejan docenas de activos al día, y los nombres de archivo claros evitan que cojan el archivo equivocado.
El SVG original se queda en Figma. Los PNG son archivos derivados. Una única fuente de verdad, salidas optimizadas para cada plataforma. Este flujo de trabajo me ha ahorrado más mensajes de Slack preguntando “por qué se ve borroso el logo” de los que puedo contar.
Escrito por Jamie Park — Diseñador UI/UX. Llevo 8 años creando interfaces y sistemas de diseño. Desarrollé SVG2PNG después de cansarme de tener los activos de clientes en servidores aleatorios. Más sobre mí →