Make embedded SVG scale to fit parent container

Question

I want to compose my first SVG figure and embed it in HTML. It's easy if I resize my HTML container to fit the hard-coded SVG size—otherwise bad things happen:

figure {
  background-color: gray;
  padding: 10px;
  width: 250px;
  height: 100px;
}
figure svg {
  background-color: pink;
}
figure svg circle {
  fill: salmon;
}
figure svg text {
  fill: yellow;
}

<figure>
  <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
    width="50mm" height="50mm"
  >
    <circle cx="25mm" cy="25mm" r="25mm" />
    <text x="25mm" y="33mm" font-size="25mm" text-anchor="middle">SVG</text>
  </svg>
</figure>

<figure>Hello, World!</figure>

Being scalable is the killer feature of the format but I can't make it work or even understand how it works. I'm completely confused with the basic concepts of viewport, coordinates, sizes, user units... and the articles I've read haven't helped (many suggest you even need CSS hacks).

Is it possible to fix my code so the <svn> items expands or shrinks automatically to fit the dimensions of the <figure> they're wrapped in? Or do I need to use JavaScript to change width and height dynamically?

Answer 1

Just like is the case for any other HTML/CSS issue, if you want a child to fit to its parent, you gotta use relative units.

In your SVG inline styles, you had the widths set in mm, which are absolute units. Instead, use relative units like percentages or vw/vh units.

In the example below, I've set the svg inline to width="100%" height="100%". Then, in the CSS for yourfigure, set its width and height. I picked50vw` for both, since the SVG is supposed to be a square.

In the <circle> part of the svg, we set its cx and cy values to 50% to center it within the svg. Its radius will naturally be 50% of its width, by definition, so we just go ahead and set r="50%" too.

I centered the <text> in percentages similarly, and then used relative units for the font-size, so the text will scale up or down as the svg changes sizes.

Try resizing your browser window with the below snippet at full screen to see it in action. Also try changing the value of the container figure's width and height to see how that affects the SVG.

Note that I went ahead and assigned an ID to the figure with the SVG in it, so that the second figure wouldn't be affected.

figure {
  background-color: gray;
  padding: 10px;
}
#svg-container {
  width: 50vw;
  height: 50vw;
}
figure svg {
  background-color: pink;
}
figure svg circle {
  fill: salmon;
}
figure svg text {
  fill: yellow;
  
}

<figure id="svg-container">
  <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
    width="100%" height="100%">
    <circle cx="50%" cy="50%" r="50%" />
    <text x="50%" y="60%" font-size="20vw" text-anchor="middle">SVG</text>
  </svg>
</figure>

<figure>Hello, World!</figure>