How to upload SVG vector images to WordPress

First thing first, there are just few lines of code for WordPress to accept SVG (Scalable Vector Graphics) file format. So, it’s not recommended to use a plugin for this.

By default, WordPress reject SVG file upload since svgs are basically XML. Allowing SVG upload also enabled the user to to upload malicious xml file. So, please make sure your users are trustworthy or they are only administrator or internal staff. Never give SVG upload permission to general author or editor you don’t know.

Did you know that now your can directly use svg in your image tag?

Now, you can direct use the svg file just like an image in the image tag:

<img src="image.svg">

This is a great news for designers and web developer because now you can server high resolution graphic without a 2x or 3x image.

How about browser compatible? It’s considered safe to use svg in image tag for most of the modern browser.

Step 1: Add this code to your function.php

function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');

Step 2: You might need add some XML tag to the SVG

If you still can’t upload your SVG to the WordPress after added the code above. Changes are tXML the g is missing in your SVG file.

WordPress requires your SVG to have a XML tag in the header but some graphic software remove this when exporting your SVG.

Edit your SVG in any text editor and add the XML tag below:

<?xml version="1.0" encoding="utf-8"?><svg .....

Now you can upload your SVG to WordPress.

Leave a Reply

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

5 × 5 =

FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenEmailWhatsappEmail
×
facebook
Hit “Like” to follow us and stay tuned for the latest posts