How do I keep chart values after SVG to PNG?

Example: a chart and its numbers

This is a made-up support-ticket example, not traffic or performance data for this website. The four bars use the same values as the table. In the chart source, each bar is labeled; the table remains readable even when the graphic is unavailable.

Takeaway: the count rises from Week 1 to Week 2, then falls in Weeks 3 and 4. The chart is a visual overview; the table carries the exact values.

A repeatable export checklist

1. Save the source dataset with its units, category labels, and date range. Do not infer precise figures from bar heights or pixels.
2. Check that your SVG includes every important label. If labels are tiny, simplify the graphic or increase their size before conversion.
3. Choose the PNG width for its actual placement, preview the result, and download it. A wider export adds pixels but does not fix unreadable design at the displayed size.
4. Publish the PNG with a short alt and a real HTML table or equivalent text nearby. Transcribe the values from the source dataset, not from the raster image.
5. After a data revision, update the SVG, PNG, takeaway, and table together. Compare every category, number, and unit against the same source.

When the SVG has no source data

Some charts are supplied as paths or shapes with no embedded numeric labels. In that case, the PNG can preserve the appearance but cannot establish the exact underlying values. Ask the chart owner for the dataset. If only the graphic survives, describe the visible trend without inventing precise measurements, and label any approximate reading as approximate.

A screenshot or converted PNG is not a substitute for a data table. If the data is sensitive, consider whether the table and chart should be published at all; conversion on this site's tool runs locally in the browser, but publishing the result is a separate decision.

Markup pattern

The table belongs in the page as HTML, not baked into the PNG. Replace these illustrative values with your own verified data.

<figure>
  <img src="weekly-tickets.png"
       alt="Support tickets peak in Week 2; exact counts follow in a table.">
  <figcaption>Illustrative support tickets by week.</figcaption>
</figure>
<table>
  <caption>Support tickets by week</caption>
  <thead><tr><th scope="col">Week</th><th scope="col">Tickets</th></tr></thead>
  <tbody><tr><th scope="row">1</th><td>12</td></tr>...</tbody>
</table>

For further guidance on complex-image alternatives, see the W3C WAI complex images tutorial. For the broader alt-text decision, read our accessible diagrams guide.

FAQ