Upload SVG images in WordPress

Posted in Guides

What the heck is SVG images? Have you ever zoomed in on a website and the text is still super sharp? That is a type of vector.
It pretty much means that you can scale the image as much as you want without losing quality.

Its also a lot smaller than, for example, the .png format.

Now, you can only use the format for illustration. You can’t convert a JPEG selfie to a .svg and expect it to scale indefinitely with lower filesize. Nope!

PNG vs SVG comparison

Credits: Freepik & Unsplash

Security issues

By default, WordPress don’t allow .svg uploading since the file contains HTML.
And what can we do when HTML is run? JavaScript! Most likely bad JavaScript.
What is bad JavaScript you wonder? Read up on XSS exploits here. https://excess-xss.com

If you know what you are doing and if you know that the images come from a trusted source(maybe even yourself?) then you can remove this blockage.

/**
 * Enable .svg upload through the media library.
 * Be careful of what you upload since XSS exploits is possible.
 */
add_filter( 'upload_mimes', function( $upload_mimes ) {
  $upload_mimes['svg'] = 'image/svg+xml';
  $upload_mimes['svgz'] = 'image/svg+xml';
  return $upload_mimes;
}, 10, 1 );

Leave a Comment