How to render SVG in edit mode

Self note: SVG is a smart media format that enables us to use same image in different sizes without compromising on quality and performance. EPiServer supports SVGs but images will not display in editor mode while using the IMG tag, as media urls are updated with version details. e.g. “globalassets/160-835st_bilok_2_screw_straight8mm_x_35mm.svg” will change as  “/episerver/CMS/Content/globalassets/en/160-835st_bilok_2_screw_straight8mm_x_35mm.svg,,1823?epieditmode=False&visitorgroupsByID=undefined”. EpiServer will resolve urls for media in this way in Edit and Preview mode. In result svg will not be shown in editor mode. To display the SVG in edit mode, we will be required to resolve url in Default mode, this can be done by calling an overload of the GetUrl-method of the UrlResolver:

UrlResolver.Current.GetUrl(svgContent, language, new VirtualPathArguments() { ContextMode = ContextMode.Default })

2 replies on “How to render SVG in edit mode”

Comments are closed.