SVG Icon Sprite - Web Component

Scaling and sizing recommendations

• in order to display the icon in original size, match the [width] and [height] with the ones of the SVG source file
• in order to scale the SVG up or down, the best approach is to wrap the SVG into a div and size it using CSS transforms, i.e. transform: scale(0.5);

Scaling (using viewBox)

Scaling via viewBox is not consistent across browsers. The pattern depends on your SVG source file, whether it already contains a viewBox or not. The following example SVGs with an original size of 100x100px are scaled down by 50%.

<!-- SVG source lacks a viewBox -->
<svg-icon
    src="assets/sprites/sprite.svg#star_100x100"
    width="100px"
    viewBox="-50 -50 200 200">
</svg-icon>

<!-- SVG source contains a viewBox -->
<svg-icon
    src="assets/sprites/sprite.svg#star_100x100_viewbox"
    width="50px"
    viewBox="0 0 100 100">
</svg-icon>