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).
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 SVG 2 since 2018, but browser support is still very patchy.
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.
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.
A good book 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.
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):
Average yearly population, in millions, to nearest 1000,
from 1960 to 2020:
austria-population-1960-2020.txt
Source: Statistik Austria;
https://statistik.at/atlas/bev_prognose/
Number of seats for top seven parties (650 seats total):
election-uk-2019.txt
Source: Wikipedia;
https://wikipedia.org/wiki/List_of_MPs_elected_in_the_2019_United_Kingdom_general_election
There are two chart types:
population-line: Aumüller Bajramovic Heider Hukkanen Ibrahimpašić election-bar: Ramadan Tenstad
Using a text editor, hand code your assigned chart as SVG 1.1:
It is probably easier to draw your chart on graph paper (kariertes Papier) first, before moving to SVG.
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 sample SVG file contains a comment with copyright and licence information:
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.
Email your SVG file to me
at kandrews@iicm.edu
before the deadline.