各値が -1 から +1 の間にあるデータのマトリックス (96 列 x > 5000 行) があります。SVG 形式でヒートマップを生成するスクリプトを作成しましたが、実際のデータセットでは SVG ファイルのサイズが膨大になります。Inkscape は苦労しており、レンダリングと画面の更新が非常に遅いです。svgz に圧縮しても役に立ちません。
値ごとに rect を描画するアプローチを採用しました。各 rect には、x、y、幅、高さ、および塗りつぶしの 5 つの属性があります。ご想像のとおり、値が 96x5000 の場合、多くの四角形になります。各属性を整数に変えることで、ファイル サイズを ~34MB から ~29MB に減らしました。もう 1 つのアイデアは、fill 属性を削除して、10 ～ 20 のクラスのいずれかに置き換えることでした。色グループごとに 1 つです。しかし、私はそれを行うためのさらに良い方法があるに違いないと思うので、まだ最後の部分を行っていません.
例として： -
<rect fill="#000000" height="14" width="10" x="50" y="81" />
HTML では、色グループを参照する短いクラス名または ID を使用<table>します。値が 0 または中間値の場合、クラス名は必要なく、プリセットされたニュートラル カラーを継承できます。<tr's><th's><th>
ただし、SVG では正式なテーブル仕様がないようですが、どうすればよいでしょうか。現在、次のオプションを検討しています。
- 表示プロパティには、(十分に文書化されていない) inline-table オプションがあります。どうやら、それは「CSS からの偶発的な残骸」である可能性があります。
<g>これは、行ごとに、スタイルを参照する id を持つことを意味すると思いdisplay:table-row-groupます。 - ここで提案されているよう
<text>に、ネストされたs を使用して要素を行として使用します。<tspan> - ECMASCript で書かれたレイアウト マネージャーを使用します。
XSLT も簡単に調べてみました。これは強力に見えますが複雑で、Web ブラウザーでしか動作しないようです。理想的には、ベクトル グラフィック エディタで保存、表示、編集できる単一のファイルにすべてを保持したいと考えていますが、XSLT でこれが可能かどうかはわかりません。
これを行う最も効率的な方法は何でしょうか? ファイルサイズは、レンダリング速度ほど重要ではありません。どんな助けでも大歓迎です。
アップデート：-
- テキストとネストされた tspan には塗りつぶしまたは背景色の属性がないため、2 は機能しません。テキストと tspan は塗りつぶしを作成する方法を提供しないため、この例では rect を使用して背景色を提供します。
また、行の長さが遅いレンダリングと関係があるのではないかと考えました.Python の(c)ElementTree モジュールを使用して SVG を生成しています。デフォルトでは、改行文字を 1 つも使用せずにすべての XML を書き込みます。パーサー/レンダラーが画像の各行を XML の新しい行に分割するのに役立つでしょうか?