Do you want to embed SVG in WordPress website? By default, the WordPress content management system allows you to add multiple image formats .jpg, .jpeg, .png, and .gif. However, it doesn’t enable you to use scalable vector graphics (SVG) which is one of the most loved image formats in modern-day website development. Fortunately, learning how to embed SVG graphics in WordPress is quite simple.
What is SVG?
SVG or scalable vector graphics is an image format. An XML markup language is used to create a two-dimensional vector graphics. It has numerous advantages over image formats like JPG, PNG, or GIFs. For example:
- They take up very less space: The SVG images are very light. Simply, because it is composed of two-dimensional vectors. While on the other hand, image formats like JPG are raster images and they are composed pixels. These SVG images help your website load faster.
- Images are scalable: This is one of the best things I like about SVG images. The regular image formats like JPG, PNG or GIFs look terrible if you scale them above their original resolution. There is no such limitation with SVGs. You can scale these images upwards or downwards without any loss in quality or change in the file size.
- SVG has a great animation option with CSS: This is one of the cool features for those who like to play with CSS and animations to make some cool and unique effects to attract visitors.
How to add or embed SVG in WordPress?
I have included 3 easy methods to embed SVG in WordPress. The first method includes the SVG support plugin which is free and easy to use with few clicks.
The second, method also includes the use of a Freemium Plugin “Safe SVG Plugin”.
For those who don’t like populating their site with plugins, the third and the final method is for them. In this process, you just need to copy-paste 5-6 lines of code in the functions.php file of your website’s theme.
So let’s get started with the first method:
Method 1: Use the SVG Support plugin
If you’re looking for the fastest way to add SVG image to your WordPress based website, you just need to install SVG Support Plugin WordPress plugin.
Navigate to Plugins > Add New
In the WordPress plugin directory, search “SVG Support Plugin”.
Click Install Now.
Now activate the plugin.
Upon activation, visit Settings » SVG Support page to configure plugin settings.
On the SVG Support settings page, check the box next to ‘Restrict to Administrators?
Method 2: Use Safe SVG Plugin
This method also uses a plugin called “Safe SVG“.
Just like the previous method, install and activate Safe SVG plugin.
This is a great plugin that works out of the box. There are no settings or configuration option for this plugin. All you need is to install and activate the plugin to start uploading SVG files.
The only drawback of this plugin I see is that Safe SVG allows SVG uploads by all the users who are authorized to write posts on your WordPress.
In order to control who can upload SVG images to your website, you need to purchase the premium version of the plugin.
Method 3: Modify functions.php File
All you need is to navigate to Appearance » Theme Editor
Access the functions.php file and copy-paste the following code.
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_action('upload_mimes', 'add_file_types_to_uploads');
You may also like: Speed Up WordPress Website: 10 Awesome Techniques
I hope this article helped you learn how to embed SVG in WordPress. Please leave your feedback in the comments section below.
