How to Use and Enable WordPress SVG Support

Posted on Updated on

Have you ever wanted to display a single image in various sizes all over your WordPress website? If you’ve tackle this problem before, you know that there is no easy solution. Take for example the “featured images” functionality. WordPress specifically creates a number of different featured image sizes for use in different areas such as thumbnails, full-size etc. Scaling an image down is typically easier than doing the reverse because the latter leads to a loss of information.

So if you have a logo that you want to display in the sidebar, as your favicon, or in another place on WordPress where the size changes, you’re forced to upload a high resolution image and scale it down properly when you want to display. This has several problems – it’s inefficient for one, it leads to excess storage space on the server, and it’s not future proof. What if for example, you need to have an even bigger logo sometime in the future? You may have to hire a separate graphic designer to get the job done.

This is where SVG images come in. SVG stands for Scalable Vector Graphics. They are images which can expand or contract indefinitely without loss of information. They are typically geometric shapes and not photographs. An experienced graphic designer can create SVG images easily using tools Like Adobe Illustrator. If you use an SVG image in WordPress and specify the dimensions, it will scale gracefully without any problems. In addition, they are typically very small in size so they don’t slow down your website at all.

There’s only one problem – WordPress doesn’t support SVG media files by default. In this article, we take a look at how to correct that as well as an illustration of SVG versus PNG files.

Enabling SVG Support in WordPress

Let’s assume you have an SVG image ready to go. As an aside, you can see in the screenshot below how low the file size really is – less than one third of a  kilobyte!

If you try and upload it via the regular media interface of WordPress, you get a security warning and won’t be allowed to use it.

svg file not allowed

This is because the structure of SVG files can be exploited by malware hackers to compromise your site. For this reason, if you have a system where anyone can upload a file, enabling SVG can be a security loophole. But if you’re the only one uploading images and are sure of their provenance, we can tell WordPress to accept SVG files by pasting the following into our functions.php before the closing ?> PHP tag:

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

With this snippet of code, we instruct WordPress to allow SVG files. When we try the same upload operation again, it works this time as you can see here.

svg file uploaded

Now that we have our SVG file, we can insert it via the regular media insertion process in the WordPress editor. Note that you have to specify the dimensions directly via the “Text” tab since WordPress won’t add them automatically. This makes sense because by itself, an SVG image doesn’t have any inherent height or width.

how to use SVG images

Finally in the screenshot below, I try and illustrate the difference between SVG and PNG files. On the server, the PNG file still takes up double the space of the SVG one. Despite that, you can see that PNG scales terribly when expanded to a size much greater than what it is designed for. This is hardly surprising – it’s pixel based and it can’t just make up information on its own.

PNG image distorted

The SVG image on the other hand has scaled gracefully and can continue to do so infinitely regardless of how large (or small) you make it. It will never get pixelated, and will never lose its form and structure when you scale it down. Therefore, the SVG format is great for logos and other icons that need to be displayed in multiple sizes in different areas of your website and which can also be created in a tool like Adobe Illustrator.

Leave a Reply

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