I am trying to make the SVG completely fill the containing TD. I don't care about preserving the proportions of the SVG. Instead, I want the height of the SVG to be the same as its width when the height should be larger than the width. There is padding above and below the SVG. Here's the code snippet I currently have:
<html>
<head>
<style>
table {
border-collapse:collapse;
}
.td-svg {
padding: 0px;
display: block;
}
.div-svg {
height: 100%;
display: block;
}
</style>
</head>
<body>
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td class='td-svg'>
<div class='div-svg'>
<svg viewBox='0 0 100 100' preserveAspectRatio="none"></svg></div></td>
<td>col 2</td>
<td>col 3<br/>continued<br/>continued<br/>continued<br/>continued</td>
</tr>
</table>
</body>
</html>Based on my observations, it seems like the browser is adjusting the size of the SVG based on the viewBox dimensions. Currently, with the code above, the SVG element is 70x70. If I change the viewBox to viewBox='0 0 100 50', the SVG element becomes 70x35. The TD has dimensions of 70x92, so ideally, I want the SVG to also be 70x92.
Interestingly, the positioning of the SVG appears differently in the code snippet output compared to when you actually run the code from a separate file.