How to Add SVG in WordPress

Are you looking for ways to add SVG images in your website?

SVG images are a great way to make your website attractive. However, WordPress doesn’t support the use of SVG by default.

Today, we’ll learn how to add SVG in WordPress.

What is SVG?

SVG stands for Scalable Vector Graphics. It is an XML file that is used as a logo, icons and images. It is responsive and can be resized and scaled without losing its quality.

Advantage of Using SVG

There are quite a few advantages of using SVG image in WordPress.

  • SVG images are compressible and indexed by the search engine.
  • It is scalable and zoomable.
  • Its file size is smaller in comparison to JPG and PNG.
  • You can also scale the image without any change in quality.
  • Also, SVG images can also be added special animation effect.

There are two methods to add an SVG image in WordPress. Having said that let’s get started:

Upload SVG Files in WordPress Using Plugin

The fast and easy way to use SVG is by using plugins. Beginners are recommended to upload SVG files by using plugins. All you have to do is install and activate an SVG support plugin.

  • First of all, you need to log in to WordPress admin area.
  • Upon activation, navigate to Settings>>SVG Support tab.
  • Upload-SVG-in-WordPressUpload-SVG-in-WordPress
  • Next, right tick the box next to Restrict to Administrator. Doing so will make sure that only administrator can upload SVG file.
  • You can also check the box next to Enable advancedmode.
  • Click on the Save button to apply the changes you made.

Finally, you can easily upload SVG files in your site.

Modify your Site’s functions.php File

Using too many plugins can slow down your WordPress website.That’s why this method is the fastest and safest way to add SVG support in WordPress. You can easily upload SVG images via simply modifying your site’s function.php file.

  • First of all, log in to your site using an FTP client.
  • Go to the root directory.
  • Locate function.php file and open it in edit mode.
  • edit-function_phpedit-function_php
  • Now all you have to do is copy and paste the following code in the file.
function add_file_types_to_uploads($file_types){$new_filetypes = array();$new_filetypes['svg'] = 'image/svg+xml';$file_types = array_merge($file_types, $new_filetypes );return $file_types;}add_filter('upload_mimes', 'add_file_types_to_uploads');

At last, save the changes you have made. Once you are done, you can add SVG images in WordPress. Using svg from unknown source is risky from a security point of view. Hence, make sure that svg is sanitized or downloaded from secure source before using it.

Final Thoughts 

Now that you have learned how to add SVG in WordPress, go give it a try! I hope you find this article helpful. You can also follow us on Facebook and Twitter.

Do not forget to subscribe us for more informative tutorials.

If you have any questions related to this topic, please write us down in the comment section below:


Leave a Reply