Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • Justin RW 13 posts 123 karma points
    Feb 06, 2018 @ 21:43
    Justin RW

    Adding SVG to grid editor and RTE

    I've removed svg from this config setting <disallowedUploadFiles>ashx,aspx,ascx,config,cshtml,vbhtml,asmx,air,axd,swf,xml,xhtml,html,htm,php,htaccess</disallowedUploadFiles> and I can now upload SVG files to media. I can also select them using the media picker.

    I can't, however, select SVG files using the 'Image' grid editor or the RTE. Is it possible to allow SVG files to be selected from these editors?

    I'm using v7.7.8

  • Daniel Chenery 119 posts 465 karma points
    Feb 06, 2018 @ 22:59
    Daniel Chenery

    You need to create imageFileTypes and add SVG to there

    Although, last time I did that I encountered another issue, and I can't remember what!

  • Justin RW 13 posts 123 karma points
    Feb 07, 2018 @ 06:54
    Justin RW

    Thanks Daniel. Adding that config setting did allow me to select images from the RTE and Grid Editors. Unfortunately, I now get an error when uploading new SVG files, which is perhaps the issue you experienced previously.

  • Daniel Chenery 119 posts 465 karma points
    Feb 07, 2018 @ 07:18
    Daniel Chenery

    Ah, yes, that is the one! I remember now

    Sadly, I've never been able to fix this. Hopefully someone else might no more though

  • Justin RW 13 posts 123 karma points
    Feb 16, 2018 @ 17:13
    Justin RW

    I believe this is a bug. You have to treat SVG's as files, rather than images otherwise you get an error when uploading, to get them to upload and then you can't select the SVG file with the media picker from the RTE editor or using the standard image grid editor because they only select images. I was trying to select SVG files for use in the grid editor so the solution I found for my situation was to create a custom grid editor, using LeBlender package, that used a media picker to select my svg images.

    The bug described has been raised previously here:

  • Ritesh 11 posts 91 karma points
    Nov 06, 2020 @ 09:14


    With Umbraco 8, need to add "svg[class]" under validElements tag in "config\tinyMceConfig.config" and it will allow manually copy-paste of svg files.


  • Andrew Hopkins 18 posts 120 karma points
    Apr 02, 2021 @ 14:44
    Andrew Hopkins

    I had a similar issue where I wanted an SVG with a PNG fallback image that could be chosen from the media library and inserted into a page. I built a macro with 3 parameters and with lots of testing got the following code to work:

    • First Parameter: svgImage (MediaPicker)
    • Second Parameter: pngImage (MediaPicker)
    • Third Parameter: altText (TextString)

    @inherits Umbraco.Web.Macros.PartialViewMacroPage
    @using Umbraco.Core.Models.PublishedContent
    @using ContentModels = Umbraco.Web.PublishedModels;
    @using Umbraco.Web
    @using Umbraco.Core
    var svgId = Model.MacroParameters["svgImage"].ToString();
    var pngId = Model.MacroParameters["pngImage"].ToString();
    var altText = Model.MacroParameters["altText"].ToString();
    var svgMediaItem = Umbraco.Media(@svgId) as ContentModels.File;
    var pngMediaItem = Umbraco.Media(@pngId) as ContentModels.Image;
    @* SVG Image *@
    <img class="img-responsive" style="width:100%" src="@svgMediaItem.Url" onerror="[email protected]" alt="@altText" />
Please Sign in or register to post replies

Write your reply to: