6

I use the code below to have SVG embedded in HTML5. The only problem now I cannot solve is that there is much space between the <svg> and the <td> when the HTML file is viewed in a browser. Can someone tell me how to remove the space?

Thank you in advance!

More details:

Sorry, I forgot to say which browser I use. I find that when I use IE9, there is much space between the SVG and the left and right bar. However, when I use Chrome, there is much space between the SVG and the top and bottom bar. It is quite strange.

I edit the code below. I add svg {margin-top:0px; margin-bottom:0px; margin-right:0px; margin-left:0px;background-color:yellow;}

in the code. What I want to do is to remove the yellow space. Now the question becomes more specific.

<!DOCTYPE html><html>
<head>

<title>SarShips: scs</title>
<style type="text/css">

table 
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}

table {margin-left:auto;margin-right:auto}
tr.odd {background-color:#E0E0F0}
tr.even {background-color:#F0F0FF}
th {font:22px sans-serif;background-color:#98AFC7;color:white;padding:6px}
td.e {font:bold 15px serif;text-align:right;padding:4px}
td.v {font:15px monospace;text-align:left;padding:4px}
td.i {padding:4px}
p {text-align:center}
      svg {margin-top:0px;
           margin-bottom:0px;
           margin-right:0px;
           margin-left:0px;background-color:yellow;}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Parameters</th><th>Imagette</th><th>Profile</th><th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td>

</td><td class="i"></td>

<td class="i">
<svg width="100%" height="100%" viewBox="0 0 400 400" >
<g>
<rect width="400" height="400" style="stroke-width:1;          stroke:rgb(0,0,0)"></rect>
<circle cx="200" cy="200" r="200" stroke="green" stroke-width="2"></circle>
<circle cx="200" cy="200" r="160" stroke="green" stroke-width="2"></circle>
<circle cx="200" cy="200" r="120" stroke="green" stroke-width="2"></circle>
<circle cx="200" cy="200" r="80" stroke="green" stroke-width="2"></circle>
<circle cx="200" cy="200" r="40" stroke="green" stroke-width="2"></circle>
<path d="M250 150 L150 350 L350 350 Z" style="fill:rgb(0,0,255);stroke-width:1;          stroke:rgb(0,0,0)"></path>
<path d="M200,200 L200,0 A200 200 0 0 1 200 400 Z" style="fill:green;stroke:green;stroke-width:5;          fill-opacity:0.5;stroke-opacity:0.9"></path>
<path d="M150 250 S150 150 170 170 L220 150Z" style="fill:pink;stroke:blue;stroke-width:1;          fill-opacity:0.9;stroke-opacity:0.9"></path>
</g>
</svg>
</td><td></td>
</tr>

</tbody>
</table>
</body>
</html>
user811416
  • 205
  • 1
  • 2
  • 11

4 Answers4

26

SVG is inline and inside of a table cell, so try adding display:block to svg and width/height to the <td> so that SVG knows what to calculate percentage from.

Spadar Shut
  • 15,111
  • 5
  • 47
  • 54
2

I change

svg {margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;background-color:yellow;}

to be

svg {margin-top:0px;
margin-bottom:0px;
margin-right:-150px;
margin-left:0px;background-color:yellow;}

Then the yellow space disappears in IE9. This solution does not work in Chrome...

user811416
  • 205
  • 1
  • 2
  • 11
1

I assume that you mean the space below the SVG image because otherwise it is just the 4px you wanted. The space below comes from the whitespace that the table cell contains in addition to your image. You can easily "fix" this by changing text height:

td.i {padding:4px;line-height:0px;}
Wladimir Palant
  • 56,865
  • 12
  • 98
  • 126
  • Hi Palant, I try your code in Chrome, but it does not work. I think the reason may be that "line-height" is not supported in html5. – user811416 Jul 01 '11 at 02:56
  • 1
    @user811416: No, that's because you set `width`/`height` of your SVG image to `100%` - of what actually? If you set a fixed size for your SVG image or if you define a size for the table cell containing it everything will work correctly. Btw, it wouldn't hurt if you started answering questions - I don't like guessing which browser you are using and which problem you mean. – Wladimir Palant Jul 01 '11 at 06:08
  • @user811416 You could also fix it by making `svg` a block level element. Also, Wladimir is correct - one of the defining features of tables is that they expand automatically to contain their content, if you want to use `100%` to size your image, you've got to have a definite size container for your image to go into for the `100%` to mean anything. – robertc Jul 01 '11 at 11:16
  • Hi Wladimir, I modified my question the first sight I saw your answer. – user811416 Jul 04 '11 at 08:07
  • Hi robertc, you are right. I change the height and width to be specified values, yellow space disappears. It is quite different from what I saw when I set height and width to be specified values four days ago. At that time, only part of the svg could be shown. Anyway, the problem is solved. Thank you both. – user811416 Jul 04 '11 at 08:11
1

This looks to be the issue with webkit's default SVG size of 350px by 150px.

This is probably my favorite article about it yet: http://henkelmann.eu/2010/12/16/display_svg_image_same_size_in_decent_browsers

So, the problem is that you need to either set a rigid pixel size for your svg, or set a rigid size of your container. I haven't found a way to allow for dynamic scaling (unless you do it in javascript, which a solution can be found in the comments here: How do I scale a stubborn SVG embedded with the <object> tag?).

Community
  • 1
  • 1
Michael Delaney
  • 123
  • 2
  • 9