If you try to upload an SVG file to WordPress you will get an error that says “Sorry this type of file is not permitted”. So let's learn how to add SVG to WordPress.
What is an SVG File?
Now SVG is an XML file used for images. The benefits of SVG is the high quality of the image and the vectorial feature that lets you resize it without losing the quality.
SVG files are used widely today for website animated images.
Why you can't upload SVG files by default on WordPress?
WordPress hasn't integrated by default adding the SVG format file as part of its core. So if they will let the uploading of the file without the proper security checks we will have a great security problem.
The SVG format is an XML file that perse has big problems with security. For example, an attacker can spread an SVG file with malicious JavaScript included. An example of the XML vulnerabilities can be found here:
https://www.owasp.org/index.php/XML_External_Entity_(XXE)_Processing
How to Enable SVG on WordPress
You can use enable the SVG to upload very easy by adding this simple function on the wp-content/themes/specular/functions.php file:
function codeless_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'codeless_file_types_to_uploads');
After the adding of the code, you can upload any SVG file into WordPress but keep in mind that the files need to download from secure sources or you can sanitize files before uploading
This site can be useful for this purpose: SVG Sanitizer
Add SVG Support through plugins
On the WordPress Directory you can find different plugins that made possible the SVG support without adding an extra code.
Safe SVG
Safe SVG is the best way to Allow SVG Uploads in WordPress!
It gives you the ability to allow SVG uploads whilst making sure that they’re sanitized to stop SVG/XML vulnerabilities affecting your site.
It also gives you the ability to preview your uploaded SVGs in the media library in all views.
FREE FEATURES
Sanitized SVGs – Don’t open up security holes in your WordPress site by allowing uploads of unsanitized files.
View SVGs in the Media Library – Gone are the days of guessing which SVG is the correct one, we’ll enable SVG previews in the WordPress media library.
SVG Support
WordPress now requires us to have the tag in our SVG files before uploading. If you have security errors when trying to upload, please open your SVG file in a code editor such as sublime text and add the following to the very first line of your SVG file and save:
Your SVG should upload as normal again. I’m looking at implementing something to avoid this as soon as possible.
FEATURES
-SVG Support for your media library
-Inline your SVG code
-Works with the new Image Widget (WordPress 4.8+)
-Style SVG elements directly using CSS
-Animate SVG elements using CSS and JS
-Super easy settings page with instructions
-Restrict SVG upload ability to Administrators only
-Set custom css target class
-Extremely Simple To Use – Simplifies complex usage of SVG files
Easy SVG Support
EASY SVG Support is a Plugin that allows you to upload SVG Files into your Media library. This plugin was created for persons, who don’t need many options for SVG.
FEATURES OF THE PLUGIN INCLUDE:
Uploading SVG Support for WordPress
Easy installation
Display SVG Files in the Media Libary
Ludjon, who co-founded Codeless, possesses a deep passion for technology and the web. With over a decade of experience in constructing websites and developing widely-used WordPress themes, Ludjon has established himself as an accomplished expert in the field.
Comments
This is very fascinating, You’re an excessively skilled blogger. I have joined your feed and sit up for looking for more of your fantastic post. Also, I’ve shared your web site in my social networks!