Today we are going to see how we can upload SVG images in the theme design configuration page for the site logo and favicon icon. In the previous article, we learned how to upload SVG images to the admin product page and system configuration settings.
Method to Upload SVG Image in theme design configuration page 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\MediaStorage\Model\File\Validator\NotProtectedExtension">
<plugin name="RemoveSvgFromNotProtectedExtension"
type="Vendor\Extension\Plugin\Model\File\Validator\NotProtectedExtension"/>
</type>
<type name="Magento\Theme\Model\Design\Backend\Logo">
<plugin name="AddedSvgExtensionForAllowedInHeaderLogo"
type="Vendor\Extension\Plugin\Model\Design\Backend\Logo"/>
</type>
<type name="Magento\Theme\Model\Design\Backend\Favicon">
<plugin name="AddedSvgExtensionForAllowedInFaviconIcon"
type="Vendor\Extension\Plugin\Model\Design\Backend\Favicon"/>
</type>
</config>
2) Create NotProtectedExtension.php file at Vendor\Extension\Plugin\Model\File\Validator directory
<?php
namespace Vendor\Extension\Plugin\Model\File\Validator;
class NotProtectedExtension
{
/**
* Remove svg from Not Protected Extensions
*
* @param \Magento\MediaStorage\Model\File\Validator\NotProtectedExtension $extension
* @param array $result
*
* @return array
*/
public function afterGetProtectedFileExtensions(
\Magento\MediaStorage\Model\File\Validator\NotProtectedExtension $extension,
$result
)
{
if (in_array('svg', $result)) {
unset($result['svg']);
}
return $result;
}
}
?>
3) Create Logo.php file at Vendor\Extension\Plugin\Model\Design\Backend directory
<?php
namespace Vendor\Extension\Plugin\Model\Design\Backend;
class Logo
{
/**
* Getter for allowed extensions of uploaded files.
*
* @param \Magento\Theme\Model\Design\Backend\Logo $logo
* @param array $result
*
* @return array
*/
public function afterGetAllowedExtensions(
\Magento\Theme\Model\Design\Backend\Logo $logo,
$result
)
{
if (!in_array('svg', $result)) {
$result[] = 'svg';
}
return $result;
}
}
?>
4) Create Favicon.php file at Vendor\Extension\Plugin\Model\Design\Backend directory
<?php
namespace Vendor\Extension\Plugin\Model\Design\Backend;
class Favicon
{
/**
* Getter for allowed extensions of uploaded files.
*
* @param \Magento\Theme\Model\Design\Backend\Favicon $favicon
* @param array $result
*
* @return array
*/
public function afterGetAllowedExtensions(
\Magento\Theme\Model\Design\Backend\Favicon $favicon,
$result
)
{
if (!in_array('svg', $result)) {
$result[] = 'svg';
}
return $result;
}
}
?>
Most Thought-Provoking Questions to Make You Think
- Does Magento support SVG?
- How do I upload images to Magento 2?
- How do I change the programmatic logo in Magento 2?
- How do I change my favicon in Magento 2?
- How do I change my favicon in Magento?
- What size should a favicon be?
- Can I use SVG for favicon?
- Can I use PNG as a favicon?
- How do I add a PNG to a favicon?
Do let me know if you have any queries 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 For More Tips And Tricks
