InfoVis SS 2025

Exercise 1: Create a Simple Chart in SVG

This exercise involves hand-coding a chart in SVG 1.1. There is widespread browser support for SVG 1.1.

There has been a Candidate Recommendation for SVG 2 since 2018, but browser support is still very patchy.

Note:

This is an individual exercise. Points will be awarded individually, not by group.
You must work alone. Do not collaborate with anyone else (and certainly not with a colleague who is creating the same chart).
You must use a plain text editor.

I want you to hand code an SVG file using a text editor. Do not use a vector graphics editor such as Illustrator or Inkscape for this exercise. I will notice the difference.
You are not allowed to use any Generative AI tool for this exercise!

Read the (free) Pocket Guide to Writing SVG:
https://svgpocketguide.com/
Look at this guide to hand-coding SVGs:
https://webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368
Refer to the SVG 1.1 Specification for any details:
https://w3.org/TR/SVG11/

Note: It is also possible to style SVG elements using CSS, either from an external file (style sheet) or embedded in a <style> element.
The best book on SVG for the web is:
Using SVG with CSS3 and HTML5: Vector Graphics for Web Design Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey; O'Reilly, Nov 2017, ISBN 1491921978.
https://learning.oreilly.com/library/view/using-svg-with/9781491921968/
Check out this article on Making Charts with SVG:
https://css-tricks.com/how-to-make-charts-with-svg/
Download the sample SVG files and data files from:
../exercises/materials/svg-chart/

Right-click, Save Link As...

There are examples of charts by previous students Peter Oberrauner, Ridvan Aydin, and Philipp Drescher.

The example charts are provided under the terms of a CC BY 4.0 licence.

Do not simply replicate the look of the examples, come up with your own style!

There are two datasets (each with seven records):

There are two chart topics:

See TeachCenter to see which topic you have been assigned.

Draw the chart on graph paper (kariertes Papier) to figure out the coordinates.
Keep the final sketch to document your process and hand in.

Make a copy or a scan first if you want to keep it, you will hand in the original.

Using a text editor, hand code your assigned chart as SVG 1.1:

Name your SVG file as follows: surname-task.svg, where surname is your (main) surname in lower case and task is one of population-line or election-bar, depending on your assignment. For example, andrews-population-line.svg or andrews-election-bar.svg
Include the following visual elements in your chart:
- the chart itself
- title
- x axis with tick marks and labels
- x axis title
- y axis with tick marks and labels
- y axis title
- a narrow uniform margin around the chart (no visible frame).
The sample SVG files contain a comment with copyright and CC BY 4.0 licence statement:
- Change the name in the copyright statement to your own and the year to this year.
- Or, alternatively, leave out the licence statement, if you do not wish to place your work under that licence.

Bear in mind:

Only use UTF-8 character encoding (the default for SVG).
Never set a width or height (or x or y origin) on the SVG element! These fix an absolute size in pixels and mean that your chart will not be freely scalable. Instead, use viewBox to define a user coordinate space.
In the SVG coordinate system, the origin (0,0) is in the top left corner.
If you use CSS to style the SVG elements, put the style directives in a <style> element inside the SVG file.
In general, set font sizes in user (viewBox) units, font-size="10". Never set font sizes in absolute units such as px or pt. Avoid setting font sizes in relative units such as em or rem, except for special use cases.
Keep your SVG clean and tidy. Use indentation of 2 spaces. Do not use any tab characters.