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?