Thanks for replying.
It seems my setup is a little confusing and this is the first time I have looked at <svg>. Basically the red box must be 30% width and the height should not be set so it just wraps around the contents.
The settings on the SVG are not set in stone. For the example, I really just want this part:
<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1"></polygon>
...to be displayed central in the red box.
The idea is to understand how all this works so I can display any <svg> code, but doing so inside the 30% red box div doesn't seem easy.
So, really I want this:
...but instead of using the <img> tag to display the bitmap I want to display the green shape with <svg>.
If my view box is smaller than the SVG image itself then this is just from my poor attempt to get this working.
Hope this helps. Thanks for helping.