Render svg image directly using <svg> tags

Anish

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

#229163

Oct 08, 2020 11:47

Tomas Hensrud Gulla

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

Tomas Hensrud Gulla

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: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.

Sanjay Kumar

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 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.

Try our conversational search powered by Generative AI!

Render svg image directly using <svg> tags