Sprite in SVG for Internet explorer

Question

Sprite in SVG for Internet explorer

Navigation

#1 by (1 votes)

2

I read an article that explained how to put multiple SVG images into a single file. The final file looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<g id="imagemA" viewBox="0 0 65.1 36.7">
    <...>
</g>
<g id="imagemB" viewBox="0 0 65.1 36.7">
    <...>
</g>

and the images were referenced in HTML as follows:

<img src="imagens.svg#imagemA"/>
<img src="imagens.svg#imagemB"/>

But that does not work on our beloved Internet Explorer.

What is the best way to create a sprite of SVGs that works across all browsers?

html5 css3 svg

asked by anonymous 09.07.2018 / 20:28

1 answer

Extract private key from file with extension .DER Download multiple files

score 1 · Accepted Answer

I do not think it's exactly the "best" way. But tb I do not know another rss. This is just an option that can sometimes help you at some point. And it works in IE!

The idea here is to put all the figures inside a single SVG in the form of symbols , and put ID for each of those symbols . Then you use <use> to call these ID by href="" (xlink: href is to work in Safari tb).

The drawback of this technique is that the <svg> tag with all symbols needs to be inside your file ... you can not call a .svg and use the IDs. It is as if you are calling only a "parts" of a single SVG with which it contains several other "svgs" inside it. The advantage is that you do not have to keep repeating the entire svg each time you repeat a picture. Also, it is already inside your document and will not require a request on the server.

As I said it is not quite a spreit , it would be more of an sprite-indoor within the document itself.

svg {
    width: 100px;
    height: 100px;
}

<svg><use xlink:href="#app" href="#app"></use></svg>
<svg><use xlink:href="#face" href="#face"></use></svg>
<svg><use xlink:href="#you" href="#you"></use></svg>
<!-- links que invocam os simbolos -->


<!-- svg com todos os simbolos dentro -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <symbol id="app" x="0px" y="0px" viewBox="0 0 512 512" >
        <g>
            <path  d="M256.064,0h-0.128C114.784,0,0,114.816,0,256c0,56,18.048,107.904,48.736,150.048l-31.904,95.104l98.4-31.456
                C155.712,496.512,204,512,256.064,512C397.216,512,512,397.152,512,256S397.216,0,256.064,0z M405.024,361.504
                c-6.176,17.44-30.688,31.904-50.24,36.128c-13.376,2.848-30.848,5.12-89.664-19.264C189.888,347.2,141.44,270.752,137.664,265.792
                c-3.616-4.96-30.4-40.48-30.4-77.216s18.656-54.624,26.176-62.304c6.176-6.304,16.384-9.184,26.176-9.184
                c3.168,0,6.016,0.16,8.576,0.288c7.52,0.32,11.296,0.768,16.256,12.64c6.176,14.88,21.216,51.616,23.008,55.392
                c1.824,3.776,3.648,8.896,1.088,13.856c-2.4,5.12-4.512,7.392-8.288,11.744c-3.776,4.352-7.36,7.68-11.136,12.352
                c-3.456,4.064-7.36,8.416-3.008,15.936c4.352,7.36,19.392,31.904,41.536,51.616c28.576,25.44,51.744,33.568,60.032,37.024
                c6.176,2.56,13.536,1.952,18.048-2.848c5.728-6.176,12.8-16.416,20-26.496c5.12-7.232,11.584-8.128,18.368-5.568
                c6.912,2.4,43.488,20.48,51.008,24.224c7.52,3.776,12.48,5.568,14.304,8.736C411.2,329.152,411.2,344.032,405.024,361.504z"/>
        </g>
    </symbol>
    <symbol id="face" x="0px" y="0px" viewBox="0 0 512 512" >
        <g>
            <path d="M448,0H64C28.704,0,0,28.704,0,64v384c0,35.296,28.704,64,64,64h192V336h-64v-80h64v-64c0-53.024,42.976-96,96-96h64v80
            h-32c-17.664,0-32-1.664-32,16v64h80l-32,80h-48v176h96c35.296,0,64-28.704,64-64V64C512,28.704,483.296,0,448,0z"/>    
        </g>
    </symbol>
    <symbol id="you" x="0px" y="0px" viewBox="0 0 512 512" >
        <g>
            <path d="M490.24,113.92c-13.888-24.704-28.96-29.248-59.648-30.976C399.936,80.864,322.848,80,256.064,80
                c-66.912,0-144.032,0.864-174.656,2.912c-30.624,1.76-45.728,6.272-59.744,31.008C7.36,138.592,0,181.088,0,255.904
                C0,255.968,0,256,0,256c0,0.064,0,0.096,0,0.096v0.064c0,74.496,7.36,117.312,21.664,141.728
                c14.016,24.704,29.088,29.184,59.712,31.264C112.032,430.944,189.152,432,256.064,432c66.784,0,143.872-1.056,174.56-2.816
                c30.688-2.08,45.76-6.56,59.648-31.264C504.704,373.504,512,330.688,512,256.192c0,0,0-0.096,0-0.16c0,0,0-0.064,0-0.096
                C512,181.088,504.704,138.592,490.24,113.92z M192,352V160l160,96L192,352z"/>
        </g>
    </symbol>
</svg>