Scalable Vector Graphics

See the lecture notes, which links to this introduction to SVG.

SVG basics

viewBoxes

Use a viewBox specification to create a user coordinate system.

Make sure to use preserveAspectRatio="none" fx. if a picture has 500px times 100px, but you want a coordinate system in 1:1 ratio, i.e. 100px times 100px.

Create groups

See this introduction to <g> which is a group element used to define attributes for a group of elements.

Adding style to text

Use a <tspan> element to specify fx. fill, font type, etc.

Can also use CSS <style> for more complicated things.

Adding a hyperlink

See an example of using <a> to add a hyperlink to text.

Animation

Use <animate>. See how in lab9 and notice the code for embedding a button to run the animation.

Including SVG in Rmarkdown

Can include an svg file in markdown by using a <div> element, using results = "asis" in the chunk option, and using cat to print the svg code from the file.

Note that the comments should be removed but are added here to be able to render.

<div id="c">
# ```{r echo = FALSE, results="asis"}
cat(paste(gsub("^\\s*", "", readLines("q2_program.svg")), collapse = ""))
# ```
</div>

Combining SVG with embedded javascript

See an example of how to create a selection menu and run an animation for selection in the challenge of the lab.