Dec 05, 2019
How to Upload SVG to WordPress (The Safe Way)
Having problems when uploading your SVG files to WordPress? No worries, it’s a common problem since WordPress does not support SVG by default. If you want to go around this issue, sit tight and keep on reading this article! We’ll show you know to upload SVG to WordPress with plugins!
What is SVG?
SVG (Scalable Vector Graphics) is a vector image format based on XML text. While common image formats like JPG and PNG are made up of tons of tiny squares called pixels, this format relies on XML markup to describe the lines, shapes, and other image attributes.
SVG didn’t gain popularity until recently, even though it has been around since the 90s. A statistic by W3Techs shows that as of April 2019, only 16.7% of all websites use SVG. But this number is likely to increase as developers and website owners try to meet the current demand for scalability and fast load speed (we’ll explain why later).
Another great thing about SVG is that it has broad support and will work fine on all major browsers like Chrome, Firefox, Safari and Chrome for Android!
Unfortunately, people with IE8 or earlier versions of Chrome and Safari might encounter issues because those browsers are no longer supported with the format. But that should not be an issue for webmasters, as most people don’t use them anyway (they don’t even rank in the top 15 global browsers market share).
Why SVGs Should be Used More Commonly?
A lot of people still aren’t familiar with the SVG format because it’s not as established as pixel graphics. But that should not be the case because this graphics format has a lot of benefits.
The first outstanding advantage of SVG is its scalability. As SVGs are vector-based, they retain the same quality across all screen resolutions.
If a JPG file looks blurry on a particular device because it’s not large enough, SVGs will still look perfectly sharp. You can even zoom in and out as much as you want without losing any quality. This particular feature is really helpful when creating the same, high-quality user experience for all your website visitors.
SVGs are also known for their small file sizes. Hence, they take less space on your web storage and load way faster than raster images. But there’s a catch — if you take a detailed enough image and convert it to SVG, it’ll take up more space than a JPG or PNG all together.
Why so? Well, this is because SVG’s file size is dependent on the complexity of the image. The more detailed the image, the larger the file size. That’s why SVGs are more suitable for logos and icons. If you want to feature a highly detailed image — like a photograph — on your site, JPGs and PNGs are still the way to go.
Another great feature for webmasters is that Google indexes SVGs. All images in this format will show up in Google Image Search, which will give your site a substantial SEO boost.
SVG Not Being Part of the WordPress Core
With these many advantages, why are SVGs not more common? Why doesn’t WordPress allow you to upload SVGs easily?
Well, the main reason why WordPress still hasn’t included SVG as part of its core (default files) is due to security risks it imposes.
Because SVGs are basically text files, people can easily exploit them by inserting malicious code. As a result, your site is exposed to an injection attack that could lead to a catastrophic site hack. Scary, isn’t it?
That’s why you need to be careful when handling SVG files. If you want to upload SVG to WordPress, it’s important to do it the right way — especially if you want to upload files that you obtain for free from unknown sources.
The solution to prevent unwanted code is sanitizing the SVG files. This process removes suspicious code and errors, making the images safe for your site. Recklessly uploading SVGs to WordPress could lead to serious consequences (such as a hacked website and crashed servers).
There’s still an ongoing discussion about making SVG a part of WordPress core features. But because we haven’t reached that point yet, until then, we have to get creative and get some help from other sources when uploading SVG to WordPress.
How to Upload SVG Files to WordPress (Sanitized)
The best way to safely upload SVG files to WordPress is by using Safe SVG — a plugin that automatically sanitizes uploaded SVG files by removing any security flaws. In addition, it also previews the SVG files in the media library so you can add them to your post easily.
This WordPress plugin also has a pro version which allows limiting users who can upload SVGs. This feature is very helpful for websites with several contributors because you can limit the access to those who you trust.
The pro version also includes an SVGO Optimization server — which enables you to reduce the file size and premium support as opposed to forum support.
You can get this plugin from the WordPress repository or from your admin dashboard.
When you install and activate the plugin, there are no setting adjustments required. It simply allows SVGs to be uploaded, while automatically sanitizing them.
Below is an example, where we tried to upload an SVG image before installing Safe SVG. As you can see, WordPress does not allow it due to security issues.
But after installing Safe SVG, we are able to upload it with ease. And we can even see the preview of the image instead of a file icon (which is the case if you use many other SVG plugins).
And that’s it! Turns out uploading an SVG file to WordPress is not hard at all, right?
It’s clear that SVGs have many advantages for your WordPress site. However, due to its text format, people could insert an injection code and make your site vulnerable. This is the main reason why WordPress does not allow its users to upload SVGs by default.
That’s why if you want to upload SVG to WordPress, you have to do it by using some help from SVG Safe – a WordPress plugin. It enables you to upload SVG files and removes any malicious code at the same time so the file cannot be a part of an injection attack.
As safe as it is to use the help of a plugin, we encourage you to always be careful. If you want to download any free SVG images, always check that they are from a trusted and reliable source. Stay safe!