The two directives reference the image differently, <ma-switch-img> simply uses a <img> tag internally and sets its src attribute. <ma-svg> embeds the contents of the SVG into the page. This definitely points to the SVG not being able to reference its gradients correctly once its embedded, I'd play around with moving the <linearGradient> into a <defs> tag inside the SVG as per the stack overflow link I posted.