How to Add SVG in WordPress? Using SVG in WordPress:- Do you want to add SVG in WordPress site? By default WordPress only allows you to upload all popular image, video and audio files format but SVG is not among that formats. In this post, we will show you how we can easily add SVG to WordPress site.
What is SVG?
SVG stands for Scalable Vector Graphics is a file format which define vector graphics using XML markup languages. The main advantage of SVG is that it enables you to enlarge the images without losing quality or having pixelation.
How does SVG Work?
Scalable Vector graphic is a technology that shows 2- dimensional drawing using XML. These SVG formats are different than normal image formats like JPG, PND or GIF. If you see a JPEG or PND file and enlarge it. The image will start to pixelated and blur.
Vector graphics don’t make use of pixels. Instead of that they use a two-dimensional map that denotes the graphic you’re viewing. As you zoom in the image doesn’t pixelated.
SVG allows you to enlarge vector graphics without changing its quality. Mainly SVG images can be smaller in file size comparing PNG or JPEGs. Vector Graphics are most commonly for icons, icons fonts, logons and icons or other graphics.
As cool as it seems to you, SVG files are a little bit unsafe. That’s why WordPress doesn’t support SVG files to upload by default. If you upload SVG image in WordPress then you will get error message.
Security Issues Concerning SVG in WordPress:-
SVG file contains codes in XML markup language which is similar to HTML. Browser and SVG editing software parse the XML markup language to display the outcomes on the screen.
However this will opens up your website to possible XML vulnerabilities. It can be used to access user data in unauthorized way, trigger brute force attacks or cross site scripting attacks. The method we let you know to add SVG to WordPress will try to sanitize SVG files to improve security. These plugins can’t totally prevent malicious code from being injected or uploaded.
The best solution is only use SVG created by trusted resources and to restrict SVG upload to only reliable users.
Let’s have a look at how easily & safely use SVG in WordPress:
How to Add SVG in WordPress? Using SVG in WordPress
Method 1:- Upload SVG Files in WordPress using SVG Support:-
This method provides complete support for adding SVG files in WordPress. It also enables you to display inline SVG in WordPress posts & pages.
First thing you need to install SVG Support plugin in WordPress. After activation you need to visit Settings-> SVG Support page to configure the settings.
On the setting page, you have to check the box next to “Restrict to Administrator?” This will allow you to upload SVG in WordPress. Next option is to turn on advanced mode. You need to check this option only if you want advanced features such as CSS animations & inline SVG rendering.
Now click on save changes button to store the settings. Now you can add SVG easily similar to an image file.
Method 2:- Upload SVG files in WordPress Using Safe SVG:
This method also uses plugin to perform sanitization of SVG file uploaded to WordPress. First thing you need to install safe SVG plugin. This WordPress plugin works out of box & there are no settings available for configuration. You can simply go ahead and start uploading SVG files.
The disadvantage of this plugin allows to upload SVG by all users who can write posts on WordPress. In order to control this you need to purchase premium version of this plugin.