SVG Fallback with DisplayTemplates in EPiServer Mvc 7.5

The requests about doing stuff with Svg starts to increase and it was time to think about how to handle it. I had probobly 5 different complicated ways to do it and since I’m effective (or lazy) i like it to be easy for me to handle.

So what I landed in was actually a pretty simple concept giving the DisplayTemplates some more responsibility. Think I’m pretty ok with this solution. There are some quirks for the EPiServer Editmode where I have some problems with it handling svg as images. But no time for that today. Doing simple failsafe for that place.

So what I do in my DisplayTemplate is to check if there is any more viewData that i care about in this state. Here i decided to use the cssClass on rendering aswell and now check for an svgModel property. If an svg property is present, I render that as main imagetag and I add the original as a fallback. (Here is also the Editmode workaround atm.)

Having this displaytemplate for my ContentReferences with UiHint.Image, i can now pass and extra ContentReference into it as so properties look like this.

and calling it looks like this

That is about as easy as it gets I think. Then I complete it with a js to take care of the fallback if we don’t have support for svg. Using Modernizr.