How to upload SVG files to WordPress safely

access_time
hourglass_empty

Do you have problems uploading SVG files to WordPress? Don't worry, this is a common problem because WordPress does not support SVG by default. If you want to solve the problem, sit down and continue reading this article! We will show you what SVG is and how to upload SVG files to WordPress with plugins!

What is an SVG file?

SVG (Scalable Vector Graphics - Scalable vector graphics) is a vector image format based on XML text. Common image formats such as JPG and PNG is made up of tons of small squares called pixels but the SVG file format relies on XML markup to describe lines, shapes, and other visual attributes.

SVG files were not popular until recently, although they have been around since the 1990s. A statistic of W3Techs shows that as of April 2019, only 16.7% of all websites used SVG. But this number can increase as developers and website owners try to meet current needs for scalability and fast download speeds (we'll explain why later).

Another great thing about SVG is that it is widely supported and works well on all major browsers like Chrome, Firefox, Safari and Chrome for Android!

Unfortunately, users of IE8 or older versions of Chrome and Safari may experience problems because those browsers do not support this format. But that is not a problem for webmasters, because most people no longer use these browsers (These browsers are not ranked in the top 15 browsers with the world market share).

Why should SVG files be used more commonly?

A lot of people are still not familiar with the SVG image format because it is not set up as pixel graphics. But this should not happen because this graphic format has many benefits.

The first outstanding advantage of SVG is Ability of extension. Because SVG images are vector based, they remain the same across all screen resolutions.

If the JPG file is blurry on specific devices because it's not big enough, the SVG file still looks perfect. You can zoom in and out as much as you want without losing quality. This special feature is really useful when bringing a high quality user experience to all site visitors.

It is known that SVG image has small file size It takes less web memory space and loads faster than raster images. But interestingly - if you take a picture with enough detail and convert it into an SVG image, it will take up more space than either JPG or PNG combined.

Why so? This is because the SVG file size depends on the complexity of the image. The more detailed the image, the bigger the file size. That's why SVG files are more suitable for logos and logos. If you want to highlight highly detailed images - like photos - on web pages, JPG and PNG are still the best way.

Another great feature for webmasters is Google indexing SVG files. All images in this format will be displayed in Google Image Search, helping your site to increase SEO significantly.

SVG does not belong to WordPress Core

With so many advantages, why aren't SVG files more popular? Why doesn't WordPress allow uploading SVG files easily?

The main reason WordPress doesn't include SVG files as the core (default files) is because of the security risks it poses.

SVG images are basically text files, anyone can easily exploit it by inserting malicious code. As a result, the website is exposed to attacks, which can lead to serious hacks. Scary right?

That is why you need to be careful when handling SVG files. If you want to upload this file to WordPress, it's important that you do it properly - especially if you want to upload free files that you get from unknown sources.

The solution to prevent unwanted code is Sanitize SVG file. This process eliminates suspicious code and errors, helping keep images safe for the site. Accidentally uploading SVG images to WordPress can lead to serious consequences (such as hacked websites and server crashes).

There are still many The discussion is ongoing about making SVG images a core feature of WordPress. But because we have not achieved this, by then, we have to create and receive support from other sources when uploading SVG files to WordPress.

How to upload SVG files to WordPress (processed)

The safest way to upload SVG files to WordPress is to use them Safe SVG - plugin automatically scans uploaded SVG files by removing security errors. In addition, it shows SVG files in the media library so you can add them easily.

This WordPress plugin has a pro version that allows users to upload SVG files. This feature is useful for sites that have a lot of contributors because you can restrict access to people you trust.

Pro version included SVGO Optimization server - allows you to reduce file size and provide advanced support instead of forum support.

You can get this plugin from the WordPress repository or from the admin panel.

When installing and activating the plugin, there is no need to adjust the settings. It simply allows SVG files to be uploaded, while automatically scanning them.

Here's an example, where we tried to upload an SVG image before installing Safe SVG. You can see, WordPress does not allow due to security issues.

Cannot upload SVG file to WordPress

But after installing Safe SVG, we can upload it easily. And it is even possible to preview images instead of file icons (case if you use many other SVG plugins).

uload SVG file to WordPress

That's it! It turns out uploading SVG files to WordPress is not difficult at all, right?

Summary

Clearly SVG images have many advantages for a WordPress site. However, due to the text format, people inject injection code and leave the site vulnerable. This is the main reason why WordPress does not allow users to upload SVG by default.

Explain that if you want to upload SVG images to WordPress, you must use some support from SVG Safe - WordPress plugin. It allows you to upload SVG files and remove all malicious code at the same time so that the file is not attacked.

For the safety of using plugin support, we encourage you to always be careful. If you want to download any SVG images for free, check that they are from a trusted source. Wish you safe!