use-case-examples

SVG documents for messing around with. The primary purpose of these is to figure out the relevant use cases, and how to meet them - or what is lacking in SVG at the moment to do so.

Please feel free to make pull requests on this readme (I don’t do markdown very well) or on the files themselves.

The general approach you should take is to pick a file from here, or somewhere else, and start working on it. Making a new directory for the file is handy, and please provide a version of the code inline in an HTML document. Please also document what you did in a file called notes.html.

We are also trying to tracking this work through the W3C SVG wiki - but feel free to help bring that up to date because it probably isn’t.

So far a handful of images have been worked up to the point where we would really like issues filed:

beaker

beaker.html is an animated diagram demonstrating a science principle. It uses SVG animation - animate and set elements for most of the interactivity and dynamic update, and aria-live to communicate some of what's going on to screen readers. See also notes on the beaker exercise

composed-tree

composed-tree.svg is a tree diagram - a more detiled description is available. There is also a version as HTML with SVG code inline and some notes about the changes and lessons learned.

The original image came from the W3C draft Shadow DOM specification. Hopefully the improvements made here translate to an improvement in that document's accessibility.

hc-chart

A couple of different versions of the SVG chart exported from Highcharts.com's example accessible line graph since the exported version doesn't include their accessibility features.

sparse-chord

sparse-chord.svg is a graph that links things shown in 2 individual bar charts to each other.

[Notes about the changes and lessons](sparse-chord-notes.html) are pretty sparse, and we welcome additional testing results

rectrack2.svg is a flowchart with various loops

revisedrec2 is a proposed replacement for revisedrec which is part of the W3c process document. Notes about this set of diagrams are a bit sparse, and we welcome additional testing results

There are a couple of images that are being worked on, but are known to be buggy. We would love people to fork them and file Pull Requests for suggesting improvements…

chem-BV-ox

chem-BV-ox.svg presents a chemical reaction, using a graphical representation familiar to who work with organic chemistry. This is still very much a work in progress.

chord

chord.svg is a pretty complex graph. A description is available.

Notes about the changes and lessons are pretty sparse, and we welcome additional testing results.

revisedrec

revisedrec.svg is a flowchart between 5 explicit states and one implicit state, with a number of loops. I started to work it up, and then took what I had done to create rectrack2.svg. At some point the changes should be backported to finish this, because the diagrams are used in the W3C Process document.