SVG Graphics

The purpose of this topic is to take a closer look at SVG, a great vector format for graphics in a web page. This is essentially a low-level look at one of the technologies that underlies some of the tools that we saw in the topics on “Animation” and “Interactive Graphics”.

We have seen in several topics that high-level tools can do an enormous amount of work for us, but it can be difficult to control fine details and, when things go wrong, it can be hard to know what is wrong and how to fix it. This topic will allow us to have much more direct control over the generation of SVG images, at the cost of having to do more of the work ourselves. Working directly with SVG is not entirely unlike creating a data visualisation with ‘grid’, except that SVG is even more low-level.

One of the reasons why SVG is such a nice language for graphics is that it is a text format. This means that it is easy to create, view, and modify SVG files. We can work with images by explicitly typing SVG code. We can also easily write R code to directly generate or modify SVG code.

Another reason why SVG is such a nice language for graphics is that it is an XML format. This means that there are powerful XML tools, like XPath and the xml2 package, for programmatically creating and manipulating SVG images.

Yet another reason why SVG is such a nice language for graphics is because it integrates nicely with other web technologies: HTML, CSS, and JavaScript. However, we will mostly focus just on SVG in this topic.

Introduction

SVG is a text format, so we can just use a text editor and manually create a description of an image. For example, the SVG code below describes a blue R on a grey circle on a white rectangle.

The SVG Tutorial in the Readings explains what the different SVG elements and attributes are for.

<svg version="1.1"
     width="200" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="white"/>
  <circle cx="100" cy="100" r="80" fill="#B5B7BB" />
  <text x="100" y="100" font-size="100" 
        dominant-baseline="central" text-anchor="middle" 
        fill="#2066B9" font-family="sans-serif" font-weight="bold">
    R
  </text>
</svg>

SVG is also an XML format, so we can use the ‘xml2’ package to programmatically create a description of an image. For example, the R code below creates the same image as above.

The Creating and Modifying XML Reading explains what the different ‘xml2’ functions are for.

library(xml2)
svg <- xml_new_root("svg",
                    version="1.1",
                    width="200", height="200",
                    xmlns="http://www.w3.org/2000/svg")
xml_add_child(svg, "rect",
              width="100%", height="100%", fill="white")
xml_add_child(svg, "circle",
              cx="100", cy="100", r="80", fill="#B5B7BB")
xml_add_child(svg, "text", "R",
              x="100", y="100", "font-size"="100", 
              "dominant-baseline"="central", "text-anchor"="middle", 
              fill="#2066B9", "font-family"="sans-serif", "font-weight"="bold")
write_xml(svg, "program.svg")

The advantage of creating SVG from code of course is that we can generate a lot more SVG code a lot more efficiently than typing it out by hand.

As well as drawing simple static images like the ones above, SVG has facilities for creating simple tooltips, creating hyperlinks, and creating simple animations. The other Readings provide information on how to add these features to an SVG image.

Reading

  • The “SVG Tutorial” by the Mozilla Developer Network.

    This reading should give you the information you need to create a basic SVG image by hand.

    You should definitely read the following sections:

    • Getting Started

    • Positions (NOTE the ability to set a coordinate system with viewBox)

    • Basic Shapes

    • Fills and Strokes

    • Texts (NOTE the ability to change text style with tspan)

    Read the other sections at your own risk :)

  • The Mozilla Developer Network page for the anchor element.

    This can be used to create hyperlinks on SVG elements.

  • The Mozilla Developer Network page for the title element.

    This can be used to create simple tooltips on SVG elements.

  • The “SVG animation with SMIL” page by the Mozilla Developer Network.

    This can be used to define simple animations of SVG elements.

  • Some notes on “Creating and modifying XML documents” with the ‘xml2’ package.

References

Bibliography

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.