3

how can I upload SVG files(icons for example) to my cms Page.

If I try to upload them by using "insert image" and upload them to my media storage I always get "Disallowed file type"?

Is there any way to allow the upload of SVG files?

5
  • show what you tried ?
    – Priyank
    Oct 22 '16 at 7:17
  • I am not sure what you mean by that? I tried to upload a .svg file through the magento 2 backend. Content->Page->MyPage->Content Tab->Insert Image..
    – TrytoFly
    Oct 22 '16 at 8:58
  • 1
    keep in mind that svgs are disabled for security reasons. they can contain malicious javascript code. Oct 22 '16 at 9:39
  • Oh, ok I actually did not knew that, thank you! Although I can not really refrain from .svg´s in general.
    – TrytoFly
    Oct 22 '16 at 19:37
  • I have tried as you said but it is not working
    – Jaisa
    Aug 21 '18 at 2:59
3

Go To File: <your magento dir>/vendor/magento/module-cms/etc/di.xml

Add your extension you want to allow <item name="svg" xsi:type="number">1</item>

<argument name="extensions" xsi:type="array">
    <item name="allowed" xsi:type="array">
        <item name="jpg" xsi:type="number">1</item>
        <item name="jpeg" xsi:type="number">1</item>
        <item name="png" xsi:type="number">1</item>
        <item name="gif" xsi:type="number">1</item>
        <item name="svg" xsi:type="number">1</item>
    </item>
    <item name="image_allowed" xsi:type="array">
        <item name="jpg" xsi:type="number">1</item>
        <item name="jpeg" xsi:type="number">1</item>
        <item name="png" xsi:type="number">1</item>
        <item name="gif" xsi:type="number">1</item>
    </item>
    <item name="media_allowed" xsi:type="array">
        <item name="flv" xsi:type="number">1</item>
        <item name="swf" xsi:type="number">1</item>
        <item name="avi" xsi:type="number">1</item>
        <item name="mov" xsi:type="number">1</item>
        <item name="rm" xsi:type="number">1</item>
        <item name="wmv" xsi:type="number">1</item>
    </item>
</argument>
4
  • 1
    how to do the same not changing the core file? is there any way to rewrite it? Feb 1 '17 at 9:44
  • 5
    changing Magento core files is REALLY bad practice, especially when you can extend instead. Dmitry's solution is way better. Aug 18 '17 at 17:28
  • It allowed svg , but failed to save and not showing the image preview also
    – Jaisa
    Aug 21 '18 at 6:41
  • To those reading: please do not do this. You should never edit Composer files like this
    – Leland
    Feb 5 '19 at 17:07
12

If you wan't change core files add this to di.xml of your module

<type name="Magento\Cms\Model\Wysiwyg\Images\Storage">
    <arguments>
        <argument name="extensions" xsi:type="array">
            <item name="allowed" xsi:type="array">
                <item name="svg" xsi:type="number">1</item>
            </item>
            <item name="image_allowed" xsi:type="array">
                <item name="svg" xsi:type="number">1</item>
            </item>
            <item name="media_allowed" xsi:type="array">
                <item name="svg" xsi:type="number">1</item>
            </item>
        </argument>
    </arguments>
</type>

For magento 2.3 a bit different:

<type name="Magento\Cms\Model\Wysiwyg\Images\Storage">
    <arguments>
        <argument name="extensions" xsi:type="array">
            <item name="allowed" xsi:type="array">
                <item name="svg" xsi:type="string">text/html</item>
            </item>
            <item name="image_allowed" xsi:type="array">
                <item name="svg" xsi:type="string">text/html</item>
            </item>
            <item name="media_allowed" xsi:type="array">
                <item name="svg" xsi:type="string">text/html</item>
            </item>
        </argument>
    </arguments>
</type>

It isn't clear solution - there will be some errors in admin, but at least it allows you to upload what you want

6
  • 1
    The item parameter type changed to string recently with a mime-type value, e.g. <item name="svg" xsi:type="string">image/svg+xml</item>
    – Zifius
    Oct 10 '18 at 5:55
  • not working - Magento ver. 2.2.6
    – voronovam
    Oct 15 '18 at 3:47
  • 2
    It's no longer working in 2.3 and I suggest whoever wants to use svg to simply give it up. Looks like Magento is determined to phase out svg for security reasons: magento.com/security/patches/…
    – Ethan Wan
    Feb 1 '19 at 1:07
  • how can working in 2.3? thank you! @EthanWan
    – niceonelee
    Mar 1 '19 at 6:24
  • @niceonelee, I've updated the answer
    – Dmitry
    Mar 1 '19 at 8:21
0

For Magento 2.3, You have to add this to di.xml of your custom module

<type name="Magento\Cms\Model\Wysiwyg\Images\Storage">
    <arguments>
        <argument name="extensions" xsi:type="array">
            <item name="allowed" xsi:type="array">
                <item name="svg" xsi:type="string">image/svg+xml</item>
            </item>
            <item name="image_allowed" xsi:type="array">
                <item name="svg" xsi:type="string">image/svg+xml</item>
            </item>
            <item name="media_allowed" xsi:type="array">
                <item name="svg" xsi:type="string">image/svg+xml</item>
            </item>
        </argument>
    </arguments>
</type>
0

Here is a free solution that adds the possibility to upload SVG images in Magento: https://github.com/MagestyApps/module-web-images

0

Add Following Two Files

app/code/VendoreName/ModuleName/etc/adminhtml

di.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
    <preference for="Magento\MediaStorage\Model\File\Uploader" type="VendoreName\ModuleName\Framework\File\Uploader"/>
</config>

app/code/VendoreName/ModuleName/Framework/File

Uploader.php

<?php

    namespace VendoreName\ModuleName\Framework\File;

    use Magento\Framework\Validation\ValidationException;

    class Uploader extends \Magento\MediaStorage\Model\File\Uploader
    {

        protected function _validateFile()
        {
            if ($this->_fileExists === false) {
                return;
            }
            /// You can also add your allow File types in array and check in_array
            if (!$this->getFileExtension() == 'svg') {
                //is file extension allowed
                if (!$this->checkAllowedExtension($this->getFileExtension())) {
                    throw new ValidationException(__('Disallowed file type.'));
                }
            }
            //run validate callbacks
            foreach ($this->_validateCallbacks as $params) {
                if (is_object($params['object'])
                    && method_exists($params['object'], $params['method'])
                    && is_callable([$params['object'], $params['method']])
                ) {
                    $params['object']->{$params['method']}($this->_file['tmp_name']);
                }
            }
        }
    }

After adding run below commands

php bin/magento -f module:enable VendoreName_ModuleName --clear-static-content

php bin/magento c:c

Now SVG files are allow for upload.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.