Uploading SVG images to WordPress
WordPress by default doesn’t let us upload svg files. We can easily change this behaviour with a simple function in the functions.php file. This is the code:
// Allow SVG uploads
function allow_svgimg_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'allow_svgimg_types');
Just copy and paste it anywhere before the ending tag ?> in your theme functions.php file. And that’s it – now you can choose files with SVG format when you aploading them in WordPress. You won’t see the preview image though. So it’s important to name the files accordingly before upload, so you’ll know which one is which.
Remember to use Child Theme
If you using Divi or any other pre-made theme – don’t forget to make a child theme first, and make the changes in functions.php file in your child theme. If you make changes in the parent themes files – then all your changes will be gone if you update the theme.
Super helpful and easy – thanks a lot!
While this standard code snippets totally works for uploading a SVG, it will NOT support getting the file size of the SVG. Unfortunately, I haven’t yet found a better solution apart from using a plugin.
Can I remove the code from functions file after uploading? Would this close the vulnerability that developers often discuss about svg?
Yes, you can remove the code after uploading the file.
Thanks but after this i can add the svg but they are not displaying in the builder as well as in the front end
Make sure you specify the size of the SVG image, it might not be visible otherwise.
Thanks for this tutorial
This didnt work for me. I still cant upload svg to my website. Any other options to enable it?
I personally use the Safe SVG plugin, https://wordpress.org/plugins/safe-svg/
I am a HUGE fan of SVG and I’ve done all sorts of things to get SVG into my sites.
A couple words of warning.
1) If you accept contributions from visitors, you have to know that SVG is functional code, NOT merely an image. Don’t allow just anyone one to upload SVG to your website. The most appropriate capability is “unfiltered_html” so that will probably work for this.
Something like this should work:
<?php
if(current_user_can('unfiltered_html')) {
add_filter('upload_mimes', 'allow_svgimg_types');
}
2) This sort of thing will be best in a plugin. Then you can easily port it from project to project and you don't have to worry if you change themes or what have you.
3) When using SVG in an image tag, remember you don't have quite same sort of control as if you dumped your SVG directly into the code. You should edit the text of your SVG from something like:
…
to
…
This moves the “real” size of your image into the viewbox, and forces the SVG to take up 100% of the space of the image. It then says that the aspect ratio is to preserved by moving the image into the centre of the space and scaling it so that one edge meets the edge of the tag (its letter boxed), You can move it around as you like (top left, bottom right, what ever) but your image won’t be squashed.
The only downside to this is that you will _have_ to set a height and width explicitly on the because the SVG doesn’t have a natural image size (so it will scale weirdly). Personally, I prefer it that way.
For security reasons, I recommend removing the code you added to the functions.php after uploading the SVG.
Thank you! This is helpful.
great tip Ania, thanks a lot!!