2 Simple Clicks to Enable WordPress SVG Support

by | Last Updated Dec 31, 2020 | WordPress | 0 comments

Today I’m going to show you how to enable WordPress SVG support securely.

We will discuss SVG browser support and some warnings if you plan on switching to SVG.

SVG is a vector graphic commonly used to display logos and icons on websites. 

They are most popular among programmers and designers since they are scalable image formats. SVGs generally take up less file space, and they’re not pixelated on retina screens.

WordPress, by default, does not support uploading SVG files mainly due to security concerns.

Someday, we will be able to use SVG in WordPress core, but we aren’t quite there yet.

What’s an SVG?

Wikipedia describes an SVG (Scalable Vector Graphics) is a two-dimensional vector image format with interactivity and animation support.

Even your code or text editor can manipulate them.

The World Wide Web Consortium has been developing the SVG specification as an open standard since 1999.

The adoption rate of SVGs is currently 29.1% on all websites, but it’s rising, as you can see below.

SVG Historical Trend

Famous sites like Google, ESPN, Reddit, Dropbox, and our Rovity website use SVGs.

Browser Support for SVG

All major browsers and mobile browsers currently support SVG.

SVG Browser Support

Advantages of SVGs

An SVG is a vector format so that it can be easily resized in both browsers and photo editing tools. These features make them an excellent choice for graphic and web designers.

When editing a PNG or JPG, you usually can’t upscale them without pixelation.

With SVGs, they look pixel perfect (or should I say vector perfect) every time, even if they are upscaled infinitely.

Therefore, they are one of the best image formats for retina display devices.

Google indexes SVGs, so it’s good for SEO. Google will index images linked to SVG documents and show them in an image search.

SVGs are usually (but not always) smaller files than PNGs or JPGs.

You can speed up your WordPress site by using SVGs because it will decrease the overall page size.

All of our servers are GZIP-enabled so that they can handle your SVG files. Try Rovity’s premium shared hosting.

Many sites utilize SVGs for logos and icons that are not too detailed. The file sizes will decrease significantly.

PNGs and JPGs are generally preferred for images with more detail like perhaps your blog post “featured images.”

Also, it’s crucial to note that Facebook and Twitter do not support SVGs.

The Importance of SVG Security

WordPress does not provide SVG support yet because of security concerns. 

You can follow the ongoing discussion about SVGs in WP core, which started in 2013.

SVG is an XML file, so it has some vulnerabilities that regular image formats don’t have.

XXE, XSS, and bomb nested entities are examples of such attacks.

Many SVG plugins use the following code on the repository. These plugins enable SVG uploads in the WordPress media library via the MIME type modification.

This is a dangerous way to do this!

So don’t just go ahead and download the first free SVG plugin you find or copy-paste this code and think you’re good to go.

function cc_mime_types($mimes) {
 $mimes['svg'] = 'image/svg+xml';
 return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

The Solution Is to Sanitize SVG

Sanitization avoids security issues (such as a malicious code injection), code conflicts, and errors by cleaning code or input.

This can include data encoding, string filtering, and validation, etc.

The SVG-Sanitizer library by Daryll Doyle plays a role here. 

Daryll described it as his attempts to create a decent sanitizer for SVG in PHP. To see this tool in action, have a look at the SVG sanitizer demo.

It would help if you also considered who can upload SVGs to your site. 

For example, if you are on a site with multiple authors, you don’t know what SVG they will upload. And this could expose your site.

It is advisable to restrict SVG uploads to administrators and those who follow the security matters.

How to Enable WordPress SVG Support Safely

Daryll has created a WordPress plugin called WP SVG. Safe SVG is another name for this plugin.

Safe SVG Plugin WordPress Directory

Safe SVG provides SVG-Sanitizer functionality for uploading SVG images to WordPress media libraries.

The plugin also allows you to view SVGs as standard images in the WordPress media library.

You can download Safe SVG for free from the WordPress repository. You can also search for it in the “Add New” plugins page in your WordPress dashboard.

With a few clicks, you can get up and go.

The premium version is also available at wpsvg.com. Premium version provides an additional SVG optimization and the ability to restrict certain users from uploading SVGs.

We’ll use the free version in the example below.

The plugin has no settings after installation. When you upload your SVGs, Safe SVG will sanitize them.

Below, you can see the SVG file we used in place of our logo. You can view it in the media library.

SVG Logo WordPress Media Library

This also allowed us to edit the WordPress header’s SVG logo using the Theme’s control panel.

The image below shows that the .svg file is indeed being loaded. On retina screens, it looks beautiful.

WordPress SVG Logo Browser Inspector

That’s all!

You now have WordPress SVG support enabled safely.

Utilize this plugin and or method at your own risk since it is not endorsed or supported by WordPress core.

If you were already uploading SVGs with only the MIME type snippet, please do it this way.

Are you using SVGs for the first time?

Make sure you have GZIP enabled on your Web server for “image/svg+xml” files. Thus, they will be compressed and load as quickly as possible.

Sometimes system administrators only enable the standard file types. 

Note: All Rovity servers already enable GZIP for SVGs.

Summary

SVGs make your site more visually appealing.

SVGs are great for your logos and icons, ensuring they look pixel-perfect on every device.

What are your thoughts on WordPress SVG? Have you added SVGs to your WordPress site yet?

We engineered our cloud infrastructure with Performance, Speed, Scalability, and Security in mind.

That’s why we built Rovity with AWS, CloudLinux OS, DirectAdmin, and LiteSpeed Web Server.

Come and experience the next generation of shared hosting on the cloud

By Jafar Muhammed

Jafar Muhammed has 10+ years of experience in WordPress, web hosting, domain names, DNS, CDN, server administration, etc. He is an open web advocate. He is the CEO of Rovity, the fastest growing premium shared hosting startup in India.

Check Out These Related Posts

Avoid These 8 Blogging Mistakes in 2021

Avoid These 8 Blogging Mistakes in 2021

Blogging plays a large part in the $400 billion content marketing industry. Blogs are an excellent way to make substantial extra income. They're also powerful tools for generating traffic to your website. Blogging isn't just a part-time gig and a digital marketing...

read more
How to Add HTTP Security Headers in WordPress

How to Add HTTP Security Headers in WordPress

Would you like to add HTTP security headers to your WordPress website? With HTTP security headers, your WordPress website will have an extra layer of protection. This will prevent malicious activity from affecting your website performance. The tutorial below will walk...

read more

0 Comments

0 Comments

Submit a Comment

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