If you have ever tried to upload an SVG logo or icon into the standard WordPress Media Library, you were likely greeted with a frustrating error message: "Sorry, this file type is not permitted for security reasons."
Unlike JPEGs and PNGs, which are flat pixel grids, SVGs are XML documents containing code. Because it is code, an SVG can theoretically contain malicious scripts (XSS attacks) if uploaded by a bad actor. To protect millions of sites, WordPress disables SVG uploads out of the box. However, SVGs are essential for modern web design. In this guide, we will show you how to safely bypass this restriction and start using crisp vector icons on your site.
Method 1: Using a Safe SVG Plugin (Recommended)
The easiest and safest way to enable SVG support in WordPress is by using a dedicated plugin that sanitizes the files as they are uploaded. This ensures any potentially malicious scripts hidden in the SVG code are stripped out before the file hits your server.
- Log into your WordPress admin dashboard and navigate to Plugins > Add New.
- Search for "Safe SVG" (or another highly-rated SVG sanitizer).
- Install and activate the plugin.
That's it! There are usually no settings to configure. You can immediately drag and drop SVG files into your Media Library and insert them into your posts or Gutenberg blocks exactly like regular images.
Method 2: Adding SVG Support via functions.php
If you are a developer who prefers to avoid installing extra plugins, you can manually allow SVG MIME types by adding a snippet to your theme's functions.php file. Warning: This method does not sanitize the SVGs. Only use this method if you completely trust all users who have upload privileges on your site.
function add_svg_to_upload_mimes( $upload_mimes ) {
$upload_mimes['svg'] = 'image/svg+xml';
$upload_mimes['svgz'] = 'image/svg+xml';
return $upload_mimes;
}
add_filter( 'upload_mimes', 'add_svg_to_upload_mimes', 10, 1 );After saving this code, your Media Library will accept SVG uploads. However, WordPress often struggles to generate thumbnails for SVGs natively, so they may appear as broken image icons in the backend grid view.
Method 3: Inline SVGs using a Custom HTML Block
If you only need to use an SVG once—for example, a specific icon in a blog post—you don't need to upload it to the Media Library at all. You can paste the raw SVG code directly into the Gutenberg editor.
- Open your SVG file in any text editor (like Notepad or VS Code) and copy all the code.
- In your WordPress post editor, add a "Custom HTML" block.
- Paste the raw SVG code inside the block.
This is an incredibly powerful method because inline SVGs can be styled with CSS. You can target the SVG classes to change hover colors or animate the paths, which is impossible if the SVG is loaded via a standard <img> tag.
Conclusion
Adding SVG support to WordPress is a mandatory step for building a modern, fast, and retina-ready website. While the default security restrictions can be annoying, utilizing a sanitizer plugin like Safe SVG provides the perfect balance of security and design freedom.
Whether you are uploading a lightweight vector logo or pasting inline icons for CSS animations, breaking free from pixelated PNGs will make your WordPress site look significantly more professional.
Need SVGs for your WordPress site?
If you only have a PNG or JPG version of your logo, upload it to our free converter and generate a clean SVG file instantly.
Open the Converter →About the Author
Faisal is a web developer and design enthusiast with a passion for web performance, scalable graphics, and creating tools that make developers' lives easier.