Scaling SVG when symbols have set size and relative position-CodePudding

I have been stuck on this for a couple of days so I thought I would reach out and see if anyone has run into something similar. I am trying to combine multiple symbols into one SVG file. I was able to combine the symbols on the file and the figure looks exactly how I want it. The issue is that the resulting SVG does not not automatically resize. This is due to the fact that the symbols have a set width and height. If I remove the width and height on the symbols, they resize but I loose the positioning and sizing ratio that I want. Setting a Width or Height on the SVG does not affect the size of the symbols.

I would like to be able to set the width and height of the SVG and that it results in the symbols being resized accordingly, keeping the relative position. The same effect you get if you zoom in on the image in the browser. The symbols I am working with are a bit too complex to use as an example but here is a really basic example of the same issue. The resulting image does not resize to the 100% width set in the SVG. Any help is appreciated.

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%">
      <symbol id="svg23" viewBox="0 0 20 20" height="50" width="50" >
        <rect width="20" height="20" />
      </symbol>
      <symbol id="svg20" viewBox="0 0 30 30" height="50" width="50" >
        <rect width="30" height="30" />
      </symbol>
      <use href="#svg23" />
      <use href="#svg20" x="100" y="0" />
</svg>

CodePudding user response：

It would make sense to use viewBox to control the relative position inside the SVG. An then you can set the width of the SVG to something specific or just leave it out if it should fill the 100%.

<p>Width of 100%:</p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 50">
      <symbol id="svg23" viewBox="0 0 20 20" height="50" width="50" >
        <rect width="20" height="20" />
      </symbol>
      <symbol id="svg20" viewBox="0 0 30 30" height="50" width="50" >
        <rect width="30" height="30" />
      </symbol>
      <use href="#svg23" />
      <use href="#svg20" x="100" y="0" />
</svg>
<p>Smaller (width of 200 px):</p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" viewBox="0 0 500 50">
      <symbol id="svg23" viewBox="0 0 20 20" height="50" width="50" >
        <rect width="20" height="20" />
      </symbol>
      <symbol id="svg20" viewBox="0 0 30 30" height="50" width="50" >
        <rect width="30" height="30" />
      </symbol>
      <use href="#svg23" />
      <use href="#svg20" x="100" y="0" />
</svg>