How to Embed SVG in WordPress | Add SVG to WordPress Secure Way

by | Last updated Aug 26, 2019 | Latest Tutorials | 0 comments

INTRO

What is SVG?

SVG or Scalable Vector Graphics is an XML-based vector image format for flat graphics with support for interactivity and animation. Those are usually flat icons that are easy to manipulate even with a text editor. SVGs are currently utilized by 4.1% of all websites, but the adoption rate is growing rapidly maily to it’s availability and size.

Since SVGs are vector that means they are automatically scale-able, they are also useful for SEO since Google indexes SVG files and they will show up in Google image search. In general SVG’s are also around 10 times smaller then PNG or JPEG file types which is impressive difference.

VIDEO

How to Safely Enable WordPress SVG Support

In this tutorial I’m teaching you two different methods to enable, to embed SVG icons, files into your WordPress Website.

  • To install this modification you will need to edit functions.php file in your theme or child theme folder.
  • To be 100% safe and secure you have to sanitize every SVG file before you upload it.
  • Otherwise, you can use free plugin to enable SVG embedding & automatic¬†sanitizing.
1

Enable SVG support by modifying your functions.php file

We are going to add snippet below into our functions.php file and then save changes.

  1. Hover over Appearance and click onTheme Editor layout for our heading area.
  2. On the right hand side find functions.php file.
  3. Copy snippet from 2nd step below into your functions.php file and save.
2

Add these PHP snippet/snippets into your functions.php file

Look for your functions.php file, open it, and add the following code

For Divi Theme Useres: Here are additional CSS settings for divi users to fix SVG appearance in thumbnails

3

Sanitize every SVG file before you uploading

Before uploading any SVG icons or files into your WordPress library it’s recommended to sanitize them. Here is the link to web application: SVG Sanitizer Test

If you wanna learn more about SVG check these two articles below:

  1. How to Safely Enable WordPress SVG Support
  2. How to Safely Use Vector Images with WordPress