SVG (Scalable Vector Graphics) is the most underrated web technology, yet a really useful one. SVGs are one of the coolest image types because they’re scalable to any size and generally take less space than other image types. In spite of having such advantages, SVG file type is not permitted in WordPress by default. But, there is no need to worry, you can still upload SVG files to WordPress using plugins.
Why use SVG files?
SVG format is a natural fit for the modern responsive web. An SVG file can be easily scaled from mobile to a standard desktop display, all the way to a 5K display, and everywhere in between and beyond. This is why they are great for retina screens. You can also resize SVG files without losing its quality to create really awesome interactive web experiences.
While to the average user, an SVG seems like any other image but it isn’t. Beneath the surface, SVGs are just code. You can actually speed up your WordPress site as you will decrease your overall page size using SVG.
How to Upload SVG Files to WordPress
Today without messing up with the code, we will show you the fastest and easiest way to add SVG Files to WordPress. To do that, you will need to install and activate a WordPress Plugin. Here, we will show you two plugins that will allow you to upload SVG files to WordPress.
1. Using SVG Support
SVG Support Plugin is an awesome plugin that allows you to upload SVG files to your WordPress site easily. Firstly, install the plugin and make sure to activate. You can easily download the free WordPress plugins from WordPress plugin directory.
Once the plugin is activated, you can simply upload SVG files to your media library like any other file. However, your task doesn’t end here. There are two more settings you might want to change depending on your needs. You can visit SVG Support in Settings.
Straightaway, you’ll find two options. Here you can restrict SVG file uploads to administrators by enabling the “Restrict to Administrators?” feature. This will allow only a site administrator to upload SVG files in WordPress. If you want to use advanced features like CSS animations and inline SVG rendering then you can enable advanced option. But, you may not be able to inline an SVG within some fields. Disabling these features ensures the frontend script is not enqueued and the unnecessary settings stay hidden. But if you want to enable it, simply check the box and you can embed your SVG images just like a standard image with the class “style-svg” to your IMG tags.
Click on Save Changes once you adjust settings according to your preferences. Upload SVG file as you would upload any other image file. Simply add an image block to the editor and then upload the SVG file. You will now be able to embed SVG file in WordPress.
2. Using WP Extra File Types
Now, here we have another quick two-step method to upload SVG Files to WordPress. This method also uses a plugin which only doesn’t help in SVG supports but a perfect way to support more file types in WordPress. Instead of digging through your theme’s function.php file, you can easily select the file extensions provided by this plugin. For this, simply install and activate WP Extra File Types Plugin.
Upon Activation, visit settings and there you can see WP Extra File Types. As soon as opening the file you can see tons of list for file types. Simply search for Scalable Vector Graphics (SVG). Once you have found the SVG just check the box and that’s it. Now you are able to upload an SVG file as you can upload your others files.
SVG files are text-based so they are easily searched and indexed by search engines. Due to small in file size, it is also useful for the speed of your WordPress Site. SVG can scale to any size to fit web pages without any loss in quality because of its compatibility. Scalable Vector Images are best for line art, logos, graphs, and images. With SVG, you can combine different shapes, paths, and text elements to create all kinds of visuals and to be sure that they will look clear and crisp at any size.
With this simple and thorough guide, we hope it helped you to learn how to upload SVG files in WordPress. If you enjoyed this blog post, share it with a friend! You may also like to check out our other articles:
- A Beginner’s Guide To WordPress Featured Image Size
- Upload PDF files in your WordPress
- Add An Image To The WordPress Sidebar