How to Use SVG Files in WordPress
WordPress blocks SVG uploads by default for security — here's how to enable, sanitize, and display SVG safely.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Why WordPress Blocks SVG by Default
WordPress disables SVG uploads because SVG can contain JavaScript (XSS vulnerability). Third parties submitting SVGs through upload forms could inject malicious code. The solution is sanitization — stripping scripts from SVG before allowing uploads.
Enable SVG Uploads Safely — Recommended Plugin
The 'Safe SVG' plugin (by 10up) sanitizes SVGs on upload and enables the file type. It's the recommended approach.
- Install: Plugins → Add New → search 'Safe SVG' → Install → Activate
- After activation: SVG files can be uploaded in Media Library
- All uploaded SVGs are sanitized (scripts and event handlers removed)
- Thumbnails are generated correctly in the Media Library
Alternative: Code-Based SVG Enable
Add to your theme's functions.php: function allow_svg($mimes) { $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter('upload_mimes', 'allow_svg'); — But this skips sanitization. Only safe if all uploads are from trusted admins.
- Add to functions.php or a custom plugin
- Restrict SVG uploads to Administrator role only
- Never use this on membership sites where untrusted users can upload
- Always prefer the Safe SVG plugin approach for sanitization
Displaying SVG in WordPress
Once SVG is enabled: upload via Media Library, then insert in posts and pages via the Image block.
- Media Library → Add New → upload SVG
- In Gutenberg: Image block → select your SVG from media library
- For logos: Appearance → Customize → Site Identity → select SVG logo
- In Classic Editor: Insert Media → select SVG
- For inline SVG: Custom HTML block → paste SVG code directly
Frequently Asked Questions
Is it safe to allow SVG uploads on WordPress?
Safe with sanitization. Use the Safe SVG plugin which strips malicious code from uploaded SVGs. Without sanitization, SVG uploads are a security risk (XSS).
Why does my SVG look blurry in WordPress?
WordPress may be serving a rasterized thumbnail instead of the SVG. In the Image block, check the image source URL — ensure it ends in .svg, not .png. The Safe SVG plugin fixes thumbnail generation.
Can I use an SVG as my WordPress logo?
Yes. With Safe SVG installed, upload your SVG logo and set it in Appearance → Customize → Site Identity → Logo. SVG logos scale perfectly on all screen densities.
How do I add SVG icons to WordPress menu items?
Use a Custom HTML block or edit the menu item URL. For theme-level icons, use functions.php to add SVG inline to menu output. Plugins like 'Menu Icons by ThemeIsle' provide a visual interface.
Does page speed improve with SVG instead of PNG for logos?
Usually yes — SVG logos are typically 80–90% smaller than equivalent high-res PNGs. Smaller files improve Core Web Vitals (LCP) scores.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free