wordpress svg tutorial

How to Add SVGs in WordPress

Last Updated on April 24, 2022 by WP Knowledge Hub

While WordPress allows users to upload JPGs, PNGs, GIFs, PDFs, and even Word documents, it doesn’t allow users to upload SVGs. The reason it prevents native SVG uploads to the Media Library is because that can present a security threat.

Luckily, there are easy and safe ways to incorporate SVGs to your WordPress website.

What are SVGs?

SVGs are Scalable Vector Graphics. Think of a vector as a image created by mathematical calculations. Instead of creating an image with pixels (little dots on the screen) like a standard JPG image, SVGs use anchor points and calculate paths to other anchor points, eventually creating an illustration – kind of like children’s ‘connect-the-dots’ drawings!

Contrary to what you might think, this makes the file very small and compact, so it loads extremely fast and is great for your website’s SEO. However, being a complex code file, it makes it possible to hide malicious code in SVGs. This is why WordPress doesn’t allow them.

Why Use SVG?

On top of being very compact and light-weight files, SVGs are always displayed in full HD quality.

Using a PNG for a logo or an icon might sounds like a good idea at first, but when you view the website on different devices, smaller or bigger, your PNG can get shrunk or enlarged, and that can distort the image and make it appear blurry.

SVG images will ALWAYS look crisp and clean, never blurry.

How to Upload an SVG in the WordPress Media Library

Option 1: Use the SVG Support Plugin

Since SVGs can contain malicious code, they need to be “Sanitized” before being uploaded. In other words, they need to be scanned and cleaned to make sure they don’t contain any malware.

As with allowing uploads of any files, there is potential risks involved. So the plugin adds some features to help:

  • Sanitization to help strip any malicious code form your SVG files upon upload
  • Restrict uploads to admin only

Simply download, install and activate the plugin and you are ready to go!

Option 2: Manually Enable SVG File Uploads in your functions.php

Using the plugin is definitely the easiest way, but it your website already has too many plugins, or your client won’t allow additional plugin installs, then you can also allow it manually by adding some code to the functions.php file in the themes folder.

Before you add anything to the functions.php file, please make a backup of your site, and make sure any edits you make to theme files are on a child theme. If you don’t know how to make a child theme, please see out post explaining how to create child themes in WordPress.

You’ll need to add the following snippet of code to your functions.php file in your child theme: 

// Allow SVG uploads
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }

  $filetype = wp_check_filetype( $filename, $mimes );

  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];

}, 10, 4 );

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

function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );

Stay safe!