SVG tags in Lightning Component

Question

Is there a way to use SVG tags in lightning components? I would like to build and display about 6 SVG icons, but unable to use <svg> tag in the component. Is there any workaround for this?

Answer 1

One option here is to use a visualforce page to generate the svg, and use a query string parameter to set the color. Then you can include an img tag in your lightning component that references the visualforce page, and have the color set by a component attribute.

Circle.page

<apex:page 
 contentType="image/svg+xml"
 controller="Circle"
>

    <svg xmlns="http://www.w3.org/2000/svg"
     width="200" 
     height="200">

        <circle 
         cx="100" 
         cy="100" 
         r="50" 
         stroke="black"
         stroke-width="1" 
         fill="{! Color }" 
        />

    </svg>

</apex:page>

Circle.cls

public class Circle {

    private String Color ;

    public  String getColor(){
        return this.Color ;
    }

    public Circle(){
        Color = ApexPages.currentPage().getParameters().get('color');
    }

}

circle.cmp

<aura:component>

    <aura:attribute 
     name="color" 
     type="string"
     default="rgb(53,64,200)"
    />

    <img 
     src="{! 'https://analysis-dev-ed--analysis.ap7.visual.force.com/apex/Circle?color=' + v.color }" 
    />

</aura:component>

myApp.app

<aura:application >

    <c:Circle 
     color="blue" 
    />

    <c:Circle 
     color="red" 
    />

    <c:Circle 
     color="yellow" 
    />

    <c:Circle 
     color="green" 
    />

</aura:application>

---

And there you have a lightning component with an svg image where you can change the color based on component attribute values: