Sizing SVG in HTML

[Tom]

Is there any way to show a SVG in a HTML in different sizes by changing
the
width and height attributes of the object/embed tag?

Assume a simple SVG like

<svg width="100" height="100">
<rect x="0" y="0" width="100" height="100"
style="fill:none;stroke:black"/>
<svg>

which is embeded in a HTML page like

<object type="image/svg+xml" data="simple.svg"
width="100" height="100">
<embed type="image/svg+xml" src="simple.svg"
width="100" height="100"></embed>
</object>

the SVG is always shown at size 100x100 no matter what I provide for
HTML width and height. Is there anything I can put into my SVG to make
it custom sizable?
I know I could write
<svg width="100%" height="100%">
<rect x="0%" y="0%" width="100%" height="100%"
style="fill:none;stroke:black"/>
<svg>
But that is not ok for me, except for the initial SVG width and height
attributes.

__
Tom

 

[Joris Gillis]

Hi,

Is there any way to show a SVG in a HTML in different sizes by changing
the
width and height attributes of the object/embed tag?

I'm not an expert on the topic of SVG, but I'll try to help.

Instead of specifying the width and height on the svg element, specify the viewBox:

<svg viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100"
style="fill:none;stroke:black"/>
<svg>

Now you should be able to scale it via HTML syntax.

regards,

 

[Tom]

Yes! Thank you.