Scaling SVG to fit in html tables

[nscharfe]

I am embedding varous SVG files into an html table using an  tag. I am unable to scale the images appropriately so that they fit exactly in the <td> tag that the  tag is in. I was thinking of setting the width and height of the embed to 100%, but that doesn't seem to work.

Any help on this topic is greatly appreciated.

[Chris Lilley]

On Tuesday, July 25, 2006, 1:50:26 AM, nscharfe wrote:


nsbNc> I am embedding varous SVG files into an html table using an <embed> tag. I am
nsbNc> unable to scale the images appropriately so that they fit exactly in the
nsbNc> <td> tag that the <embed> tag is in. I was thinking of setting the width and
nsbNc> height of the embed to 100%, but that doesn't seem to work.

nsbNc> Any help on this topic is greatly appreciated.

The SVG will scale itself to fit in whatever space the HTML (well,the CSS) tells it to. Normally it will preserve the aspect ratio, as well; if you don't want that, set preserveAspectRatio="none".

Assuming that you also have width="100%" height="100%" and a viewBox, you are all set on the SVG side.

For the HTML/CSS side, I suggest asking on www-style@.... However, the relative widths of the columns needs to be set *somewhere* so I suggest looking at table-layout: fixed
http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout


--
 Chris Lilley                    mailto:chris@...
 Interaction Domain Leader
 Co-Chair, W3C SVG Working Group
 W3C Graphics Activity Lead
 Co-Chair, W3C Hypertext CG

[nscharfe]

I am still a little bit unclear of exactly what needs to be done. I think everything is good to go on the html/css side, and I have set a viewbox etc on the svg side and it is not working how I would expect.   I have put up a sample of what I am doing at:

www.stanford.edu/~nscharfe/test.html

I will be programmatically generating the svg files and I need them to all be scaled to fit in the size of the <td> it is in.  In the example I posted, I fiddled w/ the viewbox to get it to fit into the <td>. However, the svg files  will be of arbitrary size and so the settings I have used will not work for all svgs.  Are there viewbox settings that I can use that will work for any arbitrary svg?

I hope this all makes sense and I really appreciate any help you can offer.

thanks,
nate