An SVG with its styles, and a PNG from it
The plain file has no fill on its bars, so a viewer paints them black. The second has every style written in. Both pictures are the real exported files, shown as images.
People want the chart in a slide, the numbers in a spreadsheet and the page on paper. An SVG file needs its styles written into it, a PNG goes through a canvas, a CSV needs careful quoting, and print needs its own CSS.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write exportName(kind, filter) that gives lumen-rides-saturdays-june.png for kind = "png" and a Saturday filter in June. What does it return for an empty filter?
Make toCsv write dates as 2025-06-01 and numbers with . for decimals, whatever the visitor's language. Why is toLocaleString the wrong tool here?
Explain it without notes
Why does an SVG made with serializeToString lose its colours when opened as a file?
How does a chart get from SVG to a PNG file in the browser?
Which values in a CSV need quoting, and what is CSV injection?
What is a tainted canvas and how do you avoid it?
Preview
Console
Nothing logged yet.Expected console output
plain: bars with a fill of their own: 0 of 5
svgText: bars with a fill of their own: 5 of 5
svgText starts with: <?xml version="1.0" encoding="UTF-8"?>
svgText size attributes: true
png: image/png | starts with 137,80,78,71 | pixels 600 x 240
scale 30: The picture would be 9000 x 3600 pixels, which is more than a browser canvas should be asked for. Use a smaller scale.