<!--Scalable Vector Graphic-->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="960px"
height="560px"
viewBox="0 0 960px 560px">
<title>SVG Table</title>
<g id='columnGroup'>
<rect x='65' y='10' width='75' height='110' fill='gainsboro'/>
<rect x='265' y='10' width='75' height='110' fill='gainsboro'/>
<text x='30' y='30' font-size='18px' font-weight='bold' fill='crimson'>
<tspan x='30' dy='1.5em'>Q1</tspan>
<tspan x='30' dy='1em'>Q2</tspan>
<tspan x='30' dy='1em'>Q3</tspan>
<tspan x='30' dy='1em'>Q4</tspan>
</text>
<text x='100' y='30' font-size='18px' text-anchor='middle'>
<tspan x='100' font-weight='bold' fill='crimson'>Sales</tspan>
<tspan x='100' dy='1.5em'>$ 223</tspan>
<tspan x='100' dy='1em'>$ 183</tspan>
<tspan x='100' dy='1em'>$ 277</tspan>
<tspan x='100' dy='1em'>$ 402</tspan>
</text>
<text x='200' y='30' font-size='18px' text-anchor='middle'>
<tspan x='200' font-weight='bold' fill='crimson'>Expenses</tspan>
<tspan x='200' dy='1.5em'>$ 195</tspan>
<tspan x='200' dy='1em'>$ 70</tspan>
<tspan x='200' dy='1em'>$ 88</tspan>
<tspan x='200' dy='1em'>$ 133</tspan>
</text>
<text x='300' y='30' font-size='18px' text-anchor='middle'>
<tspan x='300' font-weight='bold' fill='crimson'>Net</tspan>
<tspan x='300' dy='1.5em'>$ 28</tspan>
<tspan x='300' dy='1em'>$ 113</tspan>
<tspan x='300' dy='1em'>$ 189</tspan>
<tspan x='300' dy='1em'>$ 269</tspan>
</text>
</g>
</svg>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>svg table </title>
<style type="text/css">
/*<![CDATA[*/
.A4
{
width: 21cm;
height: 29.7cm;
}
/*]]>*/
</style>
</head>
<body>
<div id="positionRoot" style="position: relative;">
<div id="sizerForTable" style="position: absolute; display: block; top: 2.5cm; left: 5cm; width: 2.5cm; height: 2.5cm; background-color: hotpink;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" preserveAspectRatio="xMinYMin meet" width="100%" height="100%" >
<rect id="rectBG" x="0" y="0" width="0" height="0" fill="#FF0000" />
<foreignObject id="foTableContainer" x="0" y="0" width="100%" height="100%">
<body xmlns="http://www.w3.org/1999/xhtml">
<!--
<style type="text/css">
/*<![CDATA[*/
.testTableLayout
{
font-size: 5px;
line-height: 1em;
}
/*]]>*/
</style>
-->
<!-- also: Tabelle ausmessen - dies in Viewbox - dann verkleiners sich automatisch -->
<table id="tblTest" class="testTableLayout" style="border-collapse: collapse; border: none;" cellpadding="0" cellspacing="0">
<tr style="background-color: orange;">
<td>Row1</td>
<td>C1.2</td>
<td>Test<br />Me<br />More</td>
</tr>
<tr>
<td>Row2</td>
<td>C2.2</td>
<td>Test<!-- Me More--></td>
</tr>
<tr>
<td>Row3</td>
<td>C3.2</td>
<td>Test</td>
</tr>
<tr>
<td>Row4</td>
<td>C4.2</td>
<td>Test</td>
</tr>
<tr>
<td>Row5</td>
<td>C5.2</td>
<td>Test</td>
</tr>
<!--
-->
</table>
<script type="text/javascript">
//<![CDATA[
(function () {
var tbl = document.getElementById("tblTest");
var bg = document.getElementById("rectBG");
var nvb = ["0", "0", Math.ceil(tbl.offsetWidth).toString(), Math.ceil(tbl.offsetHeight).toString()];
bg.setAttribute("width", nvb[2]);
bg.setAttribute("height", nvb[3]);
document.getElementById("foTableContainer").ownerSVGElement.setAttribute("viewBox", nvb.join(" ") );
// console.log("newViewBox:", nvb);
// console.log("w,h:", tbl.offsetWidth, tbl.offsetHeight);
// console.log(document.getElementById("foTableContainer").ownerSVGElement.getAttribute("viewBox"));
})();
//]]>
</script>
</body>
</foreignObject>
</svg>
</div>
</div>
</body>
</html>
https://stackoverflow.com/questions/6987005/create-a-table-in-svg/6996853#6996853
https://topherrhodes.com/svg-table/
https://github.com/cocuh/SVG-Table