How to add SVG images to WordPress Library

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.

Shares

Have you seen our

Divi child themes?

Divi Toolbox plugin?

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

13 Comments

  1. Mike

    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.

    Reply
  2. Thomas

    Can I remove the code from functions file after uploading? Would this close the vulnerability that developers often discuss about svg?

    Reply
    • Ania Romańska

      Yes, you can remove the code after uploading the file.

      Reply
  3. sawan jaiswal

    Thanks but after this i can add the svg but they are not displaying in the builder as well as in the front end

    Reply
    • Ania Romańska

      Make sure you specify the size of the SVG image, it might not be visible otherwise.

      Reply
  4. Osman

    This didnt work for me. I still cant upload svg to my website. Any other options to enable it?

    Reply
  5. 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
    • Ben

      For security reasons, I recommend removing the code you added to the functions.php after uploading the SVG.

      Reply

Leave a Reply to Osman Cancel reply

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

Enjoing our content?

You might find this interesting…

License Details

REGULAR LICENSE

Single Site

A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

EXTENDED LICENSE

Unlimited Sites

An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

SUPPORT & UPDATES

Each license is a one-time payment. There are no annual fees. You get lifetime access to product updates. Support is provided for 6 months from the date of purchase.

Server Requirements

SERVER SETTINGS:

  • PHP 7.2 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)

PHP.INI SETTINGS:

  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module

PHP MODULES:

  • allow_url_fopen

Would you like to...

Consult Ania and fellow students?

Join the conversation inside our private FB group.

Would you like to...

Get support privately?

Submit a support ticket via your account page.

Ask Ania?

Submit a question for the next live Q&A session.

Consult fellow students?

Join the conversation inside our private FB group.