Choose your tool

GENERATORS TOOL

SVG Numeric Heatmap

Map a rectangular numeric matrix to a two-color SVG heatmap.

◇ Browser only

Your text

Or load a UTF-8 text file

0 lines · 0 characters

ResultsReady when you are

Your results will appear here.

Copy or download your result below.

Your text stays on this device.

LESS BUSYWORK, MORE DONE

Three steps. That’s it.

A useful toolkit for text, data, images and calculations.

01
Add your input
Choose a tool, enter values or select a file.
02
Make it yours
Adjust the options and run the action.
03
Take the result
Copy the result or download its file.

SVG matrix heatmap generator online

Map a rectangular numeric matrix to a two-color SVG heatmap. Use this to create a self-contained vector asset. SVG can scale without raster pixelation; review spacing, labels and color contrast in its final layout.

How to use it

Paste JSON matching the structure in the example. Set low color, high color. Choose Run tool. Review the output, then copy or download it.

Options and example settings

Option	Choices / value	Example default
Low color	Enter low color.	#e0e7ff
High color	Enter high color.	#3730a3

Worked examples

Use this to create a self-contained vector asset. SVG can scale without raster pixelation; review spacing, labels and color contrast in its final layout.

Reproducible worked example

Settings: Low color: #e0e7ff; High color: #3730a3

Input:

[[1,2,3],[4,5,6],[7,8,9]]

With the input and settings above, the tool produces:

Output:

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><rect x="0" y="0" width="40" height="40" stroke="#ffffff" fill="#e0e7ff"><title>1</title></rect><rect x="40" y="0" width="40" height="40" stroke="#ffffff" fill="#cbd0f4"><title>2</title></rect><rect x="80" y="0" width="40" height="40" stroke="#ffffff" fill="#b6b9e8"><title>3</title></rect><rect x="0" y="40" width="40" height="40" stroke="#ffffff" fill="#a1a2dd"><title>4</title></rect><rect x="40" y="40" width="40" height="40" stroke="#ffffff" fill="#8c8cd1"><title>5</title></rect><rect x="80" y="40" width="40" height="40" stroke="#ffffff" fill="#7675c6"><title>6</title></rect><rect x="0" y="80" width="40" height="40" stroke="#ffffff" fill="#615eba"><title>7</title></rect><rect x="40" y="80" width="40" height="40" stroke="#ffffff" fill="#4c47af"><title>8</title></rect><rect x="80" y="80" width="40" height="40" stroke="#ffffff" fill="#3730a3"><title>9</title></rect></svg>

The result is SVG markup. The viewBox and element coordinates define the vector drawing; inspect the rendered image before using it in a layout.

Limitations and common mistakes

Produces an SVG vector asset from your values. Labels are escaped; generated files do not include scripts or remote resources. Inspect label spacing and contrast before publication.
Combined input is bounded to 150,000 characters; output text is bounded to 1.2 million characters. Some algorithms impose smaller limits, stated in their error messages.

Frequently asked questions

What format should I enter?

Paste JSON matching the structure in the example. The worked example shows the supported structure and actual output.

How can I map a rectangular numeric matrix to a two-colour SVG heatmap online?

Paste JSON matching the structure in the example. Set low color, high color. Choose Run tool. Review the output, then copy or download it.

Where is my input processed?

The bundled tool processes input in your browser. It does not upload tool input to a conversion service. Other site plugins, analytics, advertising and browser extensions may have separate behavior.