function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
naresh shettynaresh shetty 

Need urgent help in use of SVG tag in lighting component

I need to embed SVG image in my lighting component and on that image I have build logic on each path id.Image conatines each body part and  Each path ID represent one part, below is the sample <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 300 716.2" class="bodyImageSVG" style="enable-background:new 0 0 300 716.2;height:358.5;width:150px" xml:space="preserve" >

</style>
<g id="body_a">
    <path id="body" class="st0" d="M299.9,385.4c-0.7-2.9-1.5-6-2.9-8.5c-3.2-5.7-6.1-11.9-10.5-16.5c-14.6-15.2-18.3-34-19.3-54
        c-0.8-15.3-4.8-29.5-10.3-43.9c-5.8-15.4-8.6-32.4-10.3-49c-1.7-16.4,0.2-33.2-0.9-49.7c-0.6-8.9-3-18-6.5-26.1
        c-4.8-11-14.6-16.3-26.4-18.4c-0.6-0.1-1.1-0.2-1.7-0.3c-7.4-1.4-14.9-3.1-21.8-6c-1.6-0.6-3-1.5-4.4-2.5
        c-9.9-7.3-12.9-22.9-6.2-33.8c3.8-6.3,7.2-12.9,10.4-19.5c1.6-3.4,2.4-6.5-1.6-9.8c-1.9-1.5-1.4-6.3-1.4-9.6
        C185.8,15.9,170.9,0.4,150,0c-20.9,0.4-35.8,15.9-35.9,37.8c0,3.3,0.4,8.1-1.4,9.6c-4.1,3.3-3.3,6.5-1.6,9.8
        c3.2,6.6,6.5,13.2,10.4,19.5c6.7,10.9,3.7,26.5-6.2,33.8c-1.3,1-2.8,1.8-4.4,2.5c-6.8,2.8-14.1,4.5-21.3,5.9
        c-0.7,0.1-1.5,0.3-2.2,0.4c-11.8,2.1-21.6,7.4-26.4,18.4c-3.5,8.2-5.9,17.3-6.5,26.1c-1.1,16.5,0.8,33.3-0.9,49.7
        c-1.7,16.5-4.5,33.5-10.3,49c-5.4,14.4-9.5,28.6-10.3,43.9c-1,19.9-4.7,38.7-19.3,54C9.1,365,6.2,371.2,3,376.8
        c-1.5,2.6-2.3,5.6-2.9,8.5c-0.3,1.1,0.4,3.4,1.1,3.6c1.2,0.4,3.4,0.2,4.3-0.6c3.1-2.9,5.8-6.3,9.3-10.1C13,390.4,1.6,407.1,7,412.6
        c1.2,1.2,3.1,0.2,3.8-0.6c0.7-0.7,7.3-16.4,9.9-21.4c0.5-1,1-0.3,1,0.3c-0.9,11.7-6.1,30.5-0.9,33.6c1.5,0.9,3-0.6,3.6-1.5
        c0.3-0.5,2.4-20.5,4.2-29.6c0.1-0.6,1-0.4,1-0.1c0.1,7.8-0.3,24.5,2.4,27.8c0,0.1,0,0.1,0,0.2c0.1,0,0.1,0,0.2,0
        c0.4,0.5,0.9,0.9,1.5,1.2c1.6,0.7,2.9-1,3.3-2c0.2-0.5,0.4-16.9,1.1-25.7c0.1-0.6,0.8-0.7,1-0.4c0.1,0.2,0.4,6.4,0.5,8.2
        c0.2,3.7,2.7,10.3,6,11.2c1.7,0.4,2.7-1.4,3-2.4c0.2-0.6-0.3-11.6-0.7-20.1c0.4-8.4,0.7-16.7,0.3-25.1c-0.7-11.9,2.4-22.2,8-32
        c14.2-24.8,25.5-50.2,25.4-79.7c0-7.7,3.1-15.4,4.8-23.2c1.1,0.1,2.2,0.3,3.3,0.4h0.1c0,0.1,0,0.2,0,0.3
        c0.5,24.2,1.2,48.5,1.4,72.7c0,4.3-1.7,8.6-3.1,12.8c-3.9,11.8-7.5,23.6-9.8,35.6c-2.4,12.7-3.4,25.7-1.8,39.1c1.1,9,2.2,18,3.3,27
        c0.9,7.5,1.8,14.9,2.8,22.3c3.6,27.7,16.9,54.8,15.8,83.1c-0.3,7.3,0.1,14.9-1.8,21.8c-3.2,12.2-3.5,24.4-0.5,36.6
        c5.2,21,11.2,41.8,17.2,62.7c4.6,16.3,8.5,32.4,1.1,48.5c-1.6,3.5-2.9,7.5-3.2,11.4c-0.2,2.2,0.4,6.9,4.4,8.4s2.8,2.1,15.4,2.1
        c19.1,0,14.3-7.3,13.2-12.1c-4.6-19.5-3.2-38.8-6.1-58.6c-2-13.4,0.1-27.4,0.2-41.2c0.1-12.3,1-24.8-0.5-37
        c-1.6-13.5-2.3-26.3-0.5-39.6c5.1-36.1,4.7-72.4,8.8-108.6h7.9c4.1,36.2,3.8,72.4,8.8,108.6c1.9,13.3,1.2,26.1-0.5,39.6
        c-1.5,12.2-0.6,24.6-0.5,37c0.1,13.7,2.2,27.7,0.2,41.2c-2.9,19.7-1.5,39.1-6.1,58.6c-1.1,4.8-6,12.1,13.2,12.1
        c12.6,0,11.4-0.1,15.4-2.1s4.6-6.2,4.4-8.4c-0.3-3.9-1.5-7.8-3.2-11.4c-7.4-16.1-3.6-32.2,1.1-48.5c5.9-20.8,11.9-41.7,17.2-62.7
        c3.1-12.3,0.8-24.4-2.5-36.6c-1.8-6.9,0.5-14.5,0.2-21.8c-1.1-28.3,12.2-55.4,15.8-83.1c1-7.4,1.9-14.9,2.8-22.3
        c1.1-9,2.2-18,3.3-27c1.7-13.4,0.7-26.4-1.8-39.1c-2.3-12-5.9-23.8-9.8-35.6c-1.4-4.2-3.2-8.5-3.1-12.8c0.2-24.3,0.9-48.5,1.4-72.7
        c0-0.1,0-0.2,0-0.3c0.2,0,0.4,0,0.6-0.1c0.9-0.1,1.9-0.2,2.8-0.3c1.7,7.7,4.9,15.5,4.8,23.2c-0.1,29.5,11.2,54.9,25.4,79.7
        c5.6,9.8,8.7,20.1,8,32c-0.5,8.3-0.2,16.7,0.3,25.1c-0.4,8.5-0.9,19.5-0.7,20.1c0.3,1,1.4,2.9,3,2.4c3.3-0.9,5.8-7.5,6-11.2
        c0.1-1.8,0.4-8,0.5-8.2s0.9-0.2,1,0.4c0.8,8.8,0.9,25.2,1.1,25.7c0.4,1,1.8,2.6,3.3,2c0.6-0.3,1.1-0.7,1.5-1.2c0.1,0,0.1,0,0.2,0
        c0-0.1,0-0.1,0-0.2c2.7-3.3,2.3-20,2.4-27.8c0-0.3,0.8-0.5,1,0.1c1.9,9.2,3.9,29.1,4.2,29.6c0.5,0.9,2.1,2.4,3.6,1.5
        c5.2-3.1,0-21.9-0.9-33.6c0-0.6,0.5-1.3,1-0.3c2.5,5,9.2,20.8,9.9,21.4c0.8,0.7,2.6,1.8,3.8,0.6c5.4-5.5-6-22.2-7.8-34.4
        c3.5,3.8,6.2,7.2,9.3,10.1c0.9,0.9,3.1,1.1,4.3,0.6C299.6,388.8,300.2,386.5,299.9,385.4z"/>
</g>
<g id="right-leg-o">
    <g>
        <path id = "right-leg-1" class="st1" d="M152.9,411.3c-1,0-2,0-2.9,0s-1.9,0-2.9,0c-0.2,1.2-0.4,2.3-0.5,3.4c-0.2,1.5-0.4,3-0.5,4.5h7.9
            c-0.2-1.5-0.3-3-0.5-4.5C153.3,413.6,153.1,412.5,152.9,411.3z"/>
        <path id="Right-leg-front" ng-show = "front" class="st1" d="M82.4,441.6c3.6,27.7,16.9,54.8,15.8,83.1c-0.3,7.3,0.1,14.9-1.8,21.8c-3.2,12.2-3.5,24.4-0.5,36.6
            c5.2,21,11.2,41.8,17.2,62.7c4.6,16.3,8.5,32.4,1.1,48.5c-1.6,3.5-2.9,7.5-3.2,11.4c-0.2,2.2,0.4,6.9,4.4,8.4s2.8,2.1,15.4,2.1
            c19.1,0,14.3-7.3,13.2-12.1c-4.6-19.5-3.2-38.8-6.1-58.6c-2-13.4,0.1-27.4,0.2-41.2c0.1-12.3,1-24.8-0.5-37
            c-1.6-13.5-2.3-26.3-0.5-39.6c5.1-36.1,4.7-72.4,8.8-108.6H79.6C80.5,426.7,81.5,434.2,82.4,441.6z"/>
            <path id="Left-leg-back" ng-show = "back" class="st1" d="M82.4,441.6c3.6,27.7,16.9,54.8,15.8,83.1c-0.3,7.3,0.1,14.9-1.8,21.8c-3.2,12.2-3.5,24.4-0.5,36.6
            c5.2,21,11.2,41.8,17.2,62.7c4.6,16.3,8.5,32.4,1.1,48.5c-1.6,3.5-2.9,7.5-3.2,11.4c-0.2,2.2,0.4,6.9,4.4,8.4s2.8,2.1,15.4,2.1
            c19.1,0,14.3-7.3,13.2-12.1c-4.6-19.5-3.2-38.8-6.1-58.6c-2-13.4,0.1-27.4,0.2-41.2c0.1-12.3,1-24.8-0.5-37
            c-1.6-13.5-2.3-26.3-0.5-39.6c5.1-36.1,4.7-72.4,8.8-108.6H79.6C80.5,426.7,81.5,434.2,82.4,441.6z"/>
    </g>
</g>

since SVG tag is not supported in lighting component and need some urgent help here how can I achive this .. 

 
NagendraNagendra (Salesforce Developers) 
Hi Naresh,

Sorry for this issue you are facing.

May I suggest you please give a try by using the workaround suggested in the below thread. Please let us know if this helps.

Thanks,
Nagendra