SVG Conversion Guide: When to Keep Vector and When to Rasterize
SVG is one of the best formats on the web — until the platform you're working with rejects it, your email client breaks it, or your WordPress media uploader refuses to accept it. The real question isn't "can I use SVG?" It's "should I use SVG here, for this workflow?"
This guide is about decisions, not definitions. We walk you through exactly when SVG is the right call, when you need to convert it to a raster format, and which format to convert to. The examples skew toward WordPress, WooCommerce, and marketplace sellers — because that's where most of the friction lives.
What's in This Guide
How SVG Works — And Why Platforms Fear It
SVG is XML-based vector markup. It lives in the DOM, can be styled with CSS, animated with JavaScript, and scales infinitely without a single pixel of quality loss. That's what makes it excellent for logos, icons, and diagrams on sites you control.
The problem: those same capabilities make SVG a security liability when you don't control who uploads it. SVG files can carry XSS (cross-site scripting) and XXE (XML external entity) payloads. Real-world security advisories have documented cases where malicious SVG profile images executed attacker JavaScript in other users' browsers.
WordPress core knows this. Its MIME-type whitelist includes JPEG, PNG, GIF, and ICO by default — but not SVG. Core doesn't ship with SVG sanitization, so it simply blocks SVG uploads rather than expose sites to exploitable files. It's a conservative but sensible call.
SVG's security risk is specific to uploads from untrusted sources. An SVG you created yourself in Figma or Illustrator and deploy directly via version control carries no meaningful risk — the danger is when platforms let arbitrary users upload SVG files to shared storage.
Quick Decision Cheat Sheet
Use this as your first filter before going deeper into the guide.
| Situation | Recommendation |
|---|---|
| Logo or icon on your own site, you control the theme | Keep as SVG |
| WordPress media uploader (default install) | Convert to WebP or PNG |
| Etsy, Amazon, eBay product listing images | Convert to JPEG or PNG (SVG not accepted) |
| Email templates (Gmail, Outlook) | Convert to PNG — SVG widely unsupported |
| User-uploaded avatars or media on multi-user platform | Convert or sanitize; raster is safer |
| Diagrams and docs on a site you control | Keep as SVG |
| Marketplace storefronts, third-party dashboards | Convert to WebP/PNG |
| Internal asset archive, developer pipeline | Keep SVG as source; export WebP/AVIF for delivery |
Format quick map after converting
WebP — safe default for WordPress and most modern web use.
AVIF — best compression for modern-only sites and large illustrations.
PNG — use when you need guaranteed transparency support in email or legacy platforms.
JPEG XL — powerful for controlled archives and developer pipelines; not ready as a public web default.
When SVG Is the Best Format
SVG wins on sites and apps you fully control, where you can sanitize files and serve them safely. Here are the real-world cases where you should keep it as vector.
Logos on your own site
Infinite resolution, tiny files for simple shapes, easy theming with CSS, and perfect crispness on retina displays. If you own the theme and can control how files are sanitized or deployed, inline SVG or <img src> SVG for your site header and footer is the right call.
You get dark mode theming for free (a CSS fill change, no new export), and the file itself is often just a few hundred bytes for a flat logo.
Icons and UI elements in web apps
Icon systems in SPAs and design systems benefit significantly from SVG sprites or inline SVG. You get hover states, recoloring, and dark mode support without re-exporting a new PNG every time the design changes. For a set of 50+ icons, a single SVG sprite will almost always beat an equivalent PNG sprite sheet on payload and request count.
Diagrams, charts, and technical documentation
SVG avoids text blurring when zoomed and keeps file sizes reasonable compared to large PNG diagrams. For documentation sites, dashboards, and admin UIs you control, SVG is the obvious choice when precision and accessibility matter.
Animated and interactive graphics
SVG + CSS/JavaScript gives you lightweight animations without video overhead. Explainer diagrams, step-by-step illustrations, and simple motion graphics all work well here — again, on properties you control.
The pattern: SVG wins when you control the front end, control uploads, and need what only vectors can deliver — scalability, theming, interactivity. If any of those conditions fall away, convert.
When You Should Convert SVG to Raster
This is where most of the friction lives for non-developer site owners, ecommerce sellers, and agency clients.
WordPress media library uploads
WordPress will reject SVG uploads with a "Sorry, this file type is not permitted for security reasons" error. You can unlock this with plugins like Safe SVG or custom code, but for non-technical publishers or client sites, that's friction that usually isn't worth adding. Convert your SVG to WebP or PNG before uploading to WordPress — you get a safe, optimized file without any extra plugins or security overhead.
Etsy, Shopify, and other ecommerce marketplaces
Etsy only accepts JPEG, PNG, and GIF for listing photos. SVG is not supported as a product image format, full stop. Shopify has partial SVG support in theme code but most merchants still rely on raster product images, and many marketplace listing tools reprocess everything to JPEG or WebP anyway. Practical rule: if the upload picker doesn't explicitly accept SVG, don't try to force it. Export a raster version upfront.
Email templates and newsletters
This one catches a lot of people off guard. Gmail and Outlook do not reliably render external SVG images. They often show broken images or strip SVG entirely. For logos, icons, and social badges in email, PNG at 2x resolution is dramatically more reliable. Save SVG for the web; use PNG for everything going into an email template.
User-generated content on multi-tenant platforms
Any platform that lets users upload avatars, product images, or attachments is vulnerable if it accepts unsanitized SVG. XSS via malicious SVG uploads is a documented, real-world attack vector. In these contexts, it's often simpler and safer to block SVG at the upload layer and require PNG, JPEG, or WebP instead. The rasterization happens once, the risk is eliminated permanently.
Legacy and enterprise CMS environments
Many enterprise CMSs, DAMs, and LMS platforms either treat SVG as unsafe or don't generate correct thumbnails from vector files. Teams end up using PNG anyway for consistent previews — better to pre-convert with control over output quality than to let the platform rasterize badly.
WordPress and SVG: Security, Sanitization, and Plugin Bloat
WordPress deserves its own section because this is where most site owners hit the wall, and the trade-offs are real.
Why core blocks SVG
Core's MIME-type whitelist is deliberate. Without built-in sanitization, an SVG upload is effectively a potential script upload. WordPress documentation and major hosts like WP Engine explicitly warn that enabling SVG without sanitization is dangerous. This isn't a quirk — it's a security policy.
Enabling SVG safely (if you must)
If you need SVG in WordPress, the two main options are:
A sanitizing plugin like Safe SVG, which runs uploads through a dedicated SVG sanitizer (based on the enshrined/svg-sanitize library), integrates SVGO optimization, and lets you restrict who can upload SVG files. Or custom code using the upload_mimes filter — but only with careful permission scoping so lower-trust roles can't upload arbitrary SVG files.
WP Engine recommends limiting SVG uploads to admin-level users only, even when using a sanitizing plugin.
The plugin trade-off
Every plugin you add to WordPress brings update overhead, potential conflicts, and sometimes database or thumbnail bloat. Plugin bloat is a real drag on maintenance — the same reason we built Mochify to work entirely outside WordPress rather than as another plugin you have to monitor.
For most WordPress sites, the cleaner workflow is: keep SVG files in your design tooling or version control, convert to WebP or AVIF using Mochify before uploading, and skip the SVG plugin entirely. You get 90% of the quality benefits with fewer moving parts and no SVG-specific security surface to maintain.
Real-world benchmark · WordPress logo SVG converted via Mochify
PNG
55 KB
WebP
42 KB
AVIF
24 KB
WordPress logo SVG rasterized at 512px. WebP is 24% smaller than PNG; AVIF is 56% smaller — both with full transparency preserved and no SVG plugin required.
Choosing the Right Raster Format After Converting
Once you've decided to convert an SVG, you have three modern format options worth knowing. Here's how they compare for SVG-derived assets specifically.
| Format | Browser support | Compression vs PNG | Transparency | Best for |
|---|---|---|---|---|
| WebP | ~96% (effectively universal) | 25–35% smaller | Full alpha | WordPress, WooCommerce, general web use |
| AVIF | ~95% (newer but solid) | Often better than WebP, esp. for detail | Full alpha | Modern-only sites, large hero illustrations |
| JPEG XL | Limited/experimental | Excellent, esp. lossless | Full alpha | Controlled archives, developer pipelines |
| PNG | Universal | Larger files (lossless) | Full alpha | Email, legacy platforms, guaranteed compatibility |
WebP browser support
~96%
Safe default for all modern web use
WebP vs PNG size saving
25–35%
Typical saving on SVG-derived logos and icons
AVIF browser support
~95%
Strong, but WebP fallback still recommended
For most people: WebP is the right default. It's supported in every modern browser, compresses SVG-derived logos and icons significantly smaller than PNG (typically 25–35%), and handles transparent backgrounds properly.
For aggressive compression on modern sites: AVIF is worth adding as a primary format with a WebP fallback. It delivers better compression than WebP at equivalent quality, particularly for complex illustrations. Encoding is slower, so it's better suited to a pre-processing workflow than on-demand conversion.
For JPEG XL: It's technically impressive — strong compression, lossless and near-lossless modes, full transparency — but browser support is still limited. Use it for internal asset archives and developer pipelines where you control the decoder, not as a primary web delivery format.
Decision Framework: Step-by-Step
Run your SVG through this before deciding what to do with it.
Step 1 — Where is this SVG going first?
- A site or app you fully control (theme, CSP, sanitization in place) — go to Step 2.
- A third-party platform (Etsy, Shopify marketplace listings, email tool, SaaS profile uploader) — convert to raster unless their documentation explicitly confirms SVG support.
Step 2 — Does the platform officially accept SVG uploads?
- WordPress core media uploader: No — blocked by default. Requires code or plugin.
- Etsy, most marketplaces: No — JPEG/PNG/GIF only.
- Email clients (Gmail, Outlook): No — external SVG widely unsupported.
- If any answer is "no," convert to WebP, PNG, or AVIF for that channel.
Step 3 — Who created the SVG and who can upload it?
- Only your internal team, stored in version control, deployed by developers: treat as trusted, keep as SVG, use proper CSP headers.
- Clients, vendors, or end users can upload SVG through a media library: either sanitize aggressively with Safe SVG or block SVG and require raster uploads. Rasterizing via Mochify before upload is often the simpler path.
Step 4 — Do you need SVG-specific features?
- You need CSS theming, hover animations, or DOM-level accessibility at runtime: keep as SVG on platforms that support it.
- The graphic is static (logo, badge, illustration) and never changes color or shape at runtime: rasterization is fine — choose format based on target.
Step 5 — Format selection after conversion
- WordPress front-end, Shopify storefront, WooCommerce: WebP as baseline, AVIF where you've confirmed support.
- Email or legacy CMS: PNG (for transparency) or JPEG.
- Internal archives or image-heavy controlled apps: JPEG XL storage with WebP/AVIF for delivery.
Workflow Recipes with Mochify
Four real-world conversion workflows. Each uses Magic Flow — describe the output you want in plain English, Mochify handles the rest.
Recipe 1 — WordPress theme logo: SVG to WebP
Export your SVG logo from Figma or Illustrator. Drop it into Mochify and use Magic Flow: type "convert logo SVG to WebP with transparent background." Upload the resulting WebP to WordPress — no SVG plugin needed, no sanitization concerns, and the file will typically be 30–50% smaller than a comparable PNG export. Keep the original SVG in your design files or version control.
Recipe 2 — Marketplace listing stickers: SVG to PNG
Convert vector badges and stickers to PNG at platform-recommended dimensions. Etsy recommends 2000px minimum on the longest side. Use Magic Flow: "convert SVG sticker to PNG at 2000px, keep transparent background." The result meets Etsy's file requirements and preserves the sharp edges and transparency of your original vector.
Recipe 3 — Email-safe logos and icons: SVG to PNG
Convert your logo and key icons to PNG at 2x resolution for email templates. In Mochify: "convert SVG logo to PNG at 400px wide." This avoids the Gmail/Outlook broken-image problem entirely. For a logo that renders at 200px in an email header, a 400px PNG at 2x gives you retina sharpness without SVG's email compatibility risk.
Recipe 4 — Developer pipeline: SVG source, WebP/AVIF delivery
For teams building in Figma or Illustrator, the cleanest workflow is to store all design assets as SVG (or JPEG XL for archival) in version control, then generate WebP and AVIF variants for production at build time using the Mochify REST API (POST /v1/squish?type=webp) or the CLI (--prompt "convert to AVIF and WebP, max 1600px"). This keeps your source files lossless and your delivery files optimized, with no per-export manual steps.
Mochify Workflow: Convert SVG to WebP, AVIF, or PNG
No account required on the free tier. Up to 3 files per session.
- 1 Go to mochify.app and open the Magic Flow prompt — no signup needed to start converting on the free tier.
- 2 Drop your SVG file into the upload zone. Batch processing is supported — up to 25 files on Lite and Pro plans.
- 3 Describe what you want in plain English. For example: "Convert this SVG to WebP with transparent background at 1200px wide" or "Convert to PNG at 2x for email, keep transparency."
- 4 Magic Flow parses your instruction and applies the correct format, dimensions, and quality settings. No format dropdowns, no manual configuration.
- 5 Download your converted file. WebP, AVIF, PNG, or JPEG XL — whichever format you requested. Your SVG source is never stored.
- 6 Upload directly to WordPress, Etsy, your email tool, or wherever the asset is headed — without any plugin or security workaround needed.
Convert your SVGs in seconds
WebP, AVIF, PNG, or JPEG XL — describe the output you want, Mochify handles the rest. No account needed on the free tier. No files stored after download.
Convert SVG now at mochify.app →FAQ
Why does WordPress block SVG uploads by default?
WordPress blocks SVG because SVG files are XML and can contain scripts. Without built-in sanitization, an SVG upload is a potential XSS or XXE attack vector. Core takes the conservative position of blocking SVG entirely rather than shipping sanitization code that could itself be exploited or misconfigured.
Is it safe to enable SVG in WordPress with a plugin?
It can be safe if you use a sanitizing plugin like Safe SVG, restrict SVG uploads to admin-level users only, and keep the plugin updated. But you're still adding security overhead and update maintenance that you'd avoid by simply converting SVGs to WebP or PNG before uploading.
When is SVG definitively better than WebP or PNG?
SVG is clearly better for logos, icons, and vector illustrations on sites you control, where infinite scalability, CSS theming, and tiny file sizes matter more than universal platform support. A flat SVG logo at 2KB beats any raster equivalent.
When should I convert SVG to WebP instead of keeping it?
Convert when the target platform doesn't accept SVG — WordPress default, Etsy, most email tools — or when you don't want to manage SVG sanitization in WordPress but still need small, transparency-supporting images. WebP is the right format for almost all of these cases.
Is AVIF better than WebP for converted SVG graphics?
AVIF often compresses better than WebP and handles transparency well. But encoding is slower and browser support, while strong, is still newer — WebP remains the safer default for broad compatibility. Use AVIF for complex illustrations or hero images on modern-only sites; use WebP as your baseline everywhere else.
Why do SVG logos break in Gmail or Outlook?
Gmail and Outlook do not reliably render external SVG images — they often display a broken image icon or strip SVG entirely. Use PNG or JPEG for logos and icons in email templates. A PNG at 2x resolution will look sharp on retina screens and render reliably across all major email clients.
Does converting SVG to WebP or AVIF remove the security risk?
Yes. Once an SVG is rasterized to WebP or AVIF, it becomes pixel data and can no longer execute scripts. Even if the original SVG contained malicious markup, the raster export is safe to serve and upload. This is one of the underrated benefits of a rasterization workflow.
What's the advantage of using Mochify instead of a generic online converter?
Most online converters store uploaded files on disk and may retain them for hours or days. Mochify processes everything in memory only and discards files immediately after download — no persistent storage, no training data, no retention. You also get native support for WebP, AVIF, and JPEG XL in a single tool, with Magic Flow natural language processing so you can describe the output you want in plain English rather than configuring format dropdowns.
Published May 2026 by the Mochify Engineering Team. Last updated: May 2026.