How to Use Svg Sprite Sheet as CSS Background-Image While Maintaining Aspect Ratio and Scalability

How to use SVG Sprite Sheet as CSS background-image while maintaining aspect ratio and scalability

Basically, I want to know if there's an easier way to define the cells in the spritesheet and simplify the CSS I use to tell each div which icon to display from the spritesheet.

No, you can't do it easier.

Try this article

Then, there's the problem of scaling. With this setup, the SVG scales to the appropriate size to be drawn on-screen, but if I decide to zoom using my browser's zoom, it pixelates. This is not how SVG is supposed to work.

In Chromium 18 it looks pretty fine - no pixelations at all.

In my test browsers list (FF3.6 Opera 9.2 IE6) I didn't see what I saw in Chromium

And about IE9, maybe problem in engine

Inline Svg in css background property doesn't work on Edge properly

Same problem on EDGE 44: Edge does not seem to properly integrate Sprites. But it works very well in SVG inline.
See the CAN IUSE note: "IE9-11 desktop & mobile do not properly scale SVG files." Adding height, width, viewBox, and CSS rules seem to be the best workaround. " To test can be?
If not a project here: A project on Github
but i have not tested ps. I dropped the sprites and placed inlines elements.

<svg
    width="54"
    height="54"
    viewBox="0 0 54 54"
    fill="none"
    xmlns="http://www.w3.org/2000/svg">
 <path
    d="M18.6667 34.1429V52H2V19.8571L27 219.8571V52H35.3333V34.1429H18.6667Z"
    stroke="white"
    stroke-width="2"

    stroke-linecap="round"
     stroke-linejoin="round"/>
 </svg>

Scaling an SVG While Preserving its Aspect Ratio

Set overflow: unset;. The browser's user agent is settings it's own default.

svg:not(:root) {
    overflow: hidden;
}

.icon {
  display: block;
  width: 6em;
  overflow: unset;
}

<svg class="icon" viewBox="0 0 448 512" fill="red">
  <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>

Scale SVG to fill 90% of available space (while maintaining aspect ratio)

You'll need to add a viewBox to the SVG to determine the SVG viewport.

Whilst the width and height attributes help with keeping the aspect ratio, viewBox helps with scaling the SVG contents correctly.

<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none"></path>
  <path d="M3 5v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5a2 2 0 0 0-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"></path>
</svg>

SVG Spritesheets using SYMBOL CSS SVG Fragment in CSS as background: url or similar? if not why?

This seems to works great. Using 'name' as example to follow.

Wrap <path>(s) & </path> within <symbol> </symbol> I did not use <g>

Add id="name" to <symbol> e.g. <symbol id="name">

Outside the symbol tags, add a <view> and a <use>. The URL, where the complete file is uploaded to, and view ID will become your SVG Fragment.

<view id="icon-name-view" viewBox="0 1240 16 16" />
<use xlink:href="#icon-name" width="16" height="16" x="0" y="1240" id="name"></use>

Change the viewbox to locate the SVG in the spritesheet, here I'd used Y axis, this particular SVG is located at Y axis 1240. Save the SVG Spritesheet to say, svg-defs.svg.

In your CSS use the SVG spritesheet URL with the Fragment Ident e.g.

background: url(https://example.com/svg/svg-defs.svg#icon-name-view) no-repeat;

To change colours I was using filter, e.g.

filter: invert(80%) sepia(21%) saturate(872%) hue-rotate(44deg) brightness(84%) contrast(91%);

Positioning can be done with the ViewBox's but I also used transform, translate.

transform: translateY (10px);

Hope you find this useful, I hope to write a complete guide and will link it when I do. Thank you.

---

Related Topics