How to resize SVG icons via <use> elements such as images

Question

In my HTML document I have a which contains many items with id attributes, such as icon-x.

Then I want to reuse these icons like

<div class=container>
  <svg><use xlink:href=#icon-x /></svg>
</div>

However, the icons in this example may have different sizes in the source SVG. I want them to fit into the div.container, but have white space around the svg in the container.

How can I tell it that I point to something and know that that thing defines the size of so that when I do CSS like . container svg { width: 100%; height: auto;} Does it work the same as the tag?

Answer 1

1. icon-x Must be a symbol or nested svg

   with a viewBox attribute

2. When using icon-x, you can specify the width and height for the element. You can also specify different positions (x and y attributes) or different padding for .

In the next example, I use . You can optionally use nested svg's. In this case you might want to put it in

svg{
border:solid;
width:90vh;
}

<svg viewBox="0 0 240 240">
<symbol  id="icon-x"  viewBox="0 0 24 24">
   <path d="M21 16v-2l-8-5v-5.5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v5.5l-8 5v2l8-2.5v5.5l-2 1.5v1.5l3.5-1 3.5 1v-1.5l-2-1.5v-5.5l8 2.5z"></path>
</symbol>
  <use xlink:href="#icon-x" x="10" y="10" width="150" height="150"/>
  <use xlink:href="#icon-x" x="120" y="120" width="50" height="50" fill="blue"/>
</svg>