Including SVG in a Lightning Component
That is a bug, although there is a simple workaround. In your component markup put the SVG in a DIV, wrapped with a CDATA block:
<div aura:id="svg_content">
<![CDATA[
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M120,108 C120,114.6 114.6,120 108,120 L12,120 C5.4,120 0,114.6 0,108 L0,12 C0,5.4 5.4,0 12,0 L108,0 C114.6,0 120,5.4 120,12 L120,108 L120,108 Z" id="Shape" fill="#2A739E"/>
<path d="M77.7383308,20 L61.1640113,20 L44.7300055,63.2000173 L56.0543288,63.2000173 L40,99.623291 L72.7458388,54.5871812 L60.907727,54.5871812 L77.7383308,20 Z" id="Path-1" fill="#FFFFFF"/>
</g>
</svg>
]]>
</div>
In the renderer for the component, add the following in afterRender:
({
afterRender: function(component, helper) {
var svg = component.find("svg_content");
var value = svg.getElement().innerText;
value = value.replace("<![CDATA[", "").replace("]]>", "");
svg.getElement().innerHTML = value;
}
})
I will check for a bug on this and open one if not.