If you prefer getting your hands dirty to using a plugin, you can manually enable your WordPress site to accept SVG files. Next, we’ll take a look at how that process works.Edit Your Site’s Functions.php File

Step 1 : Edit Your Site’s Functions.php File

To get started, you’ll need to edit your website’s functions.php file. To do this, you can go to Appearance > Edit Themes in your dashboard, and select the functions.php file:

Alternatively, you can access your site’s files using a File Transfer Protocol (FTP) application such as FileZilla.

Either way, it’s best to create a child theme or switch to a development environment before doing any major work on your website. This will keep your live site safe from harm while you’re making changes.

Step 2 : Next, you’ll need to add the following snippet of code to your functions.php file

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 ab_meida_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'ab_meida_types' );

function ab_fixed_svg() {
  echo '<style>
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'ab_fixed_svg' );

source: https://wpengine.com/resources/enable-svg-wordpress/

Last Update on:March 5th, 2023 at 5:19 pm

---