Have you tried to upload SVG images on your WordPress installation but were unable to? In this guide, we’ll show you how to safely do so.
Vector image formats (like SVGs) are a great alternative to PNGs if you’re planning to display logos, icons, and infographics across multiple devices and screen resolutions.
However, you’ll find that uploading SVGs to your WordPress Media Library isn’t a straightforward process like it is for PNGs or JPEGs.
WordPress doesn’t have native support for SVGs due to security concerns.
This is because SVGs aren’t a typical image format like JPEGs or PNGs (raster images); they are a form of vector image that comprise of code to define lines, curves, color, etc. Naturally, anything using code can be manipulated, thus SVGs can potentially be used for malicious purposes.
In this article, we’ll talk about why this is the case and how you can easily and safely use SVGs on your WordPress site.
Why Can’t I Upload SVGs To My WordPress Media Library?
When you try to directly upload an SVG file to WordPress, you’ll likely see an error with the message: “Sorry this file type is not permitted for security reasons.”
This is mostly down to the intricacies of the SVG format.
SVGs can be simple static images, or dynamic and interactive with hover states and clickable areas (Example).
If you run websites where users or other authors can upload SVG files, it opens up your site to potential XML entity attacks, brute force attacks, and other nefarious hacking attempts.
This is why WordPress doesn’t support SVGs out-of-the-box. In fact, there have been ongoing discussions around providing native support for SVGs in WordPress since 2013.
However, that doesn’t mean you can’t use SVGs at all in your WordPress site. There are some methods to safely use SVGs in your WordPress site.
How to Make SVGs Safe
There are many plugins and manual methods available to facilitate uploading SVGs on WordPress. However, simply downloading any free plugin and using them to upload SVGs isn’t necessarily the best solution as they may not address the underlying security concerns associated with SVGs.
Before doing anything with SVGs, it’s a good practice to ensure that your source of SVG files is a trusted one – that means restricting access so that only you or another trusted person can contribute SVGs on your WordPress site.
Moreover, in order to make sure your SVG files are truly safe, it’s recommended that you first sanitize them (i.e., clean up the code to prevent errors, suspicious code, and other security issues).
There are multiple ways to do this:
Using a Sanitization Plugin
You can use WordPress plugins to sanitize your SVG files. There are many different plugins available, both free and paid.
When deciding which plugin to use, consider what features the plugin offers, such as sanitizing SVG files, restricting SVG uploads to administrators, and any other safety or functionality-related features.
One free plugin you can use is SVG Support. This plugin not only sanitizes your SVG files but also allows you to restrict SVG uploads to administrators only.
No matter which plugin you choose to utilize, make sure to always test the plugin to verify that website functionality doesn’t break. If you find that the plugin isn’t compatible with your WordPress site, consider using alternatives.
Using an Open-Source Sanitization Library
You can also use an open-source library to sanitize your SVG files. While we can’t vouch for their efficacy, you can find some well-known examples online, such as DOMPurify and svg-sanitizer, the latter provided by the same person who created the Safe SVG plugin.
Manually Cleaning up the Code
If you’re well-versed in XML coding, you can manually clean up the code yourself.
This is also helpful for reducing the SVG markup (i.e., number of lines of code) when typically creating SVG files with graphic design software (e.g., Illustrator, Sketch, Inkscape, etc.).
Keep in mind that the larger an XML file is, the longer it will take to load so cleaning up the code is also beneficial for performance.
Check out these external resources to learn more:
How to Enable SVG Uploads
There are multiple ways to enable SVG uploads on your WordPress site:
The plugins listed above not only sanitize your SVG files, but allow you to directly upload them onto your WordPress site.
You should be able to directly upload them onto your Media Library, and even preview the images, just like you would for any JPEG or PNG.
Using Page Builders
Page builders provide a drag and drop interface to structure your page’s layout and add content. Some page builders also enable you to upload SVG images for icons.
For example, Elementor allows you to upload SVG images (or use their icon library) through widgets.
Note that you may see a warning about SVG security when you do this for the first time, and may need to enable the unfiltered file uploads option to facilitate SVG uploads.
Some page builders even sanitize the code themselves, but we can neither confirm or deny if they’re 100% clean. If you use a page builder for your site, consider using it to upload SVGs but make sure you weigh the risks involved, especially if you’re unsure about the source of the SVG files.
Manually Enabling SVG Support
If you prefer, you can also manually enable SVG support on WordPress by modifying your site’s
functions.php file. Note that this method requires admin rights.
Follow the steps below:
Step 1) Click on the Theme Editor Settings
On your WordPress sidebar, hover over Appearance and click on “Theme Editor”.
You should find this on the right hand side of the Theme Editor settings.
Scroll down to the bottom and add the below code:
Click on Update File when you’re done to save the changes. You should now be able to upload an SVG file to your Media Library.
Note that you will need to repeat this procedure for any themes you wish to have support for SVGs.
Remember to only use SVGs from trusted sources and/or sanitized SVG files if you decide to manually enable SVG support on WordPress.
Code errors may break your site
Make sure that you paste the code as-is in your functions.php file. Any mistakes (missing/redundant characters, erroneous syntax, etc.) in your code can break your site so we recommend testing this functionality on a staging/development site first. If you’re not confident working with code, we suggest using the plugin or page builder methods.
How to Insert SVGs on Your Page
Now that you can upload sanitized SVGs directly on to your WordPress Library, you can simply insert them on your WordPress page (or post) just like you usually would for any other raster image.
In your WordPress Editor, you can click on Add Media, select the desired image, and click “Insert into page”.
What this does is use an
<img> tag to insert your external SVG, just like it would do for any PNG or JPEG.
Note that you can only use this for static images (or static animations) because
Sanitization is only meant for static SVGs as the tools mentioned above will strip out any code that makes your SVGs interactive.
<svg> tags, but make sure your SVG has no malicious or bad code.
Read this external resource for more information on different ways of inserting SVGs on your page.
SVG files are a great choice to display logos, icons, and infographics on your site, both in terms of design and performance. However, WordPress doesn’t natively support SVGs as the nature of the file format makes them susceptible to external cyber attacks in some cases.
We’ve outlined some methods in this guide, showing you how to safely use them on WordPress. If you’re interested in using SVGs on your WordPress site, give this guide a try. Here are some external resources on safely using SVGs in WordPress:
Test with different countries, speeds and options
Get access to more Test Locations, Analysis Options and Connection Speeds!
Sign up for a Basic GTmetrix account and see how your site performs in more scenarios – It’s FREE!
This content was originally published here.