This is the 15th day of my participation in Gwen Challenge

Sprite figure

A CSS image merging technique that combines a small icon and a background image onto an image and then uses CSS background-position to display the desired part.

svg symbol

The Symbol element is used to define a graphic template object that can be instantiated with an element. The symbol element works with graphics by being used multiple times within the same document, adding structure and semantics. Well-structured documents can be presented more vividly, like speeches or braille, thus improving accessibility. Note that a symbol element itself is not rendered. Only instances of the Symbol element (that is, an element that references symbol) can be rendered.

Why are these two technologies mentioned in the same breath?

They have the same advantages:

  • Reduce the number of requests to the server when loading web images
  • Improve page loading speed

Method of use

sprite


icon {
  background: url(path);
  background-position: 0px 0px;
}

Copy the code

svg symbol

<svg>
<! -- Symbol not displayed -->
<symbol id="sym01" viewBox="0 0 150 110">
  <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/>
  <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
</symbol>

<! -- Only use tag can be displayed -->
<use xlink:href="#sym01"
     x="0" y="0" width="100" height="50"/>
<use xlink:href="#sym01"
     x="0" y="50" width="75" height="38"/>
<use xlink:href="#sym01"
     x="0" y="100" width="50" height="25"/>
</svg>
Copy the code

advantages

  • Vector map, zoom without distortion
  • Referrable images may not be in an SVG file. Any SVG introduced in a web page can be referenced
  • Compared to Sprite, maintainability is good. When adding a new image, there is no need to change the position of the previous image

The problem

  • SVG Use introduces images that are in the Shadow DOM and cannot be styled externally to a single path. So if you don’t have a color, you can only set it to monochrome

conclusion

SVG Symbols are more maintainable than traditional Sprites, with no distortion when scaled. On a Sprite basis, it’s better.