SVG медленная загрузка

Question

Я добавляю SVG на свою веб-страницу динамически, используя пользовательскую функцию:

    function appendSVGImageButton(parent, child, x, y, w, h, colour, svg, target){

        var url = svgURL + svg + '.svg';

        //create holder
        var holderID = child+"_holder";
        var holderDiv = $("<div id='"+holderID+"' class='noselect' style='left:"+x+"px; top:"+y+"px; width:"+w+"px; height:"+h+"px; position:absolute; background-color:"+colour+"; overflow:hidden;'></div>");
        $("#"+parent).append(holderDiv);

        //create svg
        var svgID = child+"_svg";
        var svgObj = $("<object  data='"+url+"' type='image/svg+xml' style='left:0px; top:0px; width:"+w+"px; height:"+h+"px; position:absolute;'></object>");
        $("#"+holderID).append(svgObj);

        //create button
        var buttonID = child+"_button";
        var buttonDiv = $("<div id='"+buttonID+"' class='noselect' style='left:0px; top:0px; width:"+w+"px; height:"+h+"px; position:absolute; cursor: pointer;'></div>");
        $("#"+holderID).append(buttonDiv);
        var div = document.getElementById(buttonID);    
        div.addEventListener('click', target);

    }

Что называется так из моего основного файла:

appendSVGImageButton('productView', 'closeProductView', 19 * bD, 0, bD, bD, 'white', 'closeBig', closeProductView);

Но когда я размещаю разный контент на странице, SVG загружается через секунду после остального контента. Вот пример SVG:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 28.3 28.3" style="enable-background:new 0 0 28.3 28.3;" xml:space="preserve">
    <style type="text/css">
        @import url("http://www.example.com/temp/wp-content/themes/new/style.css");
    </style>
<g id="blue">
    <line class="st6" x1="6.8" y1="21.5" x2="21.5" y2="6.8"/>
</g>
<g id="red">
    <g>
        <line class="st18" x1="21.5" y1="21.5" x2="6.8" y2="6.8"/>
    </g>
</g>
<g id="white_only_in_heart">
</g>
</svg>

Мне интересно, замедляет ли @import бизнес? Первоначально у меня были классы, определенные в тегах стиля, но это было все еще довольно медленно. Есть идеи?

EDIT:

Answer 1

Я не уверен, но вы можете попробовать использовать dataURL.Я удалил стиль импорта из вашего svg и преобразовал его в dataURL:

"data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjguMyAyOC4zIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOC4zIDI4LjM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9ImJsdWUiPgogICAgPGxpbmUgY2xhc3M9InN0NiIgeDE9IjYuOCIgeTE9IjIxLjUiIHgyPSIyMS41IiB5Mj0iNi44Ii8+CjwvZz4KPGcgaWQ9InJlZCI+CiAgICA8Zz4KICAgICAgICA8bGluZSBjbGFzcz0ic3QxOCIgeDE9IjIxLjUiIHkxPSIyMS41IiB4Mj0iNi44IiB5Mj0iNi44Ii8+CiAgICA8L2c+CjwvZz4KPGcgaWQ9IndoaXRlX29ubHlfaW5faGVhcnQiPgo8L2c+Cjwvc3ZnPg=="

Теперь, в месте, где вы делаете:

"<object  data='"+url+"'...

замените url наURL-адрес данных я предоставил.Вам нужно будет загрузить стиль отдельно.Что-нибудь меняет?