Title here
Summary here
SVG Support
Enable SVG file uploads in your WordPress media library with automatic security sanitization. Use crisp vector graphics for logos, icons, and illustrations that scale perfectly on any screen size.
Use Cases
- Upload your company logo in SVG format for perfect scaling on all devices
- Use vector icons that stay sharp on retina and high-DPI displays
- Reduce file sizes compared to multiple PNG versions for different sizes
- Display scalable illustrations and graphics without quality loss
How It Works
- Enable the module in Switchboard
- SVG uploads are now allowed in the media library
- Each SVG is automatically sanitized during upload for security
- Use SVGs anywhere you’d use other images (posts, featured images, etc.)
Where to Find It
Location: Upload SVGs through Media → Add New or the media button in any editor.
Why SVGs Need Special Handling
WordPress blocks SVG uploads by default because SVG files can contain malicious code (JavaScript, external references). This module:
- Enables SVG uploads
- Automatically sanitizes each file during upload
- Removes dangerous elements and attributes
- Keeps the visual content intact
Security Sanitization
Every SVG uploaded is automatically cleaned:
Removed Elements
| Element | Reason |
|---|---|
<script> | Can execute JavaScript |
<object> | Can embed external content |
<embed> | Can embed external content |
<iframe> | Can load external pages |
<link> | Can load external resources |
<style> | Can contain malicious CSS |
<base> | Can redirect URLs |
<meta> | Can contain redirects |
Removed Attributes
| Attribute | Reason |
|---|---|
onclick, onload, etc. | Event handlers can execute code |
javascript: URLs | Can execute scripts |
data: URLs | Can contain encoded scripts |
Benefits of SVG
| Benefit | Description |
|---|---|
| Scalability | Looks perfect at any size, from favicon to billboard |
| Small file size | Often smaller than PNG, especially for simple graphics |
| Retina-ready | Automatically crisp on high-DPI displays |
| Styling | Can be styled with CSS (colors, animations) |
| Accessibility | Can contain text that screen readers can access |
Best Practices
When to Use SVG
- Logos and brand marks
- Icons and UI elements
- Simple illustrations
- Infographics and charts
- Decorative graphics
When to Use Other Formats
- Photographs (use JPEG/WebP)
- Complex detailed images (use PNG/WebP)
- Images requiring transparency with photos (use PNG)
Optimizing SVGs
Before uploading, optimize your SVGs:
- Remove editor metadata — Programs like Illustrator add extra data
- Simplify paths — Reduce unnecessary complexity
- Use SVGO — Tools like svgo.com optimize file size
Using SVGs in WordPress
In the Block Editor
- Add an Image block
- Upload or select your SVG from the media library
- The SVG displays and scales properly
As Featured Images
SVGs work as featured images, but some themes may not display them correctly in all contexts (like thumbnails in archive pages).
In Theme Templates
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.svg" alt="Logo">Inline SVG (Advanced)
For maximum control (CSS styling, animations), output SVG code directly:
<?php echo file_get_contents(get_template_directory() . '/images/icon.svg'); ?>
FAQ
Is it safe to allow SVG uploads?
With this module, yes. Every SVG is sanitized during upload, removing potentially dangerous code. However, only allow trusted users to upload files — this is good practice regardless of file type.Why doesn’t my SVG show in the media library thumbnail?
SVG thumbnails require CSS fixes which this module provides. If you still see a generic icon, try refreshing the page or clearing your browser cache.Can I upload SVGs with embedded fonts?
Embedded fonts within SVGs generally work. For external font references, convert text to outlines in your design software before exporting.Why is my SVG displaying very small or very large?
SVGs without defined width/height attributes or viewBox may display incorrectly. Open the SVG in a text editor and ensure it has aviewBox attribute defined.Will existing SVGs in my library be sanitized?
No, sanitization only happens during upload. Existing SVGs remain unchanged. If you’re concerned about existing files, re-upload them through this module.Export SVGs from design software with “Export for Web” or equivalent options. This removes unnecessary metadata and reduces file size.
While SVG sanitization removes known dangerous elements, only allow file uploads from trusted users. This security principle applies to all file types, not just SVGs.
PRO
Upgrade to Pro
Get access to all 147 modules with a single license