Upload SVG files to WordPress: A Beginner’s guide
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.
The reason WordPress doesn’t allow SVG files by default is due to security reasons. Like HTML, SVG images are represented using the Document Object Model (DOM) and manipulated via CSS or JavaScript. Yes, you heard that right, JavaScript and this is exactly how it gets easy to exploit such file format.
By injecting malicious JavaScript code into the file, your browser can be redirected to the malicious website. There are some SVG files floating around the internet with malicious code in them. So, blindly downloading them and uploading to your site could be a disaster.
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.
WRAPPING UP
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
