How to enable SVG support in WordPress

WordPress support JPG and PNG file by default. But We can enable SVG support in WordPress without using any plugin. Before we could know the functions to enable SVG support, let me tell you more about SVG files.

What is SVG?

SVG ( Scalable Vector Graphics ) is a vector-type image that is different from PNG and JPG images.

Why use SVG?

SVG is easy to modify by using CSS styles in the website without compromising the quality of images. That's why SVG is quite trending in websites. Most icons, images, and logos are created in images. So it could be styled without losing the quality of the image.

Now it's time to know How to upload SVG in WordPress.

There are two methods to enable SVG support in WordPress.

1. Use a plugin

You may download a plugin SVG Support and upload it to the WordPress plugin.

Steps:

1. Login into WordPress Dashboard.
2. Click on plugins from the admin menu in the dashboard
3. Click on "Add new".
4. Upload the plugin by dragging and dropping and clicking on install now.
5. Then activate the plugin. That's it.

2. Without using a plugin (manually enable)

To manually enable the SVG support you need to follow these steps.

Steps:

1. Login into WordPress Dashboard.
2. Go to appearance and find the activated theme.
3. Go to the theme editor and edit the "functions.php" file.
4. And paste the following code.

// Svg support

add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
  $filetype = wp_check_filetype( $filename, $mimes );
  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];


}, 10, 4 );


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

5. Save it.

This is how you can enable SVG support in WordPress.

Thank you for reading the articles. Hope it helps you in WordPress website development.