Allow SVG Uploads In WordPress media
Today we explore how to allow SVG uploads in WordPress. By default the WordPress media section does not allow SVG’s. This is due to security, although it’s debateable whether this restriction is really necessary. As it becomes ever more common to use SVG’s, there are many situations where we would like to store them in WP media attachments. Use the snippet below to allow SVG uploads in WordPress.
How to allow SVG uploads in WordPress media? It’s easier than you might think, checkout the snippet you can use below.
// Enable SVG uploads to media.
add_filter( 'upload_mimes', function ( $types ) {
$types['svg'] = 'image/svg+xml';
return $types;
});The snippet above uses the “upload_mimes” filter with a callback function to add SVG file types to the accepted mime type list. This is the answer to how to allow SVG uploads in WordPress. This can be placed in your theme functions.php file or can be added in a custom plugin.
In case you’re wondering can I adapt this snippet to work for JSON files or other file types that are usually blocked, yes you can! The tricky part is finding the correct mimetype string (in this example the image/svg+xml part, and certain types of files like JSON may require a different mimetype, or the mimetype may fail due to some additional server restriction beyond the control of WordPress or PHP.
Why Allow SVG Uploads In WordPress
SVG files are fast-loading and the enormous selection of great SVG icons make it a file type that is very useful and practical for nearly any WordPress website. When you allow SVG uploads in WordPress your going to greatly increase the chance that site editors and content producers will be able to choose SVG’s first instead of relying on image formats that can be uploaded by default into media.
Load SVG Files As Markup
Just because you have used a snippet to allow SVG uploads in WordPress doesn’t mean your website will get the optimal use of those files. When SVG files are rendered as images, they are put as a source in an HTML image tag. This works fine and enables some control over sizing and placement. Yet for the best benefits of SVG’s like using CSS “fill” rules to colorize icons, and to make the SVG very fast loading, you will want to render the SVG tag directly as HTML.
How can you do that? Well it’s something that does require a bit of putting on the developer hat, because you’ll need to detect in your templates whether a given image file happens to be an SVG. Once detected then instead of using the URL of the SVG file as a source in an image tag, instead you’ll use PHP to get the file contents, and then output those file content (which have the <svg> tag) directly into the output.
We can’t provide a code snippet for this currently as the solution varies quite bit depending on the context like where the SVG is referenced, where it’s stored, and whether you’re working in a page template or working in a different part of the codebase. Hopefully though if you’re a fairly seasoned dev, you will be able to figure out a code snippet that works based on the context of your project using this solution description. Try it out, the benefits are well worth the effort because you’ll be able to render SVG’s in WordPress using the most performance optimized approach.
Need Help With WordPress Site Optimization?
If you need a professional developer to help optimize your WordPress site including the use of cool tricks and hacks like this one where we allow SVG uploads in WordPress, then you might want to consider the development services available from SaberWP.
