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.
- 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.
2
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' ); |
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:
