Render svg image directly using <svg> tags

Vote:
 

What we are looking for is to render .svg image from CMS without using “img” tag. We want to render it inside “<svg>” tag

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve" data-optly-63A20D95-AFEF-4B5F-A797-512600097889="">
<path d="M42.2,19.6c-0.1-0.1-0.3-0.1-0.5-0.1l-11.6,2.3l0.3-2.9l4.7-5.7c0.2-0.3,0.2-0.7-0.1-0.9c-0.3-0.2-0.7-0.2-0.9,0.1l-5.2,6.3
l-2.3-2.8l0.6-5.5c0-0.3-0.2-0.7-0.6-0.7c-0.3,0-0.7,0.2-0.7,0.6l-0.4,3.6l-1.3,0.3L23,13.7L22.4,11c-0.1-0.3-0.4-0.5-0.8-0.4
c-0.3,0.1-0.5,0.4-0.4,0.7l1.1,4.5L21.2,17l-6-2.7l-3.5-3.2c-0.3-0.2-0.7-0.2-0.9,0.1c-0.2,0.3-0.2,0.7,0.1,0.9l10.6,9.6l-3.2,1.9
" data-optly-63A20D95-AFEF-4B5F-A797-512600097889=""></path>
</svg>

#229163
Oct 08, 2020 11:47
Vote:
 

TinyMCE will remove svg-tags by default.

Try this in your TinyMCE configuration?

config.Default()
   .AddSetting("valid_children", "+body[svg]")
#229170
Oct 08, 2020 12:33
Anish - Oct 08, 2020 13:19
This is not inside any tinymce editor. Basically we want to upload .svg images in CMS and show it in any block inside a
Vote:
 

Ah, I see. Just create a media type for your SVG's and upload, then.

using EPiServer.DataAnnotations;
using EPiServer.Framework.Blobs;
using EPiServer.Framework.DataAnnotations;

namespace Your.Own.Namespace
{
    [ContentType(GUID = "C942E7XX-9EXX-4AXX-88XX-5D95318494XX")]
    [MediaDescriptor(ExtensionString = "svg")]
    public class VectorImageFile : ImageFile
    {
        // https://world.episerver.com/blogs/Ben-McKernan/Dates/2015/7/supporting-svg-images/
        public override Blob Thumbnail => BinaryData;
    }
}
#229175
Edited, Oct 08, 2020 13:23
Anish - Oct 08, 2020 14:42
Yes, I have done this in back-end. This will enable svg thumbnail in CMS edit. But finally, how the svg is rendered in UI? This is where I am stuck.
Vote:
 

Hi Anish,

Create a property in the block or page where you want to display.

        [CultureSpecific]
        [Display(
            Name = "Image",
            Description = "The image.",
            GroupName = SystemGroups.Content,
            Order = 10)]
        [UIHint(UIHint.Image)]
        public virtual ContentReference SvgImage { get; set; }

And render image property in view:

<img class="icon-sheet" src="@Url.ContentUrl(Model.SvgImage)" @Html.EditAttributes(x => x.SvgImage) />
#229180
Edited, Oct 08, 2020 14:53
Anish - Oct 23, 2020 8:47
This is what we are currently doing. But if you could see from the question, what I am trying to do is render it within svg tag itself, not within img tag.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.