Stack Exchange
viewBox directive won't resize my SVG as expected
This SVG is intended to appear in a 30x30 square, and I've gotten it to look right in this code pen:
https://codepen.io/pgblu/pen/RwrYXXm
HTML
<span class="foo">
  <svg height="30" width="30" viewBox="0 0 450 450">
    <g
       id="layer1"
       transform="translate(-2887.5916,-192.36151)"
    >
      <g transform="matrix(1.3580428, 0, 0, 1.3580428, 2065.078, 44.928302)" id="layer2" />
        <path
            transform="matrix(1.1703715, 0, 0, 1.1703715, 1772.3948, -189.9379)"
            d="M 1338.5714, 519.50507 A 192.85715, 192.85715 0 0 1 1145.7142, 712.36221 192.85715, 192.85715 0 0 1 952.85709, 519.50507 192.85715, 192.85715 0 0 1 1145.7142, 326.64792 192.85715, 192.85715 0 0 1 1338.5714, 519.50507 Z"
            id="redCircle001"
            style="fill:#dd0e00;fill-opacity:1;fill-rule:nonzero;stroke:none"
        />
        <g transform="matrix(-3.1435529, 0, 0, -3.1435529, 10926.161, -138.49162)">
          <path
              style="fill:#ffffff"  
              d="m2494.1163, -202.23709 l4, 84.92415 l-25.67715, 0 l4, -84.92415 z"
              id="whiteBeam001"
          />
          <circle
              style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="whiteDot001"
              transform="matrix(0.3181114, 0, 0, 0.3181114, 2440.9065, -251.44719)"
              cx="139.73659"
              cy="101.28652"
              r="36.22654"
          />
        </g>
      </g>
  </svg>
</span>

CSS:
.foo {
  border: 1px solid #ffaa22;
  height: 30px;
  width: 30px;
}

...but I had to trial-and-error the viewBox directive and ended up with "0 0 450 450". I am clearly doing this wrong. Shouldn't the viewBox correspond to the target size, i.e., "0 0 30 30"? Is there something in the SVG code itself that is making the resizing counterintuitive?

Why is it counter-intuitive. You've got a path that starts at M 1338.5714, 519.50507 and then you apply various transforms to it. What is it you're expecting to happen here?

I had assumed that a viewBox of 0 0 30 30 would be the right call, since that is my target size. The SVG code was not built by me.

What you've got is the equivalent of a drawing 30 feet square with a frame that's 30 inches across. Thus plonking your frame on one bit of your canvas won't display much.

OK. Are you saying the SVG code itself needs to be changed in order to reduce its size to the target of 30px square?

That's one way, the other easier way is to use a viewBox to allow a drawing of one size to be displayed in an area of a different size. That's what you've done so what's the problem?

This is how I would do it: 1.I get the bounding box of the layer1: layer1.getBBox(). This is returning an SVGRect with the folowing properties:
height: 451.42901611328125 width: 451.42919921875 x: 2887.591552734375 y: 192.3615264892578 You can delete the transformation of the layer1 and use the following viewBox="x y width height". Alternatively you can keep the transformation and to the x you sum the transformation's x ( 2887.591552734375  -  2887.5916). Do the same for the y
