Episteme - dmlc - Emitter

Emitting Images in SVG

In this section, we will take a look at the output of the EpixToSVGEmitter. SVG was chosen as an initial target language because of its ability to produce high-quality images but also because every path corresponding to a presentational primitive could be annotated with logical information. Therefore, the logical and presentational aspects of diagrams are realized in this format. First lets take a look at some SVG for Archimedes' Floating Bodies, Book I, Proposition 2.

	<svg height='400.0' viewBox='0 0 400.0 400.0' width='400.0' xmlns='http://www.w3.org/2000/svg'>
	  <circle class='tlg0552.tlg008:center_of_earth' cx='200.0' cy='200.0' id='urn:dml:tlg0552.tlg008:2.1:o' r='1' style='fill: black; stroke:black;'/>
	  <text class='eng-La26' style='font-weight:bold; text-anchor:middle; font-size:8pt;' x='200.0' y='210.0'>
	    O
	  </text>
	  <path class='tlg0552.tlg008:curve' d='M 300.0,200.0 299.691733373,192.154090427 298.76883406,184.356553496 297.23699204,176.655463614 295.10565163,169.098300563 292.387953251,161.731656763 289.100652419,154.600950026 285.264016435,147.750143528 280.901699437,141.221474771 276.04059656,135.055195167 270.710678119,129.289321881 264.944804833,123.95940344 258.778525229,119.098300563 252.249856472,114.735983565 245.399049974,110.899347581 238.268343237,107.612046749 230.901699437,104.89434837 223.344536386,102.76300796 215.643446504,101.23116594 207.845909573,100.308266627 200.0,100.0 192.154090427,100.308266627 184.356553496,101.23116594 176.655463614,102.76300796 169.098300563,104.89434837 161.731656763,107.612046749 154.600950026,110.899347581 147.750143528,114.735983565 141.221474771,119.098300563 135.055195167,123.95940344 129.289321881,129.289321881 123.95940344,135.055195167 119.098300563,141.221474771 114.735983565,147.750143528 110.899347581,154.600950026 107.612046749,161.731656763 104.89434837,169.098300563 102.76300796,176.655463614 101.23116594,184.356553496 100.308266627,192.154090427 100.0,200.0 ' id='urn:dml:tlg0552.tlg008:2.1:abcd' style='fill: none; stroke:black;'/>
	  <circle class='tlg1799.tlg001:point' cx='100.0' cy='200.0' id='urn:dml:tlg0552.tlg008:2.1:a' r='1' style='fill: black; stroke:black;'/>
	  <text class='eng-La26' style='font-weight:bold; text-anchor:middle; font-size:8pt;' x='100.0' y='210.0'>
	    A
	  </text>
	  <circle class='tlg1799.tlg001:point' cx='300.0' cy='200.0' id='urn:dml:tlg0552.tlg008:2.1:d' r='1' style='fill: black; stroke:black;'/>
	  <text class='eng-La26' style='font-weight:bold; text-anchor:middle; font-size:8pt;' x='300.0' y='210.0'>
	    D
          </text>
      

First look at the svg element. Notice that the width, height, and viewBox have the number 400.0, this corresponds to the values used to initialize the epix:image matrix in the view applied. Next, notice that each SVG element corresponding to a presentational primitive has a class attribute that specifies its logical type as well as an id that is a DML-URN. These two pieces of information provide hooks for interactive diagrams for pulling up text corresponding to a given primitive via CTS-URN or for displaying or processing a diagram at the logical level. Finally, notice that the text labels have a class that provides language-encoding information about the text. English, Greek, Arabic, or labels from any language could really be used here. The value of these labels is set in the epix:styles section of the presentational markup.