Using SVG in WordPress

SVGs are ideal for illustrations like logos, icons, and graphs. Vector images are resolution-independent and can scale to any dimension without losing quality. Because SVGs are scalable, they can be saved at a minimal file size.

To use an SVG in a WordPress web site, one must first add a function to their theme’s functions file to allow the file type to be uploaded to the media folder. This can be accomplished two ways: manually adding the code to the theme’s functions file or using a plugin that defines file types for upload.

Add this code to your theme’s function.php file:

/*Add &Remove Mime Types for uploading*/
add_filter ('upload_mimes', 'alter_file_type_uploads',1,1);
function alter_file_type_uploads($mime_types) {
//Add types
$mime_types['svg'] = 'image/svg+xml';       //Add .svg extension
return $mime_types;
}

Before you can upload an SVG into WordPress, you must add some code to the SVG file. Open your SVG in a text editor and add this line of code at the very beginning and save:

<?xml version="1.0" encoding="utf-8"?>

The easiest way to size an SVG in your WordPress web site is to code the SVG as an image and set the width. An SVG will always scale proportionally, so setting the width will also set the height. Set the size inline or in the containing div:

<img src="mywebsite.com/wp-content/uploads/mylogo.svg" width="250">
Or
<div style="width:250px">
<img src="mywebsite.com/wp-content/uploads/mylogo.svg">
</div>

Start using SVGs in your WordPress web site to increase quality and decrease page load times.