How to upload SVG image files in WordPress

Posted by on

WordPress doesn’t allow you to upload SVG images or files through WordPress media uploader. It gets rejected when attempting to upload them through the media uploader. Thus, in this post, I’m going to show you how to upload SVG image files in WordPress directly using WordPress’s “Add Media” button.

SVGs or Scalable Vector Graphics are images which don’t pixelate. PNGs, on the other hand, has a limited resolution. If you enlarge/zoom PNG images over the resolution it’ll go Blur and you can’t do anything to resolve it. This is the primary reason why everyone is migrating towards using SVG images on their websites.

Also, SVGs are now supported in all the web browsers except Internet Explorer 9, lower and old Android (V3) browsers.

Many of the webmasters use SVGs against big images for optimising their site speed. If created nicely, SVGs are comparatively smaller in size than PNGs and other image formats.

Now let’s see how we can upload SVG files in WordPress.

How to upload SVG image files in WordPress

How to upload SVG image files in WordPress?

Method 1 (Using a Plugin)

1. Install a Plugin.

Login to your WordPress dashboard and head over to the Plugins Page, click “Add New”. Now search for the Plugin name – WP Extra File Types. Install the plugin which comes up first. The plugin is authored by Davide Airaghi.

You can also go with the old method by downloading the plugin and then uploading it to your WordPress dashboard from “Add New Plugin” Page.

Using this plugin, you can not only upload SVG files but any other type of files from your WordPress Media Uploader.  After installing the plugin, click on “Activate” so that it should start functioning.

2. Make the Plugin work for SVG files.

After installing and activating the plugin, go to your WordPress Settings, then click on Extra file types. Here you’ll find a huge list of all the file formats that you want to upload through your WordPress Media Uploader. For now, we want to upload SVG files, so select Scalable Vector Graphics (SVG) from the list by checking it and hit the “Save Changes” button. Refer the image below.

How to upload SVG image files in WordPress

After saving it, you are free to upload SVG files in WordPress.

3. Give it a try.

Now let’s get a test drive of this plugin by uploading a simple SVG image from WordPress Media Uploader.

Just follow the usual routine.

  1. Go to your WordPress Dashboard > Media > Add new.
  2. Select the SVG file from your computer.
  3. Upload it.

If everything works fine without a single sound of errors then it’s working. There shouldn’t be any errors according to me. If you still get any errors then you need to contact your web hosting provider and ask them for a modification on your server. Though the plugin works smoothly on Apache servers platform.

You might like: 5 Best Free Plugins for WordPress 2017 ( Must have Plugins ).

Method 2 (via functions.php)

So you don’t want to install another plugin because there are already many plugins installed. Don’t worry! You can also upload SVG files in WordPress by modifying your theme’s functions.php file.

  1. Head over to WordPress Dashboard and click on Appearance menu.
  2. Click on the “Editor” and on the right-hand side find Theme functions (functions.php).
  3. Open the functions.php file and paste the following code to the file in the end before the closing of PHP ?> tag.

Check the image given below for reference.

After adding this code in your functions.php file, click on “Update File” button to save the changes. This will allow you to upload SVG (Scalable Vector Graphics) and SVGZ (Compressed Scalable Vector Graphics) from WordPress Media Uploader.

Few more words about SVG

  • SVG images do not lose their quality if zoomed or resized. This is a great step towards a retina-ready world wide web.
  • SVG is disabled in WordPress by default for a reason. SVG files are wrapped in pure XML thus it raises the security risk in WordPress. Make sure you have an SSL Certificate installed on your WordPress site as XML files are hackable.
  • Every element and attribute in SVG files can be animated on the website using HTML5, CSS3 and JavaScript.
  • SVG files can be printed with high quality at any resolution.

Related posts for you:

If you liked this post then share it with your friends and colleagues on Social Media.  If you have any questions or suggestions regarding the post, feel free to ask in comments.

Share This Post

Last updated: June 4, 2017

Authored by :

I'm 3nions's co-founder and an individual contributor to the team. Besides being a Web Enthusiast, I like writing on SEO & Marketing. Also, I'm a Co-founder and Managing Director of illustrake.

5 comments

I am new to WordPress and being my own IT person. How-to posts like this really help. Thanks

You’re Welcome 🙂

Recently I enrolled in a web design course, so we’re of course creating Vector and PNG images. I’ll probably use the plug-in since there’s more file options listed. Both of choices seem fairly easy.

Hi, Jacqueline.

Thanks for interacting. Plugins are the primary solutions for most of the WordPress problems. You can use any of the methods above to enable SVG uploads in WordPress.

Keep visiting.

Regards,
Prakhar.

Hi, Prakhar !

I think I would recommend the first method for everyone, because playing with WordPress source files may later create issues when there is an update available, no?

Regards

Leave a Reply