Connecting Tech Pros Worldwide Forums | Help | Site Map

Sizing SVG in HTML

Tom
Guest
 
Posts: n/a
#1: Sep 9 '05
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
Guest
 
Posts: n/a
#2: Sep 9 '05

re: Sizing SVG in HTML


Hi,

Tempore 14:06:28, die Friday 09 September 2005 AD, hinc in foro {comp.text.xml} scripsit Tom <bauer@b3s.de>:
[color=blue]
> 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?[/color]

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,
--
Joris Gillis (http://users.telenet.be/root-jg/me.html)
Deserta faciunt et innovationem appelant
Tom
Guest
 
Posts: n/a
#3: Sep 9 '05

re: Sizing SVG in HTML


Yes! Thank you.

Closed Thread


Similar .NET Framework bytes