Sprite in SVG for Internet explorer

Asked

Viewed 71 times

2

I read an article that explained how to put several SVG images in a single file. The final file looked 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 it doesn’t work in our beloved Internet Explorer.

What is the best way to create an Svg Archive that works in all browsers?

html5 css3 svg

1 answer

1


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

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

The drawback of this technique is that the tag <svg> with all the symbols need to be inside your file... there’s no way to call a .svg and use the Ids. It’s like you’re calling just one "part" of a single SVG with which it contains several other "svgs" within it. The advantage is that you don’t have to keep repeating the whole svg every time you repeat a picture. Also, it is already inside your document and will not need server request.

Like I said, it’s not really a spreit, would be one more 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>

  • This is a great solution, however I would like it to be uploaded from an external file. I have almost 30 SVG logos, and not all of them will be used on every page. I don’t see how it’s a good practice to return all the images every time

  • @Pilati in this case is not the indicated even no. You have to assess whether the audience for which the project is intended really uses the IE to access. If the IE is not used by those who will use the system think if it is not worth continuing with the option you already have. The fact is that importing an external image.svg file your options to customize it are very limited, when you call an image.svg by src="" even its color you cannot change... Maybe with JS and working on viewBox you can get this Sprite with a file . svg which is indexed in the document

  • Is it possible to make a Sprite in SVG the way it is done in JPG or PNG files? Type, place multiple images in different positions and set position and size by CSS by property background-image

  • @It is possible yes, I just do not know the best way to do, because you need to change the values of Viewbox. The viewbox has 4 values, like viewBox="0 0 512 512" the last two values are like the size of "canvas" (like a window where only you are framed in it), but the content that is inside this "canvas" can be much larger than what is visible on the screen. Thus working the first two values of viewBox="X Y 0 0" vc against the X axis / Y of the content that is within the "canvas" showing only the part that interests you, as in the traditional Sprit.

  • @Pilati however this also has limitations because you cannot change the viewbox values after you have indexed the.svg image in the document. You can only change it directly inside the . svg file or if you put the inline svg inside the document. If you want and it’s in your best interest create a New Question about that I can give you some details.

  • Question created: https://answall.com/questions/313390/sprite-em-svg-usando-o-background-image

Show 1 more comment

Browser other questions tagged html5 css3 svg

You are not signed in. Login or sign up in order to post.