Today we are going to see how we can upload SVG images in the admin product page and system configuration settings since Magento 2 natively does not allow uploading SVG images. Magento natively allows uploading JPG, GIF, PNG.
However, sometimes merchants are required to upload SVG images in the backend to display in the frontend side as there are many benefits of using SVG images in the website as below.
- SVG images are resolution-independent and can scale to any dimension without losing quality
- SVG images can be created and edited with any text editor
- SVG images are zoomable
- SVG graphics do NOT lose any quality if they are zoomed or resized
To leverage these benefits, why we will not do this.
Below are some methods to Upload SVG Image using Custom Module :
1) Create the di.xml file at app/code/Vendor/Extension/etc directory
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Framework\File\Uploader">
<plugin name="AddedSvgExtensionForAllowedInSystemConfig" type="Vendor\Extension\Plugin\File\Uploader"/>
</type>
</config>
2) Create Uploader.php file at Vendor\Module\Plugin\File directory
<?php
namespace Vendor\Extension\Plugin\File;
use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
class Uploader extends Action
{
public function __construct(Context $context)
{
parent::__construct($context);
}
public function aroundSetAllowedExtensions(\Magento\Framework\File\Uploader $subject, \Closure $proceed, $extensions = [])
{
if (!in_array('svg', $extensions)) {
$extensions[] = 'svg';
}
return $proceed($extensions);
}
public function execute()
{
}
}
?>
Please note that if we need to add SVG images in theme design configuration then the above code will not work. We need to do customisation to allow it. Don’t worry we will publish that article very soon.
Do let me know if you have any query once review this tutorial then post your comments in the comment section.
Thank you for reading…We hope it helps you out. For any assistance contact us.
Follow us on Linkedin
