WordPress SVG: 4 Steps To Enable SVG Files In WordPress

>>> Shared from Original Post iThemes

If you want to make your online content as appealing to site users as possible, it’s important to master the art of using visuals. And WordPress SVG plays a big role in perfecting your online image content.

Fortunately, there are some simple workarounds to this dilemma that you’ll learn in this guide about WordPress SVG. As you read on, you’ll learn the pros and cons of using SVG files in WordPress, when they should be used, and different ways to enable SVG support on the WordPress platform.

Let’s take a look.

Default WordPress Image Formats

Out of the box, WordPress allows site owners to use several different image formats, such as PNG, JPG, and GIF. The format you use may depend on if you are sharing WordPress featured images, your logo, or an embedded blog image. But no matter which image you’re sharing, WordPress currently lacks native SVG image support for those images.

This is somewhat surprising to many WordPress site owners because Scalable Vector Graphics files offer a lot of benefits over rasterized images like JPGs and PNGs.

But there is a good reason why WordPress doesn’t natively support them: security concerns. SVG files aren’t always the most secure type of files.

What Is an SVG File?

SVG isn’t technically an image format, but rather a markup language. SVGs create images from curves and allow animation, as you’ll discover as we move forward.

The SVG file type has been a standard for over 20 years. Currently, nearly 20% of published websites use SVGs.

And the number continues to grow.

SVGs have excellent browser support and work on all major browsers such as:

  • Chrome
  • Firefox
  • Edge
  • Safari
  • Android
  • Opera

They even work on Internet Explorer (if anyone is still using that!). Only Internet Explorer Version 8 does not support SVG. But with such a tiny market share, there’s not a lot to be concerned about there. Once you know what is an SVG file you have to make the decision about when to utilize this type of file on your website.

WordPress SVG

Are SVG Files a Security Risk?

By far, the biggest disadvantage to using SVG is that they have some well-known concerns when it comes to site security. Since they are built-in XML, they are highly vulnerable to the injection of malware that can cause all kinds of troubles for your website.

As an example, an SVG file that’s been compromised can, in theory, be used to spy on you through your microphone or camera, or directly download malicious software to your device. This is one of the many reasons you should limit who can upload SVG files into your website to ONLY your administrators.

And this is precisely why the SVG file type isn’t supported by WordPress core. 

Get the bonus content: A Guide to WordPress Security

Should You Use SVG On Your WordPress Website?

With the security risks in mind, SVG files offer a number of benefits.

For starters, an SVG file is created in vector format. This means that they will scale to any size or dimension without losing image quality. And that is the opposite of how a PNG or JPG works. Those file types are known as rasterized images and are limited by the original size of the image.

This kind of image scalability makes using vector graphics a much better solution for building a responsive website. Additionally, SVG files look a lot better on retina displays, which a lot of today’s mobile devices use.

Beyond that, SVG helps improve your site SEO because the search engines recognize and index the file format.

And even better than that, this type of file is typically smaller in size than JPGs or PNGs. They save less information because they aren’t using pixels. Instead, SVG uses vectors. This takes up substantially less space on your WordPress site, which helps it load faster.

And we all know how important it is to have a fast-loading website.

In most cases, you’ll see that SVG images are about 13 times smaller than JPG or PNG files. And an overall reduction in file size of more than 90% is very common.

If it were possible to turn all of your images into SVG files, you’d obviously make your site run a lot faster. But unfortunately, it’s not quite that simple.

The Disadvantages of WordPress SVG

Unfortunately, it’s not all sunshine and rainbows in the land of SVG files. There are some important disadvantages of using this file type for your website images.

First, they’re not necessarily easy to build and create. You’ll have to use some specialized tools and have the knowledge to create them (which we’ll discuss later).

And SVGs aren’t suitable for all of the image files on your WordPress site. They simply aren’t great at handling highly detailed images. And if you have very detailed images on your site, at a given point, an SVG file will actually become larger in size than rasterized image files.

What’s worse, they will have lower image quality than JPGs or PNGs, even though they grow larger in file size. Because of this, SVG is best used for images like logos and icons that have less detailed visuals than high-resolution photographs.

For your images that have a lot of detail, such as blog post featured images, it’s better to continue using JPGs and PNGs.

You’ll also see that social media platforms don’t support sharing SVG files, which would make your blog content look pretty alone by not displaying a supporting image.

How Do You Safely Use SVG Files in WordPress?

A few Google searches will turn up plenty of code snippets that will enable WordPress SVG support. But before you start copying and pasting code, it’s important to ensure that you won’t compromise site security.

This is done through a process referred to as sanitization, which cleans files to prevent potential issues with security (such as injections of code), conflicts, and other errors. And if you’re not great with understanding code, you may not want to take this on yourself.

While there are several online tutorials that deal with sanitizing code, it’s often not as simple as it appears. A single period that’s entered in the wrong place may cause your entire site to crash.

Fortunately, sanitizing code can be done with a WordPress plugin.

Additionally, always carefully consider the choices you make with your WordPress site. Only use SVG files that you get from sources you trust. And consider restricting administrator permissions to prevent other people who have access to your site from uploading SVG files that you don’t trust.

How to Create SVG Files

As previously discussed, physically creating SVG files is one of the most challenging parts of WordPress SVG. It’s not as simple as taking a digital photo, sending it through some filters, then posting the SVG image file on your website. You have to know more than what is an SVG file and you have to do more than simply filter.

In order to create an SVG file, you’ll need software such as Adobe Illustrator. You can also use a free and open-source solution such as Inkscape.

Other options include SVG-Edit by Google and Vectr.

If you’re not already familiar with these programs, it may take some time to learn them and become comfortable using them.

If you already have an existing pixel version of an image, you can make it a vector image by using Vector Magic. And there are several online libraries filled with free vector icons that you can use on your WordPress site.

Some of these libraries include:

  • DryIcons
  • Evil Icons
  • Genericons
  • Flat Icons

After you have a vector file downloaded, you’ll be able to open it on different web browsers to see how it displays. After you’re satisfied with the way it looks, you can start using it on your WordPress website.

How to Safely Enabling WordPress SVG Support With a Plugin

You’ll find several different plugins in the WordPress plugin repository that will allow you to use SVG files safely on your website. Two of these options are Easy SVG Support and SVG Support.

However, for this guide, we’ll look at how the SVG Support plugin by Benbodhi works.

SVG Support provides allows you to easily embed your full SVG file’s code using a simple IMG tag. uses a sanitizer library for image uploads to your site.

This plugin causes SVGs to appear just like your standard images within your WordPress media library. And with the premium version of the plugin, you can also restrict access to who is allowed to upload SVG files to your site.

Here’s how to enable SVG files in WordPress:

Step 1. Prepare the File

After you create or download an SVG file and want to use it on WordPress, it needs to contain the <xml> tag. To avoid an error message, open up the file in your text editor and add the following code into the first line:

<?xml version="1.0" encoding="utf-8"?>

If the SVG already has this tag in line one, simply move on to step two.

Step 2. Install the SVG Support Plugin

Install SVG Support just like you would any other plugin, by navigating to Plugins > Add New in your WordPress dashboard. Enter the name SVG Support into the search box, locate it in the list of available plugins, Install it, and activate it.

Step 3. Upload the SVG File

After you’ve activated the plugin, you can immediately begin uploading your SVG files. All you need to do is go into your WordPress media library, or into a page or post.

Drag and drop the SVG file from your workstation onto your site, or upload it as a new file. Either option will make the upload to WordPress begin.

When it’s done uploading, the image will appear in your media library just like all of your other images. From there, you can add ALT text, captions, titles, and descriptions.

Step 4. Use the SVG File on Your Website

Once the file is in your WordPress media library, you’ll be able to use it just like you do any other image file. Simply input it into a post or page in the way you always do.

The SVG Support plugin works seamlessly in Gutenberg, and the image block that results will allow you to customize the size of the image, ALT text, where it links, and so forth.

That’s all there is to it. The plugin is very simple and doesn’t have any additional settings. It does one job and does it pretty well.

Can you Manually Enable WordPress SVG?

If, for some reason, you don’t want to use the SVG Support plugin, you can code the solution on your own. In theory, turning on WordPress SVG support only requires that you open the functions.php file of your theme and pasting in this code:


function enable_svg_upload( $upload_mimes ) {



    $upload_mimes['svg'] = 'image/svg+xml';



    $upload_mimes['svgz'] = 'image/svg+xml';



    return $upload_mimes;


}




add_filter( 'upload_mimes', 'enable_svg_upload', 10, 1 );

Just remember that this doesn’t include file sanitization, and can open you up to serious security issues. If you’re not running a WordPress security plugin, you should definitely get your hands on iThemes Security Pro before enabling SVG support manually.

Wrapping Up

Is It Time To Start Using WordPress SVG?

SVG files are a very useful resource for WordPress site owners and website designers. They’re small, incredibly scalable, well-supported, and have a host of benefits. But you’ll need to handle them the right way to avoid endangering the security of your site.

In this guide, you’ve learned all of the pros and cons for WordPress SVG, how to create them, and ways you can enable SVG support in WordPress. At this point, you’re ready to start using them. Just be sure that you do it in a responsible and safe way.

After all, no logo or icon is worth risking the safety and security of your site.

WordPress SVG

The post WordPress SVG: 4 Steps to Enable SVG Files in WordPress appeared first on iThemes.

>>> Read the Full Story at iThemes