Как использовать один файл SVG на странице более одного раза

У меня карусель простая сова -

<div id = "header-slider" class = "owl-carousel owl-theme">
    <div class = "single_slide" data-dot='<button role = "button" class = "owl-dot"></button><?php include("inc/chart3.svg")?>'>
       <img src = "assets/images/banner.jpg" alt = "" title = "">
    </div>
    <div class = "single_slide" data-dot='<button role = "button" class = "owl-dot"></button><?php include("inc/chart3.svg")?>'>
        <img src = "assets/images/banner.jpg" alt = "" title = "">
    </div>
</div>

И я пытаюсь включить файл svg (inc / chart3.svg) вместо обычных точек. Проблема в том, что загружается только один файл, а остальные не отображаются. Есть ли способ отобразить каждый файл svg и запустить его анимацию, когда установлен класс «активный»?

У SVG есть этот код:

<svg version = "1.1"  xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" x = "0px" y = "0px"
width = "16" height = "16" viewbox = "0 0 250 250" enable-background = "new 0 0 
426.667 410" xml:space = "preserve">
<path class = "kruznice" transform = "translate(125, 125) scale(.84)"/>
</svg>

<script>
 jQuery(document).ready(function() {
 var kruznice = document.querySelector(".kruznice")
 , a = 0
 , p = Math.PI
 , t = 2;

(function draw() {
a++;
a %= 360;
var r = ( a * p / 180 )
, x = Math.sin( r ) * 125
, y = Math.cos( r ) * - 125
, mid = ( a > 180 ) ? 1 : 0
, anim = "M 0 0 v -125 A 125 125 1 "
+ mid + " 1 "
+  x  + " "
+  y  + " z";
kruznice.setAttribute( "d", anim );
setTimeout(draw, t); // Redraw
})();});
</script>