SVG for Social Media: How to Export SVGs That Don't Look Terrible on Instagram, Twitter, and LinkedIn

For designers who deliver brand assets to social media managers · June 2026 · 5 min read

A social media manager once sent me a screenshot of our client's Instagram post. The logo — which I'd designed as a crisp SVG — was a pixelated mess. She'd taken the SVG, opened it in Preview, and dragged the resulting 72dpi raster into Canva. I don't blame her. The workflow from "design team delivers SVG" to "social media platform displays it correctly" is broken, and it's our job as designers to bridge it.

Why Social Platforms Hate SVG

None of the major social platforms accept SVG uploads. Not Instagram, not Twitter/X, not LinkedIn, not TikTok, not Facebook. The stated reason is security — SVG can contain embedded JavaScript, which is a cross-site scripting risk. The real reason, I suspect, is that supporting SVG uploads would require every platform to build a rendering pipeline, and none of them consider it worth the engineering effort.

This means every SVG asset destined for social media must be rasterized. And if you rasterize at the wrong size, wrong color profile, or wrong format, the result looks worse than if you'd never used SVG at all.

Export Dimensions Cheat Sheet

I keep this table bookmarked. SVG2PNG lets you set a custom export scale — multiply your SVG's native size by whatever factor lands at these dimensions. For most icon/logos designed on a 24×24 grid, that means 45× scale for Instagram posts.

PNG vs JPG for Social: I Choose PNG Every Time

Social platforms recompress everything you upload. Instagram applies its own JPEG compression at 85% quality regardless of what you give it. If you upload a JPG, you're compressing twice — once in your export, once on Instagram's servers. The double compression creates visible banding in gradients and ringing artifacts around text.

I export as PNG at 2× the display dimensions, then let the platform downscale and compress once. The result is noticeably cleaner, especially for graphics with text, flat colors, or sharp edges — which is exactly what SVG assets tend to be.

Color: sRGB or Nothing

Every social platform strips color profiles and assumes sRGB. If you export with Display P3 or Adobe RGB embedded, the colors will shift — sometimes subtly (your brand blue becomes slightly purple), sometimes dramatically. I learned this when a fintech client's navy blue logo turned royal purple on LinkedIn. Their brand guidelines specify P3, and I had to explain that social media doesn't care about brand guidelines.

When exporting from SVG2PNG, select a background color if your SVG has transparency. Social platforms flatten transparent areas to white by default, which can make light-colored logos disappear entirely on light mode feeds.

What I Send to Social Media Managers

For every brand asset I design, I now export a "social media kit":

• One PNG at Instagram post dimensions (1080×1080)
• One PNG at LinkedIn/Twitter share dimensions (1200×630)
• One PNG at 2× the largest needed size, for them to resize themselves

All exported at 2× pixel density, sRGB, with the correct background color. I name them brandname-social-ig.png, not logo-final-v3-EXPORT.png. The naming convention matters more than you'd think — social media managers handle dozens of assets per day, and clear filenames prevent them from grabbing the wrong one.

The original SVG stays in Figma. The PNGs are derivatives. One source of truth, platform-optimized outputs. This workflow has saved me more "why does the logo look blurry" Slack messages than I can count.

Written by Jamie Park — UI/UX Designer. designing interfaces and design systems for 8 years. Built SVG2PNG after getting tired of client assets on random servers. More about me →