How to use SVG in WordPress?

In this post, we want to show you when and how to use SVG in WordPress.

SVG files, or Scalable Vector Graphic files, are popular among users for being vector-based. That is, they do not lose quality when scaling or zooming. They are smaller in size than an equivalent PNG or GIF.

But, by default, we cannot use SVG in WordPress. We explain why below, its advantages, disadvantages, and how to enable this type of file in WordPress.

Table of Contents

• What is SVG?
• Advantages of the SVG format
• Disadvantages of the SVG format
• Why are SVGs in WordPress not active by default?
  • Our security recommendations for using SVG in WordPress
• Enable SVG images in WordPress
  • 1. Enable SVG with the extension Safe SVG for WordPress
  • 2. Enable SVG for all users via code
  • 3. Enable SVG via code for users with a specific role
• conclusion

What is SVG?

An SVG is nothing more than a structured text document in XML format, where the image is described by using lines, shapes, and attributes.

The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.

The most common formats such as GIF, JPG, PNG, or WebP are called “raster” and describe the image based on pixels. SVG instead uses text.

An example of an SVG file drawing a simple circle:

<svg viewBox="0 0 20 20" >
    <title>Estructura básica del SVG</title>
    <style>
        .circle {fill: blue}
    </style>
    <circle class="circle" cx="5" cy="5" r="5" />
</svg>

Advantages of the SVG format

The advantages are many. The main one is that when scaling them, no detail is lost. Take a look at this same SVG file with the wetopi logo:

• You may scale SVG files without losing quality. They retain the same sharpness at all screen resolutions.
• They take up less space on your web storage and load much faster than images that work with pixels. By using SVGs, you will be speeding up your WordPress site.
• It is possible to edit them with any text editor.
• You may use CSS styles to create animations and visual effects in an SVG file.
• SVG files accept Javascript code.
• SVGs may be adjusted with external Javascript code.
• They travel compressed in Gzip or Brotli format. At wetopi, as specialists in WordPress hosting, all of our servers already use the most advanced compression techniques. You can read more about the speed advantages of Brotli Compression for WordPress.
• Google indexes SVGs, in “Google Image Search”.
• They are supported in all major browsers.

Disadvantages of the SVG format

There are a few disadvantages, and it is essential to take them into account:

• Highly detailed images, such as photographs, will not work well in SVG format.
  
• Using fonts or fonts out of the ordinary is complex. In many cases, it involves using applications such as Illustrator to convert the text to vector paths. For shorter texts, you may use the online tool Google Font to SVG Path. We have used it to convert the “WordPress” text that appears in the illustration into SVG format.
  
• Working with SVG requires additional security measures. Below we delve into this section.

Why are SVGs in WordPress not active by default?

Since SVGs are text files, people can easily edit them and insert malicious code. That might be the only real disadvantage of SVGs.

The WordPress Core development group has been discussing this security issue for some time. You can follow it on this famous ticket ticket 24251, which has been open for several years. In short, a WordPress form open to upload SVG images, or users who are not very careful about the origin of SVGs, could open a significant security breach.

Another security problem that SVGs introduce is that they might become the landing place of infections if security breaches in WordPress occur. In other words, if you have a WordPress with a security issue, this vulnerability could be misused to sneak malicious code into one of your supposedly healthy SVGs.

Our security recommendations for using SVG in WordPress

1. Use SVG images that you have edited yourself or originate from reliable sources.
2. Clean SVGs before uploading them to WordPress. You can use this online service: SVG Sanitizer
3. Maintain high-security measures for your WordPress. We recommend this post where we detail the guidelines for a good level of security for WordPress.

Three security rules that wetopi apply to all our servers:
-1. Filter malicious traffic.
-2. Take care of WordPress with updates and antivirus.
-3. Create Backups.

Even on free development servers. Try now!

Enable SVG images in WordPress

Here we explain two ways of doing this:

The first is for WordPress sites with several users with roles capable of uploading images and where we do not have tight control over the origin of the SVGs. For this case, we propose the Safe SVG plugin by Daryll Doyle.

1. Enable SVG with the extension Safe SVG for WordPress

When installing and activating the plugin, no configuration settings are necessary. You can directly load SVG just as you do with other formats. Of course, the good thing about this plugin is that it disinfects the SVGs files once uploaded.

ATTENTION: make sure to test the compatibility of this plugin in a clone of your website or in a staging environment.

If your hosting does not have a staging environment,

test with wetopi

We migrate a copy of your website for free so that you can try as much as you want

This WordPress plugin also has a Pro version: https://wpsvg.com/

The Pro version allows you to limit the users who can upload SVG. If you have a website with several publishers, you may cut access to those you do not trust.

In addition, the pro version also includes an SVGO optimization server, which allows you to reduce the size of the SVG file.

2. Enable SVG for all users via code

There are several WordPress extensions or plugins to activate SVG in a general way in WordPress, but given the simplicity of the process, we suggest you do it via code.

Also, if you care about speed and security as much as we do, it is best to keep your WordPress with the minimum number of active extensions. At wetopi, as exclusive WordPress hosting, we specialize in performance and security for WordPress .

The first step is to locate your child theme’s file functions.php

You can edit functions.php by connecting to the server securely via sftp .

Next, paste the following code at the bottom of your functions.php

/**
 * Add svg to WordPress
 */
function add_file_types_to_uploads($mime_file_types){
    $mime_file_types['svg'] = 'image/svg+xml';
    return $mime_file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

3. Enable SVG via code for users with a specific role

The procedure is similar to the previous point. You have to edit the functions.php file.

This time the code you have to add is the following:

/**
 * Add svg to WordPress admin users
 */
function add_file_types_to_uploads($mime_file_types){
    if (current_user_can('administrator') ){
        $mime_file_types['svg'] = 'image/svg+xml';
    }
    return $mime_file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

You will see that we have added a conditional. By doing this, as an example, we are adding SVG only to the WordPress admin user profile.

conclusion

SVG is a handy format for those images that we can represent as strokes: logos, infographics, diagrams. They are light and do not lose quality when enlarging.

The consideration to keep in mind is safety. Don’t forget to keep your WordPress up-to-date and work with a host that takes WordPress Security very seriously.

We are techies passionate about WordPress. With wetopi, a Managed WordPress Hosting, we want to minimize the friction that every professional faces when working and hosting WordPress projects.

Not a wetopi user?

Free full performance servers for your development and test.
No credit card required.