How to Embed SVG in WordPress | Add SVG to WordPress Secure Way
by adminko | Last updated Aug 26, 2019 | Latest Tutorials | 0 comments
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.
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.
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.
- Hover over Appearance and click onTheme Editor layout for our heading area.
- On the right hand side find functions.php file.
- Copy snippet from 2nd step below into your functions.php file and save.

Add these PHP snippet/snippets into your functions.php file
Look for your functions.php file, open it, and add the following code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// Allow SVG add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) { global $wp_version; if ( $wp_version !== '4.7.1' ) { return $data; } $filetype = wp_check_filetype( $filename, $mimes ); return [ 'ext' => $filetype['ext'], 'type' => $filetype['type'], 'proper_filename' => $data['proper_filename'] ]; }, 10, 4 ); function cc_mime_types( $mimes ){ $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter( 'upload_mimes', 'cc_mime_types' ); |
For Divi Theme Useres: Here are additional CSS settings for divi users to fix SVG appearance in thumbnails
1 2 3 4 5 6 7 8 9 |
function fix_svg() { echo '<style type="text/css"> .attachment-266x266, .thumbnail img { width: 100% !important; height: auto !important; } </style>'; } add_action( 'admin_head', 'fix_svg' ); |
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:
Recent Comments