How to add SVG images to WordPress Library

by | Quick Divi Tips | 3 comments

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.

Have you seen our Divi Child Themes?

We offer a great selection of high-quality designs to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!

3 Comments

  1. Adam van den Hoven

    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.

    Reply

Trackbacks/Pingbacks

  1. WordPress: SVG Dateien in die Mediathek hochladen - […] Freie Übersetzung des Blogartikels „Uploading SVG images to WordPress“ von der Webseite […]

Submit a Comment

Your email address will not be published. Required fields are marked *


Sign up to our newsletter!


Shares

Sign up for the good stuff!

Free Resources for Divi Lovers!

Join our Newsletter!

We'll provide you with updates on new tutorials, webdesign assets and special offers. Get top quality Divi goodies straight into your inbox! Read our Privacy Policy to learn how we manage and protect your submitted information.

Pin It on Pinterest