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, 2016 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, 2016 at 8:58
  • 1
    keep in mind that svgs are disabled for security reasons. they can contain malicious javascript code. Oct 22, 2016 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, 2016 at 19:37
  • I have tried as you said but it is not working
    – Jaisa
    Aug 21, 2018 at 2:59

5 Answers 5

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, 2017 at 9:44
  • 6
    changing Magento core files is REALLY bad practice, especially when you can extend instead. Dmitry's solution is way better. Aug 18, 2017 at 17:28
  • It allowed svg , but failed to save and not showing the image preview also
    – Jaisa
    Aug 21, 2018 at 6:41
  • To those reading: please do not do this. You should never edit Composer files like this
    – Leland
    Feb 5, 2019 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, 2018 at 5:55
  • not working - Magento ver. 2.2.6
    – siberian
    Oct 15, 2018 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, 2019 at 1:07
  • how can working in 2.3? thank you! @EthanWan
    – niceonelee
    Mar 1, 2019 at 6:24
  • @niceonelee, I've updated the answer
    – Dmitry
    Mar 1, 2019 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.