Using SVG Files in WordPress

One of my clients has told me several times that her logo looks pixelated. I was very frustrated because I didn’t know why it was showing up pixelated, I was exporting it as a high resolution PNG file from Illustrator. And yet it still looked pixelated.

One of the limitations of the web is that you can’t usually use vector files, even though it would be really nice to use vector files. One type of vector file which has become very popular with the web is SVG. Especially SVG sprites, but until now I didn’t know how to make them work with WordPress without hard coding them.

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed.

Making WordPress Accept SVG Files

As far as I was aware, you could not use SVG files in WordPress due to security issues, so I wasn’t sure what to do about this issue. A quick Google search later, apparently you can now use them. Thanks to Divilover for the information.

WordPress by default doesn’t let us upload svg files. We can easily change this behavior with a simple function in the functions.php file. This is the code:

// Allow SVG uploads

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

Just copy and paste it anywhere before the ending tag ?> in your theme functions.php file. And that’s it – now you can choose files with SVG format when you’re uploading them in WordPress. You won’t see the preview image though. So it’s important to name the files accordingly before upload, so you’ll know which one is which.