How to Upload SVG Image in Magento 2 Custom Module

Magento 2 allows uploading JPG and PNG images by default. But it does not offer the feature to upload SVG, PDF, and, HTML files.

However, a store owner often requires to upload vector images in the backend as well as in the frontend. It is possible to upload an SVG file using a custom module.

The store owner may want to upload SVG images owing to its multiple benefits such as:

• SVG images are resolution-independent, i.e., it retains the same quality on every screen resolution or size.
• The SVG image can result in smaller file size compared to other image types.
• A JPG image might appear blurry in some displays, but an SVG image still displays in high quality on every screen.
• The use of an SVG image eliminates the HTTP request that needs to load in an image file. Hence, it results in fewer loading times for a page as no file needs to download.

To leverage these benefits, learn the programmatic method to upload SVG image in Magento 2 custom module.

Additionally, for example, the store offers a customization option that facilitates users to add their personalized design of the product by uploading an image. Now, what if the customer has an image in the SVG format? In that case, it’s a bad practice if a customer has to convert SVG files into JPG or PNG images manually.

They may even skip the purchase if they don’t know the image conversion or the competitor is supporting the SVG image format.

In order to avoid it, one may use the below solution.

Method to Upload SVG Image in Magento 2 Custom Module

1. Create the di.xml file at Vendor\Module\etc
   
   
   <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd"> <type name="Magento\Framework\File\Uploader"> <plugin sortOrder="1" name="MeetanshiAddSvg" type="Vendor\Module\Plugin\File\UploaderPlugin"/> </type> </config>

   1 2 3 4 5 6 7

   <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"         xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">     <type name="Magento\Framework\File\Uploader">         <plugin sortOrder="1" name="MeetanshiAddSvg" type="Vendor\Module\Plugin\File\UploaderPlugin"/>     </type> </config>

2. Create UploaderPlugin.php file at Vendor\Module\Plugin\File
   
   
   <?php namespace Vendor\Module\Plugin\File; use Magento\Framework\App\Action\Action; use Magento\Framework\App\Action\Context; class UploaderPlugin 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() { } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

   <?php namespace Vendor\Module\Plugin\File;   use Magento\Framework\App\Action\Action; use Magento\Framework\App\Action\Context;   class UploaderPlugin 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()     {     } }

That’s it.

Any doubts? Do mention them in the Comments section below.

I would be glad to help you out.

Also, please share the solution with Magento Community via social media.

Thank you.