Ask any website owner, and they’ll tell you that using SVG files is the most flexible option for responsive design. And if you ask another, they will give you the same answer.
Yes, the percentage of websites using SVG has shown a handsome uplift compared to other file types.
However, if you’ve been using WordPress, it must restrict you from using SVG files. So, you must find a way out of it.
In this how to enable SVG support in WordPress tutorial, we are covering two easy methods:
- Adding Code Snippet.
- Using a Plugin.
This detailed tutorial also includes the following:
- What is SVG?
- How does SVG work?
- Why is SVG a popular file format now?
- Possible Issues With Using SVG File Type
- What is the security issue of using SVG files in WordPress? And,
- How to secure SVG files?
Plus, we’ll also show you how you can support SVG files with the Divi websites.
Let’s start.
What is SVG?
Scalable Vector Graphics image (SVG) format is like a set of written mathematical formulas (XML Code) for defining two-dimensional graphics, which encompass the placement and shape according to the points and lines on a grid.
How Does SVG Work?
Compared to other files type, the SVG file format depends on vectors to illustrate and show images on the website rather than pixel data like JPEG or PNG. Visual images are directly made with geometric shapes like points, lines, polygons, and curves within vector graphics.
And the benefit here, images are not fixed with any specific resolution. You can transfer it to any dimension without reducing the quality. Check the image below. You can see the SVG format of our website’s (DiviFlash) logo has successfully maintained its resolution upon resizing. On the contrary, the PNG format gets blurry.
Moreover, vector file types also contain color and text information which is helpful for SEO factors.
But this file type can do more than that and help your website in other ways. Let’s learn them.
Why is SVG a Popular File Format Now?
Nowadays, SVG is one of the tops using file formats in the web world. As we have said earlier, the main popularity of the SVG format lies in its scalability. Graphic and web designers find this file format handy for their editing tools and browsers. This file type’s reputation also encompasses improving website speed and SEO. Discover more in the following list:
- Scale SVG images to any size without losing quality.
- An ideal file format for responsive web design.
- SVG files are smaller compared to other file sizes.
- Need less bandwidth to load and improve page load times.
- Flexible to customize with CSS or JavaScript for animation effects.
- Compatible with any modern web browser.
- SVG image text considered as text (not like design elements) to help indexing in SERP.
The potential of the SVG files list goes on. But for now, we want to address your concern about the security vulnerability of the SVG file format.
Possible Issues with Using SVG File Type
There are an immense number of recorded cases because of security vulnerabilities of using SVG. That’s the main issue of this file type. In this XML file format, CSS and JavaScript can be added along with the vector information. This freedom leaves the danger of malicious attack if there is an unwanted code in that XML file.
The consequence could end up with unauthorized access to your website administration. Some other security attacks could be: Cross-Site Scripting, HTML Injection, XML Entity Processing – Billion Laughs Attack, Denial of Service – The New SVG Billion Laughs Attack, etc.
Apart from this, there are a few other downsides of SVG files. See the list below:
- Not the best format for high-quality digital photos due to the lack of pixels.
- A long learning curve and premium tools needed at the beginning.
- Only supported by modern web browsers.
Why Doesn’t WordPress Support SVG File Format?
The security threat (we have discussed above) is the sole reason for WordPress prevention on SVG files. But why won’t you take advantage of this file format? Even for many reasons, you must consider an SVG media file type to use on your WordPress website.
Further, by using sanitizer tools, there will also be no security issues. And you won’t find any big hurdle to enabling SVG. At least following our how to enable SVG support in WordPress tutorial.
Next, you will learn to sanitize SVG files. It is necessary when you manually enable SVG support (using code snippets) in the WordPress website.
How to Secure SVG Files?
As we have already addressed the safety concerns with SVG files in WordPress, the sanitization process will help you not compromise your website security. To do this, sanitize the SVG file with a sanitizing tool before uploading it to the WordPress media library. Even do it multiple times for even better security.
Sanitization removes any suspicious XML code that can make your website unsafe.
How to Enable SVG Support in WordPress?
Our tutorials aim for all kinds of audiences. So, there are two paths. If you know to deal with code, go for the first path. Either for an easy way, think about the second (plugin) method.
Method 1: Manually Enabling SVG in WordPress
Adding code to function.php is WordPress’s most common method of enabling SVG file type. You just need to navigate: WordPress Dashboard> Appearance> Theme File Editor> function.php. Here write the below code:
add_filter( 'mime_types', 'cc_adding_mime_types_support', 99);
function cc_adding_mime_types_support( $mimes ) {
if(!defined('ALLOW_UNFILTERED_UPLOADS')) {
define('ALLOW_UNFILTERED_UPLOADS', true);
}
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
Hold on! We know you just need a moment to accomplish this. But, hassle always goes around. So, follow our suggested directives before and after adding the snippet code to the function.php.
Before making changes to function.php:
- Test this change to a staging site.
- Better do it with a child theme.
- Or, try alternatives like File Transfer Protocol (FTP) application or plugin.
- Do consider backing up your theme file.
After making changes to function.php:
- Make sure to sanitize before uploading the SVG file.
- Restrict user roles: to avoid corrupted SVG files.
Now, you know where you need to be concerned. So, use your best judgment. Write the code and click “Update File.” You are ready to upload SVG files to your WordPress website.
Method 2: Enable SVG in WordPress Through Plugin
As a WordPress user, you must expect a plugin to enable SVG in WordPress. Since it requires nothing. Within a blink of an eye, you can install and activate it.
Plugins for this purpose are available. SVG Support and Safe SVG are widely popular WordPress plugins. SVG Support is the most popular plugin with the highest active installation. We will show the installation of this plugin in our how to enable SVG support in WordPress.
Let’s get started.
First, install and activate the SVG Support plugin from the WordPress free repository. From your WordPress admin panel, go to Plugin> Add New and browse for SVG Support on the top-right search bar.
The moment you are finished with the installation and activation of this plugin, your SVG file uploading support will be instantly available. Then configure the plugin setting. Follow Setting>SVG Support. Here you can do the following advanced Setting:
- Restrict the SVG file upload option for different user roles.
- Animate your SVG file to a few extents.
- Has the option to allow non-admins to upload SVG files.
- Minify SVG files and delete the plugin data during uninstallation.
Lastly, hit “Save Changes” after changing any settings.
How to Enable SVG Support in Divi?
A big part of our blog fan group is Divi theme users. So for them, we are covering how to enable SVG support in Divi.
Divi is a WordPress theme. So, it also by default disables SVG files support. Then, how to use the SVG format in Divi?
Let’s do it.
Since we always emphasize bringing the easiest solution of Divi for our lovely Divi fan group. So, the comfort zone will always be there. Follow the easy trick below:
Step 1: First, install the DiviFlash plugin. It’s the same way you install a plugin in the WordPress website. Check here for more.
Step 2: Next, from your WordPress dashboard: hover over to the DiviFlash and hit “Dashboard”.
Step 3: Now, at the top of the extension list of the DiviFlash dashboard, you will see the “SVG file upload” option. Just turn it on.
Step 4: Hit the “Save Changes” button below. Nothing more! You are done.
Now there is no restriction to uploading SVG files in the Divi theme and builder.
Not Uploaded Yet?
We hope this how to enable SVG support article helps to upload SVG file types in WordPress. But if you are not? Share the error with us; we have a dedicated team who loves to tackle any WordPress issue.
0 Comments