如何在SVG中有效地将矩阵数据渲染为热图？

Question

我有一个数据矩阵（96cols乘以> 5000rows），其中每个值介于-1和+1之间。我编写了一个脚本来生成SVG格式的热图，但是我的真实数据集的SVG文件大小变得庞大。 Inkscape挣扎，渲染和屏幕更新真的很慢。将其压缩为svgz也无济于事。

我采用了为每个值绘制矩形的方法，每个矩形有5个属性：x，y，width，height和fill。你可以想象，对于96x5000的值，这是很多。通过将每个属性转换为整数，我将文件大小从~34MB减少到~29MB。我的另一个想法是删除fill属性并将其替换为10-20类之一，每个颜色组一个。我还没有完成最后一点，因为我认为必须有一个更好的方法。

举个例子： -

    <rect fill="#000000" height="14" width="10" x="50" y="81" />

在HTML中，我使用<table>，其中<tr's>和<th's>的短名称或ID引用了颜色组。如果值为0或中间值，则不需要类名，<th>可以继承预设的中性色。

虽然使用SVG，显然没有正式的表规范，所以我应该怎么做呢？ 我目前正在考虑以下选项： -

1. display property确实有一个（记录不完整的）内联表选项。显然，它可能是"an accidental remnant from CSS"。我想这意味着每行都有一个<g>，其ID引用了display:table-row-group的样式。
2. 使用<text>元素作为行，使用嵌套<tspan> s，如建议的here。
3. 使用ECMASCript中的layout manager。

我还简要地检查了XSLT，它看起来很强大但很复杂，而且看起来它只能在网络浏览器中使用。理想情况下，我希望将所有内容保存在一个可以在矢量图形编辑器中保存，查看和编辑的文件中，并且不确定XSLT是否允许这样做。

这样做最有效的方法是什么？ Filesize并不像它呈现的速度那么重要。任何帮助非常感谢。

更新： -

• 2不能用作文本​​，而嵌套的tspan没有填充或背景颜色属性。该示例使用rect来提供背景颜色，因为text和tspan不提供任何创建填充的方法。

我还想知道行长度是否与缓慢渲染有关。我正在使用Python的(c)ElementTree module生成SVG，默认情况下它会写入所有XML而没有单个换行符。它可以帮助解析器/渲染器将每个图像的行分成XML中的新行吗？

Answer 1

我怀疑你最好使用帆布。创建一个画布，然后在画布上绘制矩形。矩形将仅作为画布位图的一部分存在。