How to upload SVG files to WordPress

Would you like to upload SVG files to your WordPress site’s media library? WordPress allows users to upload many different file types, like images, audio and even video files. However, you may have noticed that uploading an SVG file is not possible in a standard WordPress installation.

Luckily, there are workarounds available to be able to upload SVG files to your WordPress site. In this blog I’ll explain what SVG is, why you’d want to use it, why WordPress doesn’t allow you to upload SVG’s and how to work around this.

What is an SVG?

SVG is short for Scalable Vector Graphics. Where a normal image (like JPG or PNG images) use pixels, an SVG file uses vector graphics based on XML markup language.

The main benefit and reason for using vector graphics (like SVG files) is that you can zoom in on these images endlessly without losing quality. This type of graphics is perfect for graphical elements on your site, like logos or other images that contain graphics and text. For example, the logo of this website (shown below) is an SVG file.

Unlike PNG and JPG images, you can zoom in on the SVG image endlessly without losing any quality or seeing pixelated edges.

With an SVG, you can also be sure that your logo will look sharp on devices with retina displays, like Apple’s iPhone, iPad and Mac. And if a new device lands on the market tomorrow, your image will still look sharp even if that device has a 10x pixel density.

Another huge benefit for using SVG files is that they are often much smaller in file size than JPGs and PNGs. This can dramatically improve the page speed scores of your (WordPress) site.

How to create an SVG image

Creating an SVG image can be done with software made for editing and creating vector graphics. The most well known application for this purpose is Adobe Illustrator, but it’s definitely not the only one. When you’ve created a vector graphic in Illustrator, you can export it as an SVG by going to File > Export > Export As. Then select SVG to export your image. More on exporting SVG’s from Illustrator can be found here.

SVG files can also be created with animations. There are different tools available to animate SVGs. A well known (freemium) example is SVGator.

Why WordPress doesn’t allow SVG files

By default, WordPress won’t allow you to upload SVG files because of potential security issues that come with SVG files. SVG files are based on XML, which can be prone to so called XXE attacks (External Entity attacks).

Solutions

To use SVG files in a safe way, the files need to be sanitized. That means removing code that could easily be manipulated or otherwise messed with. You can do this yourself, but you can also install a plugin like the Safe SVG plugin built by 10up.

Safe SVG plugin

This plugin does two things:

• Allow SVG uploads: The Safe SVG plugin makes sure that users are allowed to upload SVG files to the WordPress media library (and view them there).
• Sanitize SVGs: The plugin also makes your SVG files safer by sanitizing them.

You can download the Safe SVG plugin for free from WordPress.org, or you can install it directly from your WordPress admin panel.

After activating the plugin, you can immediately start uploading SVG files to your WordPress site’s media library. You can then use these SVG images in your posts, pages or as a logo. To use an SVG file as your site’s logo, you’ll often need to edit it in a Theme Options panel or the WordPress Customizer. Whether this is possible depends on which WordPress theme you’re using. I’ve tested it with Divi and it works like a charm.

Note: Sometimes, using an SVG image as your website’s logo won’t work immediately. This is because SVG files don’t have dimensions in pixels. If your logo doesn’t show up, it’s probably because it’s being shown with 0x0 pixels dimensions. In this case, you’ll need to apply a default minimal width (or height) to your logo from your site’s CSS editor. Need some help? You can contact me.

Do it yourself

You can also choose to work without a plugin. For instance, you can add custom PHP code to your site-specific plugin or your theme’s functions.php file. More on that can be read in this blog from WP Engine. While this option may sound tempting, you’ll still need to make sure the SVG files you’re uploading are actually secure. If you’re not a very technical person, I’d highly recommend to go for the (Safe SVG) plugin option instead.

Finally

Using SVG files for graphical elements has many benefits. When used properly, they can improve your website’s performance because they’re generally smaller files than PNGs or JPGs. In addition, SVG files can be enlarged or zoomed in endlessly without ever losing quality and it even supports animations.

By default, WordPress doesn’t allow users to upload SVG files. This has to do with certain security risks that come with XML, the markup language upon which SVG files are based. Luckily there are solutions like the Safe SVG plugin or custom coding. For most users, the plugin is definitely the safer option, as it also sanitizes your SVG files and makes sure they are safe. This way your website remains protected against certain security issues.

In terms of security, it also helps to use a good hosting company for your site. One example of such hosting company is SiteGround.