1

I want to use SVG objects along my application HTML code using syntax:

<svg viewBox="0 0 100 100" class="icon shape-cart" style="width: 100px;height: 100px;">
    <use xlink:href="#shape-cart"></use>
</svg>

Accoring to this article http://css-tricks.com/svg-sprites-use-better-icon-fonts/

to use svg in such a way one need to inject the SVG data into HTML body.

So my question is what is the best way to perform such injection while runtime? (not inject in HTML on server)

is embeds svg in separate document, so you can not access it and use using

My current solution using jquery:

$.ajax('/assets/icons.svg.txt').then(function(svgData){
    $(function(){
        $('body').prepend($(svgData).css('display', 'none'))
    })    
})

It uses text version of the svg file (just addes .txt extension to svg file), because otherwise *.svg will be loaded by juery and converted to HTML document element. Css display none is set to make element not mess with the DOM.

Maybe there is more standard way to accomplish this task?

WHITECOLOR
  • 24,996
  • 37
  • 121
  • 181
  • possible duplicate of [jquery's append not working with svg element?](http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element) – CBroe May 05 '14 at 17:24
  • No, the question has a little in common with proposed "duplicate". In my situation everything works, I'm asking to assess the solution. – WHITECOLOR May 05 '14 at 17:31

0 Answers0