Copyright 2018 Brad Holmes

Code Header

WordPress SVG Support

What is SVG?

Scalable Vector Graphics or SVG. SVG uses graphics XML markup language to show images. SVG is currently the only image format that uses vectors to display images on the web. The most significant benefit of this approach is that SVG will never loose its quality. No matter the size of the image. SVG allows you to scale images without compromising quality. Also and more importantly the file size of a SVG is much smaller than any other format.

What is the challenge?

WordPress has built-in support for many file types including image, audio, and video file formats such as jpeg, png, gif, jpg, mp3, mp4, etc. However, WordPress does not have out of the box support for SVG.

Vector graphics are mainly used for icon fonts, icons and logos. You may be asking yourself if SVGS are so good why WordPress doesn’t support it out of the box?

The reason is SVG files have some security concerns. Therefore, WordPress doesn’t support SVG files without some work. If you upload an SVG, without adding WordPress SVG Support you see an error message stating.

Sorry, this file type is not permitted for security reasons.

How Easy is it to add SVG support to WordPress?

After all this you are getting to the bit you have really been looking for. I have 3 methods of adding svgs to your site, these are just based on my opinion so you can either choose one of mine or if you feel you have a better solution add it in the comments below i would love to hear from you.

Option One – SAFE SVG

Personally Daryll Doyle’s Safe SVG is one of the cleanest and best ways to add SVGs to my sites. It has zero options so you can just install, activate and you can start to use SVG’s safely.

Option Two – SVG Support

SVG Support plugin from Benbodhi requires a little more work than SAFE SVG, also SVG Support has alot more options which in my opinion are not all necessary for my needs.

Option Three – Function.php

Option Three is possibly the most used method but my least favourite .

Simply adding this WordPress snippet to your function.php will allow you to add SVG’s to your site but will not sanitise your your results
<!--?php echo 'Hello world'; ?-->

function add_file_types_to_uploads($file_types){
$new_filetypes = array(); 
$new_filetypes['svg'] = 'image/svg+xml'; 
$file_types = array_merge($file_types, $new_filetypes ); 
return $file_types; } 

add_action('upload_mimes', 'add_file_types_to_uploads');

Conclusion

Adding the SVG file format to your site is a must for those looking for high quality images with the smallest file size and my method of choice is SAFE SVG from Daryll Doyle, the reason i choose this method are it is the most streamlined and lightweight plugin that covers all aspects of security.

If you are looking for more wordpress and woocommerce snippets you may find something useful here