Enable SVG Support in WordPress

WordPress enables users to upload quite a few different kinds of image files. You’ll likely recognize the usual suspects, 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 vector files into your website. While not a native feature, Scalable Vector Graphics (SVG) files can be used to display two-dimensional images on WordPress sites. With a little reconfiguring, you’ll be able to optimize some of your logos and other graphics using this file type. 

Step 1: Edit Your Site’s Functions.php File

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: 

Step 2: Add a Code Snippet

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.