In this post, I’m going to show you how to upload SVG image files in WordPress without using any plugin. By default WordPress doesn’t allow users to upload SVG images or files through WordPress media uploader. If you have tried to upload any SVG file using default WordPress media uploader, you will surely get error message of rejection. WordPress disable to upload SVG file, because of some security purpose, but you can safely Enable or upload SVG files in WordPress Media.
What is an Scalable Vector Graphics (SVG) ?
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.
“SVG is an Scalable Vector Graphics, that enables to resize image or zoom in or zoom out image without any distortion or blurness in quality. Image Quality and clarity remain same if you increase width or size of image, while in case of JGP/JPEG and PNG images, get blur or pixelated if size is changed, also almost all modern browser supports SVG file format. That’s why many user uploading their website logo and icon in SVG file format.
1. How to upload SVG image files in WordPress?
As i told every time, WordPress is a true platform for technical and nontechnical user. you Don’t need to install any heavy plugin, for small task/purpose, It allow many customization and configuration changes through your site theme function.php file.
Here are the steps to go to your theme function.php file.
- Go to youe WordPress Dashboard and click on Appearance menu.
- Click on the “Editor” and on the right-hand side find Theme functions (functions.php).
- Open the functions.php file and paste the following code to the file in the end before the closing of PHP ?> tag.
Here i have shown two code snippets, you can use one of them, both of them working perfectly.
Snippets 1 :
1 2 3 4 5 6 7 8 9 |
/** * Add SVG Mime Types */ function w3reign_svg_mime_type( $mimes = array() ) { $mimes['svg'] = 'image/svg+xml'; $mimes['svgz'] = 'image/svg+xml'; return $mimes; } add_filter( 'upload_mimes', 'w3reign_svg_mime_type' ); |
Snippets 2 :
1 2 3 4 5 6 |
function add_svg_to_upload_mimes( $upload_mimes ) { $upload_mimes['svg'] = 'image/svg+xml'; $upload_mimes['svgz'] = 'image/svg+xml'; return $upload_mimes; } add_filter( 'upload_mimes', 'add_svg_to_upload_mimes', 10, 1 ); |
After adding this code snippets in your functions.php file, click on “Update File” button to save the changes. This will allow you to upload SVG and SVGZ from WordPress Media Uploader.
2. Add SVG Mime Types to .htaccess
Till now you don’t have enables SVG file upload option in server dircotory. To Upload successfully you need to tell or enable to allow upload request of SVG and SVGZ file.
To this, open your root .htaccess file and add below lines.
1 2 3 |
# Add SVG Mime Types AddType image/svg+xml svg AddType image/svg+xml svgz |
Save the file and now you’re done! You can now upload SVG and SVGZ files in your WordPress site.
Now lets discuss why WordPress disable to upload SVG file, because of security purpose?
So, what is SVG security concern for SVG?, because SVG is wrapped in XML. SVG isn’t the actual problem, XML is the problem for WordPress.
XML has many capabilities and exploitable traits that can allow an hacker to either crash your website with DDoS (Distributed Denial of Service) and DOS (Denial of Service) attacks, or even view open and save files from the server which shouldn’t be accessible, which can hold sensitive information, credentials and data of your site. This kind of attacks are called XML External Entity Attacks.
Also, Hacker can use SVG file use to execute or run JavaScript, on your server, which should not on your server. XML is structural likely as HTML, can be used to attach and link to external scripts such as JavaScript and Flash, Doing this allows an attacker to use persistent or DOM-based XSS (Cross-Site Scripting) attacks.
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <g> <circle fill="#020202" cx="254.831" cy="164.509" r="20.812"/> </g> <script> alert( 'Script Inside SVG Code' ); </script> </svg> |
[paypal-donation]