A while ago, I created an HTML block in my sidebar (scroll down to see that) for promoting affiliate products and other WordPress tutorials. In that block, I wanted to insert vector graphics.
SVGs are designed for describing two-dimensional vector, mixed raster graphics in XML.
Vector graphics (.SVG) take less space and are easily scalable. You can scale them and adjust their sizes without degrading their quality. They also load faster when compared to other image formats such as .png. SVGs are highly recommended to be used in WordPress content boxes.
Most of the browsers today support SVG by default. Vector graphics amazingly scale according to different screen sizes. On a retina display, you can expect crisp images without any quality degradation.
SVG stands for scalable vector graphics. WordPress allows you to upload multiple image formats, which include .jpeg, .jpg, .gif and .png.
However, WordPress initially doesn’t allow you to upload them. When you try to upload a .svg graphic, you’ll see the following error:
SVG graphics are as safe as other image formats. However, many believe SVGs are not images; they are documents. They are vulnerable, and if your contributors are given access to upload them, you might want to stop that.
Here’s an excerpt from Bjorn Johansen’s post about why SVGs are not allowed in WordPress:
SVG allows a lot of attack vectors by design, not by accident, so we’re not talking about unpatched security issues here. SVGs are really easy to exploit and the only “safe” way we can deal with them is to disallow features. JPEG and PNG are not designed to allow for e.g. arbitrary code execution.
You can expect WordPress core to allow them soon by default. Let’s take a look at how to easily upload SVGs in WordPress.
In this article, I’ll share multiple ways for you to do that. You’ll be easily able to upload your favorite vector graphics using any of the given methods.
Let’s get started.
1. Editing Functions.php
This method is what I would recommend you to follow. It is simple, and you won’t be installing any extra plugin, which is always better for your website’s speed and loading time.
The first method to enable WordPress to accept.SVG is editing your functions.php file. Copy and paste the code below, which only allows SVG images as it authorizes MIME type. Which then allows the WordPress media library to accept SVG images.
Copy and paste the code below in your functions.php file:
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_action('upload_mimes', 'add_file_types_to_uploads');If the above code doesn’t work, you can alternatively copy/paste the following code:
function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');See how the code above is allowing .svg+xml to be seen as an image type in line 2.
If you can’t find the functions.php file or you don’t know how to add the code properly, leave this part. Install the code snippets plugin and paste the code into it. You won’t have to touch any file.
Let’s move on to our second method.
2. WordPress Plugins To Enable SVG Support
If you don’t want to touch your theme files, that’s okay. There are a few plugins that will help you upload SVG in no time.
Safe SVG
Safe SVG is currently the finest free plugin to upload SVGs.
The plugin is made to sanitize the dirty and vulnerable SVG/XML code. This will ensure you are using an already sanitized code that won’t expose your website’s various vulnerabilities.
It also comes in a pro version, Safe SVG pro. I would recommend you to check that out if you want to:
- Choose who can upload SVG.
- Scan SVGs
- Host your SVGs on another server
- Optimize them for speed
Using the Safe SVG plugin is simple. Go to your WordPress dashboard, click on add new plugins and install Safe SVG. You can also download it from here and install it manually.
SVG Support
SVG Support also allows you to easily upload vector graphics in your WordPress media library.
Install and activate the SVG support plugin, and you are good to go. There are no more settings, and you’ll be able to upload SVG files in your media library.
I would highly recommend you to go to SVG Support plugin settings and check the box to turn on “restrict SVG upload privileges to administrators only.”
Now only can other administrators will be able to upload any kind of SVG graphics. This will tighten the overall security of your WordPress blog.
WP Extra File Types
WP Extra File types is another plugin you can use to upload SVGs directly to your media library. Not only that, it will help you shortly if you’d ever wanted to add other file types such as .rq, .st, and so on.
Upon installing the plugin, go to its settings and click on the .svg checkbox. Click on save settings and refresh the page.
If somehow you are still unable to upload .svg files, clear your cache. Purge the server cache and also clear the browser cache. This will help quickly solve the problem.
That’s all.
By now, you should be able to upload every .svg graphics on your WordPress website. SVGs are amazing performers, especially when you put them as your logo in your content boxes and media kit. For converting your existing logo or any other image that you want from JPG, PNG to SVG, you can use online platforms like Convertio for free.
Some more articles you would like to read:
- How To Prevent Your Images from Getting Blurred And Smaller In WordPress
- How To Automatically Make Your Images SEO Friendly in WordPress
- How To Show Last Updated Date Above WordPress Blog Posts
Share this tutorial with your WordPress friends, and let me know what method you chose in the comments below.
Leave a Reply