How to create github readme charts from excel data using svg
- Step 1Put benchmark or metrics data in a two-column sheet — First column = the thing being measured (
Test case,Library,Commit); second column = the number (ms,ops/sec,% coverage). Keep it to the rows that matter — the tool charts the first 20. - Step 2Upload the Excel/CSV to SVG Data Viz — Drop the
.xlsxor.csvonto the tool. It runs in-browser via SheetJS and requires the Pro tier. Leave Chart type on Bar for benchmark comparisons. - Step 3Confirm or set the columns — Auto-detect uses the first column as the label and the first all-numeric column as the value. If it guesses wrong, type the exact header names into the Label column / Value column inputs.
- Step 4Download chart-bar.svg — Click Download to save the file (named
chart-bar.svg). The result panel shows the SVG source for inspection, not a rendered image — open the file in a browser to preview it. - Step 5Commit the SVG to your repository — Save it under a stable path, e.g.
assets/benchmark-chart.svg, and commit. A stable path means the README link never breaks when you regenerate. - Step 6Reference it from the README — Add
toREADME.md. GitHub renders the SVG file as an image. To update later, regenerate and overwrite the same file in a new commit.
What GitHub does and doesn't render
GitHub's markdown is sanitized HTML. Use the SVG-as-file path; the inline path is stripped.
| Approach | Renders on GitHub? | Notes |
|---|---|---|
 (SVG file) | Yes | The supported path. Commit the file; reference it like any image. |
Raw inline <svg>...</svg> in README markdown | No | GitHub's sanitizer strips inline SVG markup. Don't paste the source into the README. |
<img src="chart.svg"> | Yes | Works for files in the repo or a raw URL; same as the markdown image form. |
Chart.js / D3 <script> | No | <script> is stripped entirely — JS charts never run in a README. |
| SMIL / CSS animation inside the SVG | Mostly stripped | Animation hooks are sanitized; treat the chart as static. |
Bar chart output for README use
Fixed characteristics of the generated file — useful when sizing and theming a README chart.
| Property | Value | README implication |
|---|---|---|
| Filename | chart-bar.svg | Rename on commit to something descriptive like benchmark-chart.svg. |
| Dimensions | 640 × 400, viewBox 0 0 640 400 | Scales down via a width on <img>; GitHub respects it. |
| Background | #0f1117 (dark) | Reads on both light and dark GitHub themes; no transparent fallback needed. |
| Rows charted | First 20 | Trim or sort the sheet so the key benchmarks are in the top 20. |
| Title text | <filename> — <value column> | Name your file and value header meaningfully — both appear in the chart title. |
| Palette | 8 colours cycling by bar | Fixed; edit fill attributes by hand if your brand needs specific colours. |
Tier limits (excel family)
SVG Data Viz requires Pro tier or higher; Free is shown for reference only.
| Tier | Max file size | Max rows | Files per run |
|---|---|---|---|
| Free | 5 MB | 10,000 | 1 (tool not available on Free) |
| Pro | 50 MB | 100,000 | 5 |
| Pro-media | 200 MB | 500,000 | 20 |
| Developer | 500 MB | unlimited | unlimited |
Cookbook
Benchmark and repo-metrics scenarios. Numbers are illustrative; the SVG snippets show the parts relevant to GitHub embedding.
Benchmark comparison committed and referenced
The canonical use: a small benchmark table charted to a file and linked from the README. Note the README uses the file-reference form, not inline SVG.
Input (benchmarks.xlsx, sheet 1): Library,ops/sec our-lib,184000 competitor-a,121000 competitor-b,98000 Download → chart-bar.svg → commit as assets/benchmark-chart.svg README.md: ## Benchmarks 
Don't paste the SVG source into the README
A common mistake: copying the SVG markup into the README. GitHub's sanitizer removes it and you get nothing. Always reference the committed file.
WRONG (stripped by GitHub): <svg xmlns=... width="640" ...> ... </svg> ← removed RIGHT (renders): 
Coverage / quality metric chart
Chart a few quality numbers as a quick visual badge alternative. Keep labels short so the −30° rotated axis stays readable.
Input: Metric,Percent Lines,92 Branches,84 Funcs,97 Config: bar, label=Metric, value=Percent → chart-bar.svg, three bars labelled Lines/Branches/Funcs Reference: 
Resize the chart in the README
640×400 can dominate a README. Use the HTML <img> form to control width while keeping the viewBox-driven aspect ratio.
<!-- instead of markdown image syntax -->
<img src="./assets/benchmark-chart.svg" width="420"
alt="ops/sec by library" />
GitHub renders the SVG at 420 px wide, height auto.Cache-bust after regenerating
GitHub caches asset URLs aggressively (camo / raw cache). Overwriting the file may show the old chart for a while; a query string forces a refresh.
After regenerating and committing the new SVG:  Bump ?v=N each update so readers see the latest chart instead of a cached copy.
Edge cases and what actually happens
Inline `<svg>` pasted into README markdown
Stripped by GitHubGitHub's HTML sanitizer removes inline <svg> blocks from rendered markdown. The chart vanishes. Always commit the SVG as a file and reference it with  or <img src=...>.
Free tier upload
Rejected (Pro required)The tool errors with SVG Data Viz requires Pro tier. on Free. Upgrade to Pro or higher to generate the chart file.
More than 20 benchmark rows
By design (first 20)Only the first 20 rows are charted. For a long benchmark suite, pick or sort the top 20 results in Excel before uploading.
Numbers with units in the cell (`184k`, `92 ms`)
MisparsedparseFloat("184k") reads 184 and parseFloat("92 ms") reads 92 — the suffix is dropped, which is usually fine, but parseFloat("ms 92") reads 0. Keep numeric cells leading-numeric, with units in a separate column or in the header.
Animated or interactive chart wanted
Not supportedThe SVG is static and GitHub strips animation/script hooks anyway. There is no interactivity option. For motion, host a real animated chart elsewhere and link to it; the README chart stays static.
Old chart still shows after a new commit
CacheGitHub caches asset URLs. Append a version query string (chart.svg?v=2) and bump it on each regeneration, or reference a raw URL, to defeat the cache.
Chart background clashes with a custom GitHub Pages theme
Fixed backgroundThe SVG background is hard-set to #0f1117. On a light docs site it appears as a dark card. To match a light theme, edit the style="background:#0f1117..." attribute in the downloaded SVG.
Long library / commit labels on the axis
TruncatedLabels over 8 characters are clipped to 7 + ellipsis and rotated −30°. Use short identifiers (v1.2, lib-a) in the sheet so the axis stays meaningful.
Data on a non-first worksheet
Not chartedThe tool reads the first sheet only. Move benchmark data to the first tab before uploading.
Empty sheet or no numeric column
Empty outputAn empty file returns <svg/>; a sheet with no parseable numbers returns <!-- No numeric data found -->. Verify the value column holds bare numbers.
Frequently asked questions
Why doesn't my inline SVG show up in the README?
GitHub's markdown sanitizer strips inline <svg> markup (and <script>). Save the chart as a file and reference it with  or <img src=...> instead — that's the only form GitHub renders.
Does GitHub allow SVG images in a README at all?
Yes — SVG files referenced as images render natively. The tool's Download gives you exactly such a file (chart-bar.svg). Commit it and link it like any PNG.
Do I need a GitHub Action or external service?
No. Generate the SVG here, commit the file, reference it. There's no CI step, no image host, and no API key involved.
Will the dark background look wrong on someone's light theme?
The chart background is a fixed dark #0f1117, so on a light page it shows as a dark card — which is fine on GitHub and most docs. If you need a light background, edit the background: value in the downloaded SVG by hand.
Can I animate the chart for the README?
No. The output is static and GitHub strips SVG animation/script for security anyway. Keep it static; link out to a hosted animated chart if you truly need motion.
How do I update the chart when my numbers change?
Regenerate from the new data, Download the SVG, and overwrite the committed file in a new commit. Add a ?v=N query string to the README reference and bump it to bypass GitHub's asset cache.
How many benchmark rows can I show?
The first 20 rows of the first sheet. Sort your benchmark table so the most important 20 results are at the top before uploading.
Does it work on GitLab or Bitbucket too?
Yes. Any platform that renders an SVG image referenced from markdown will show the chart. The file is plain SVG with no platform-specific dependencies.
What size will the chart be on the page?
640 × 400 by default. To shrink it, use the <img src="chart.svg" width="420"> form — the viewBox keeps the aspect ratio correct.
Is my benchmark data uploaded anywhere?
No. Everything runs in your browser via SheetJS; the spreadsheet never reaches a server.
Can I generate the README table itself, not just the chart?
Yes — for a markdown table of the same data, the json-to-markdown converter handles tabular output (the Excel markdown export routes there). Pair a table with the SVG chart in your README.
What other repo-friendly exports are available for the same sheet?
For a quick file inspection use the Format Inspector; to ship the data alongside code, the Python Dict/List Generator or tRPC Router Builder turn the same sheet into committable source.
Privacy first
Every JAD Excel tool runs entirely in your browser using SheetJS and ExcelJS. Your spreadsheets, formulas, and data never leave your device — verified by zero outbound network requests during processing.