SVG USE Tage

by bakhshi

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<svg style='display:none'>
    <defs>
        <svg id="main" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="svg3848" version="1.1" inkscape:version="0.48.4 r9939" sodipodi:docname="New document 10" viewBox="0 0 175 175">
            <defs id="defs3850" />
            <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.35" inkscape:cx="87.569643" inkscape:cy="87.161724" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" inkscape:window-width="1920" inkscape:window-height="1018" inkscape:window-x="1912" inkscape:window-y="-8" inkscape:window-maximized="1" />
            <metadata id="metadata3853">
                <rdf:RDF>
                    <cc:Work rdf:about="">
                        <dc:format>image/svg+xml</dc:format>
                        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
                        <dc:title></dc:title>
                    </cc:Work>
                </rdf:RDF>
            </metadata>
            <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(-287.43036,-445.18034)">
                <path style="fill:#00a2d5;fill-opacity:1;stroke:#00a2d5;stroke-width:1.30795193;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" d="m 357.17828,617.23232 c -33.4561,-7.34228 -59.6327,-33.13599 -67.2813,-66.29732 -2.5756,-11.16688 -2.3651,-28.49404 0.4786,-39.39595 1.1594,-4.44467...

CSS

.icon {
    width:25px;
    height:25px;
    display:inline-block;
}
#main {
    width:50px;
    height:50px;
}
.icon svg {
    width:25px;
    height:25px;
}

JavaScript

for (var index = 0; index < 1000; index++) {
     $(document.body).append($("<div class='icon'><svg><use xlink:href='#main' width='25' height='25'></use></svg></div>"))
 }