How to use SVG Vector Images with WordPress or Divi Theme Without any Plugins

Login you Wordpress
Go Dashboard
Click Appearance
Click Theme Editor
Select Theme To Edit: Select Theme Name
Them Files



Enable SVG support by modifying your functions.php file.
Find Function.php
Selected down File Content:
before Copy this cord
_________________________________________________________________________

// 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' );

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' );
________________________________________

Past this cord

Click Update File

This fulfills two functions – it enables you to upload SVG files to WordPress and visualize them within your media library. Once you add the code, save the changes to your functions.php file and close it.

Ideally, you’ll run every SVG you upload to your website through a sanitizer tool before you do so. This will take your file, make sure it doesn’t include anything untoward, and remove if it does. Ultimately, this leaves you with a clean SVG file you can finally upload to WordPress.

Comments