Try our conversational search powered by Generative AI!

Render svg image directly using <svg> tags


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="" xmlns: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
" data-optly-63A20D95-AFEF-4B5F-A797-512600097889=""></path>

Oct 08, 2020 11:47

TinyMCE will remove svg-tags by default.

Try this in your TinyMCE configuration?

   .AddSetting("valid_children", "+body[svg]")
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

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
        public override Blob Thumbnail => BinaryData;
Edited, Oct 08, 2020 13:22
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.

Hi Anish,

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

            Name = "Image",
            Description = "The image.",
            GroupName = SystemGroups.Content,
            Order = 10)]
        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) />
Edited, Oct 08, 2020 13:44
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.
This thread is locked and should be used for reference only.
* 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.