SVG Icon

WordPress enables users to upload quite a few different kinds of image files such as PNG and JPG. Displaying other file types, such as vector graphics, can be more problematic.

Fortunately, there are a few ways to incorporate SVG files into your website. With a little reconfiguring, you’ll be able to optimize some of your logos and other graphics using this file type.

Make use of this article to know more about the SVG files and why you might want to use them. Also, go through two ways to enable their use on your website. We’ll also cover some important security precautions you may want to take.

What is an SVG?

An SVG file is a type of vector image which is composed differently than more common image file types. For example, a JPG is made up of thousands of pixels. Whereas vector images are more like a set of written instructions. They don’t contain pixels that form a larger image. Instead, they include a schema-like set of data that creates a two-dimensional image.

Why Use SVG?

SVG files are significantly smaller than other image types. This means your site won’t get bogged down by graphics. SVG files are indexed by Google. This can be a real boon for your site’s Search Engine Optimization (SEO).

How to Upload an SVG to WordPress

Since WordPress doesn’t include support for SVGs, you’ll have to work a little harder to include them on your website. Go through the following sections of this article to get more information regarding how to add SVG files to your website using a plugin and via a manual process.

Method 1: Using a Plugin

First, you’ll need to download and install an SVG Support Plugin.

Once you’ve installed and activated the plugin, you’ll have a new menu option in your WordPress dashboard under Settings > SVG Support. There, you will receive instructions on how to style SVG files for your website.

Additionally, you’ll be able to configure a few important administrative settings. This includes restricting SVG uploading privileges to administrators only. After that, you’ll be able to upload SVG files directly to your Media Library.

Method 2: Manually Enable SVG File Uploads

To get started, you’ll need to edit your website’s functions.php file. To do this, you can go to Appearance > Edit Themes in your dashboard, and select the functions.php file. Alternatively, you can access your site’s files using a File Transfer Protocol (FTP) application such as FileZilla.

Either way, it’s best to create a child theme or switch to a development environment before doing any major work on your website. This will keep your live site safe from harm while you’re making changes.

Next, you’ll need to add the following snippet of code to your functions.php file.

// Allow SVG
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' );

After that, you’ll be able to upload SVG images to your Media Library. There, you can view and interact with them just like with other image file types.