iThemes site-wide discount! 40% OFF Grab this offer!

How to Upload SVG to WordPress: (Two Easy Methods)

Easy guide on how to upload SVG to WordPress using two simple tricks. I have shared a simple PHP code that will solve unable to upload SVG images on WordPress.

SVG images are the best for quality! We can use this type of image for a variety of purposes, and they’re easy to work with.

By default, WordPress does not support SVG format, but you can upload this format easily on your WordPress if you know a little trick. That’s why Uploading SVG images on WordPress is a breeze. Especially, If you are a beginner, this blog post will teach you how!

However, in this blog post, I will share a guide on how to upload SVG images on WordPress using a plugin or adding a simple PHP code snippet.

Note: There are many guides about this topic, most of the blog authors have shared methods such as using a plugin, and some shared manual guides using PHP code. But in my research, unfortunately, most of the manual guides (PHP code) do not work. That’s why I have shared this guide especially for those who want to use PHP code to allow WordPress for uploading SVG file format.

However, let’s know the basic thing about SVG format.

What Is An SVG Image?

An SVG image is a scalable vector graphic. It can be scaled to any size without losing resolution or clarity, and it will never become pixelated.

You can create SVG images with a vector graphics editor like Adobe Illustrator, or you can create one using your favorite photo editing software.

Once it’s saved as an SVG file format, then just upload the image to WordPress and insert it into your post! 

Why Do You Need To Upload SVG to WordPress?

I will be going over how to upload an SVG image on WordPress. But you may ask yourself why you would want to use a vector file as opposed to a more common format.

The answer is simple: because it’s awesome! Vector graphics are scalable so they look good no matter what size they are displayed at and are available in just about any type of device or browser.

This means that your logo can still look great when shared on social media platforms like Facebook, Twitter, and anywhere, or when someone views it from their mobile phone!

How to Upload SVG Images On WordPress?

There are many image types supported by WordPress, but SVG is not one of them. Fortunately for us there a few ways to upload an SVG file to WordPress. I will share my opinion on which method is safe and best. Just read this full guide.

Method 1: Using an SVG Image Plugin

There are some WordPress plugins such as SVG Support and WP SVG images that will take an SVG file to WordPress easily.

SVG support

I will highly recommend using SVG Support WordPress plugin that lets you upload and edit SVGs in WordPress without messing up your theme. But you can also use WP SVG Images.

Just simply install and activate the plugin and upload your SVG file to WordPress.

You can control your SVG file applying some setting of this plugin.

SVG support settings

If you don’t want to install an SVG plugin, you can follow the below method for uploading SVG files on WordPress.

Method 2: Adding PHP Code

Instead of using a plugin, you can upload SVG files to WordPress by adding a simple PHP code snippet to your theme funcation.php file.

In this case, you should use a child theme of your parent theme. If you don’t know how to create a child theme, you can follow my guide on how to create a child theme easily.

Now go to WordPress Appearance> Theme Editing and find the funcation.php file then paste the following PHP code.

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

Finally, update the file and you are done.

Note: The above PHP code snippet is completely safe, and it also is safe to upload SVG files on WordPress. So you never worry about your blog being hacked or any fatal error.

Now go to the WordPress library, click on Add New then upload your SVG image. You can upload images directly from WordPress Gutenberg post/page editor.

I hope the above simple guide on how to upload SVG to WordPress will be helpful for you. But if you have questions about it, you can leave a comment below.

Previous

Pursuit WordPress Theme: For Modern App, SaaS & Cryptocurrency Websites

Why WordPress Admin Slow? 12 Reasons & How to Fix It

Next

Palash Talukdar is a digital marketer & the founder of WP Basic Pro. He has been building and managing WordPress websites for 5+ years. He loves to write about WordPress, SEO, marketing, productivity, and web performance.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.