prawn-svg 0.9.1.10 → 0.9.1.11

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. data/.gitignore +5 -0
  2. data/.rspec +2 -0
  3. data/Gemfile +14 -0
  4. data/Rakefile +26 -0
  5. data/lib/prawn/svg/element.rb +7 -2
  6. data/lib/prawn/svg/font.rb +7 -4
  7. data/lib/prawn/svg/parser.rb +12 -4
  8. data/lib/prawn/svg/version.rb +5 -0
  9. data/prawn-svg.gemspec +23 -0
  10. data/spec/lib/parser_spec.rb +58 -0
  11. data/spec/lib/path_spec.rb +38 -0
  12. data/spec/lib/svg_spec.rb +22 -0
  13. data/spec/prawn/svg/document_spec.rb +27 -0
  14. data/spec/prawn/svg/element_spec.rb +32 -0
  15. data/spec/prawn/svg/font_spec.rb +31 -0
  16. data/spec/prawn/svg/parser/text_spec.rb +4 -0
  17. data/spec/sample_output/directory +0 -0
  18. data/spec/sample_svg/arcs01.svg +21 -0
  19. data/spec/sample_svg/circle01.svg +12 -0
  20. data/spec/sample_svg/cubic01.svg +37 -0
  21. data/spec/sample_svg/cubic01a.svg +40 -0
  22. data/spec/sample_svg/cubic02.svg +86 -0
  23. data/spec/sample_svg/ellipse01.svg +17 -0
  24. data/spec/sample_svg/line01.svg +22 -0
  25. data/spec/sample_svg/maths.svg +34 -0
  26. data/spec/sample_svg/omnigraffle.svg +41 -0
  27. data/spec/sample_svg/opacity01.svg +42 -0
  28. data/spec/sample_svg/polygon01.svg +17 -0
  29. data/spec/sample_svg/polyline01.svg +18 -0
  30. data/spec/sample_svg/quad01.svg +28 -0
  31. data/spec/sample_svg/rect01.svg +12 -0
  32. data/spec/sample_svg/rect02.svg +16 -0
  33. data/spec/sample_svg/rotate_scale.svg +38 -0
  34. data/spec/sample_svg/scruffy_graph.svg +134 -0
  35. data/spec/sample_svg/triangle01.svg +12 -0
  36. data/spec/sample_svg/tspan01.svg +17 -0
  37. data/spec/sample_svg/tspan02.svg +22 -0
  38. data/spec/sample_svg/tspan03.svg +21 -0
  39. data/spec/sample_svg/use.svg +17 -0
  40. data/spec/spec_helper.rb +9 -0
  41. metadata +103 -15
@@ -0,0 +1,40 @@
1
+ <?xml version="1.0" standalone="no"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
3
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
+ <svg width="5cm" height="4cm" viewBox="0 0 500 400"
5
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
6
+ <title>Example cubic01- cubic Bézier commands in path data</title>
7
+ <desc>Picture showing a simple example of path data
8
+ using both a "C" and an "S" command,
9
+ along with annotations showing the control points
10
+ and end points</desc>
11
+ <defs>
12
+ <style type="text/css"><![CDATA[
13
+ .Border { fill:none; stroke:blue; stroke-width:1 }
14
+ .Connect { fill:none; stroke:#888888; stroke-width:2 }
15
+ .SamplePath { fill:none; stroke:red; stroke-width:5 }
16
+ .EndPoint { fill:none; stroke:#888888; stroke-width:2 }
17
+ .CtlPoint { fill:#888888; stroke:none }
18
+ .AutoCtlPoint { fill:none; stroke:blue; stroke-width:4 }
19
+ .Label { font-size:22; font-family:Verdana }
20
+ ]]></style>
21
+ <text class="Label" x="0" y="0">THIS TEXT SHOULD NOT BE RENDERED - IT IS IN A DEFS BLOCK</text>
22
+ </defs>
23
+ <rect class="Border" x="1" y="1" width="498" height="398" />
24
+ <polyline class="Connect" points="100,200 100,100" />
25
+ <polyline class="Connect" points="250,100 250,200" />
26
+ <polyline class="Connect" points="250,200 250,300" />
27
+ <polyline class="Connect" points="400,300 400,200" />
28
+ <path style=" fill:none; stroke:red; stroke-width:5" d="M100,200 C100,100 250,100 250,200
29
+ S400,300 400,200" />
30
+ <circle class="EndPoint" cx="100" cy="200" r="10" />
31
+ <circle class="EndPoint" cx="250" cy="200" r="10" />
32
+ <circle class="EndPoint" cx="400" cy="200" r="10" />
33
+ <circle class="CtlPoint" cx="100" cy="100" r="10" />
34
+ <circle class="CtlPoint" cx="250" cy="100" r="10" />
35
+ <circle class="CtlPoint" cx="400" cy="300" r="10" />
36
+ <circle class="AutoCtlPoint" cx="250" cy="300" r="9" />
37
+ <text class="Label" x="25" y="70">M100,200 C100,100 250,100 250,200</text>
38
+ <text class="Label" x="325" y="350"
39
+ style="text-anchor:middle">S400,300 400,200</text>
40
+ </svg>
@@ -0,0 +1,86 @@
1
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
2
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3
+ <svg width="10cm" height="10cm" viewBox="0 0 1000 1000"
4
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
5
+ <title>Example cubic02 - cubic Bezier commands in path data</title>
6
+ <desc>Picture showing examples of "C" and "S" commands,
7
+ along with annotations showing the control points
8
+ and end points</desc>
9
+ <style type="text/css"><![CDATA[
10
+ .Border { fill:none; stroke:blue; stroke-width:1 }
11
+ .Connect { fill:none; stroke:#888888; stroke-width:2 }
12
+ .EndPoint { fill:none; stroke:#888888; stroke-width:2 }
13
+ .CtlPoint { fill:#888888; stroke:none }
14
+ .AutoCtlPoint { fill:none; stroke:blue; stroke-width:4 }
15
+ .Label { text-anchor:middle; font-size:22; font-family:Verdana }
16
+ ]]></style>
17
+
18
+ <rect class="Border" x="1" y="1" width="998" height="998" />
19
+
20
+ <!-- Path 1 -->
21
+ <polyline class="Connect" points="100,200 100,100" />
22
+ <polyline class="Connect" points="400,100 400,200" />
23
+ <path style="fill:none; stroke:red; stroke-width:5" d="M100,200 C100,100 400,100 400,200" />
24
+ <circle class="EndPoint" cx="100" cy="200" r="10" />
25
+ <circle class="EndPoint" cx="400" cy="200" r="10" />
26
+ <circle class="CtlPoint" cx="100" cy="100" r="10" />
27
+ <circle class="CtlPoint" cx="400" cy="100" r="10" />
28
+ <text class="Label" x="250" y="275">M100,200 C100,100 400,100 400,200</text>
29
+
30
+ <!-- Path 2 -->
31
+ <polyline class="Connect" points="100,500 25,400" />
32
+ <polyline class="Connect" points="475,400 400,500" />
33
+ <path style="fill:none; stroke:red; stroke-width:5" d="M100,500 C25,400 475,400 400,500" />
34
+ <circle class="EndPoint" cx="100" cy="500" r="10" />
35
+ <circle class="EndPoint" cx="400" cy="500" r="10" />
36
+ <circle class="CtlPoint" cx="25" cy="400" r="10" />
37
+ <circle class="CtlPoint" cx="475" cy="400" r="10" />
38
+ <text class="Label" x="250" y="575">M100,500 C25,400 475,400 400,500</text>
39
+
40
+ <!-- Path 3 -->
41
+ <polyline class="Connect" points="100,800 175,700" />
42
+ <polyline class="Connect" points="325,700 400,800" />
43
+ <path style="fill:none; stroke:red; stroke-width:5" d="M100,800 C175,700 325,700 400,800" />
44
+ <circle class="EndPoint" cx="100" cy="800" r="10" />
45
+ <circle class="EndPoint" cx="400" cy="800" r="10" />
46
+ <circle class="CtlPoint" cx="175" cy="700" r="10" />
47
+ <circle class="CtlPoint" cx="325" cy="700" r="10" />
48
+ <text class="Label" x="250" y="875">M100,800 C175,700 325,700 400,800</text>
49
+
50
+ <!-- Path 4 -->
51
+ <polyline class="Connect" points="600,200 675,100" />
52
+ <polyline class="Connect" points="975,100 900,200" />
53
+ <path style="fill:none; stroke:red; stroke-width:5" d="M600,200 C675,100 975,100 900,200" />
54
+ <circle class="EndPoint" cx="600" cy="200" r="10" />
55
+ <circle class="EndPoint" cx="900" cy="200" r="10" />
56
+ <circle class="CtlPoint" cx="675" cy="100" r="10" />
57
+ <circle class="CtlPoint" cx="975" cy="100" r="10" />
58
+ <text class="Label" x="750" y="275">M600,200 C675,100 975,100 900,200</text>
59
+
60
+ <!-- Path 5 -->
61
+ <polyline class="Connect" points="600,500 600,350" />
62
+ <polyline class="Connect" points="900,650 900,500" />
63
+ <path style="fill:none; stroke:red; stroke-width:5" d="M600,500 C600,350 900,650 900,500" />
64
+ <circle class="EndPoint" cx="600" cy="500" r="10" />
65
+ <circle class="EndPoint" cx="900" cy="500" r="10" />
66
+ <circle class="CtlPoint" cx="600" cy="350" r="10" />
67
+ <circle class="CtlPoint" cx="900" cy="650" r="10" />
68
+ <text class="Label" x="750" y="575">M600,500 C600,350 900,650 900,500</text>
69
+
70
+ <!-- Path 6 (C and S command) -->
71
+ <polyline class="Connect" points="600,800 625,700" />
72
+ <polyline class="Connect" points="725,700 750,800" />
73
+ <polyline class="Connect" points="750,800 775,900" />
74
+ <polyline class="Connect" points="875,900 900,800" />
75
+ <path style="fill:none; stroke:red; stroke-width:5" d="M600,800 C625,700 725,700 750,800
76
+ S875,900 900,800" />
77
+ <circle class="EndPoint" cx="600" cy="800" r="10" />
78
+ <circle class="EndPoint" cx="750" cy="800" r="10" />
79
+ <circle class="EndPoint" cx="900" cy="800" r="10" />
80
+ <circle class="CtlPoint" cx="625" cy="700" r="10" />
81
+ <circle class="CtlPoint" cx="725" cy="700" r="10" />
82
+ <circle class="CtlPoint" cx="875" cy="900" r="10" />
83
+ <circle class="AutoCtlPoint" cx="775" cy="900" r="9" />
84
+ <text class="Label" x="750" y="945">M600,800 C625,700 725,700 750,800</text>
85
+ <text class="Label" x="750" y="975">S875,900 900,800</text>
86
+ </svg>
@@ -0,0 +1,17 @@
1
+ <?xml version="1.0" standalone="no"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
3
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
+ <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
5
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
6
+ <desc>Example ellipse01 - examples of ellipses</desc>
7
+ <!-- Show outline of canvas using 'rect' element -->
8
+ <rect x="1" y="1" width="1198" height="398"
9
+ fill="none" stroke="blue" stroke-width="2" />
10
+ <g transform="translate(300 200)">
11
+ <ellipse rx="250" ry="100"
12
+ fill="red" />
13
+ </g>
14
+ <ellipse transform="translate(900 200) rotate(30)"
15
+ rx="250" ry="100"
16
+ fill="none" stroke="blue" stroke-width="20" />
17
+ </svg>
@@ -0,0 +1,22 @@
1
+ <?xml version="1.0" standalone="no"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
3
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
+ <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
5
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
6
+ <desc>Example line01 - lines expressed in user coordinates</desc>
7
+ <!-- Show outline of canvas using 'rect' element -->
8
+ <rect x="1" y="1" width="1198" height="398"
9
+ fill="none" stroke="blue" stroke-width="2" />
10
+ <g stroke="green" >
11
+ <line x1="100" y1="300" x2="300" y2="100"
12
+ stroke-width="5" />
13
+ <line x1="300" y1="300" x2="500" y2="100"
14
+ stroke-width="10" />
15
+ <line x1="500" y1="300" x2="700" y2="100"
16
+ stroke-width="15" />
17
+ <line x1="700" y1="300" x2="900" y2="100"
18
+ stroke-width="20" />
19
+ <line x1="900" y1="300" x2="1100" y2="100"
20
+ stroke-width="25" />
21
+ </g>
22
+ </svg>
@@ -0,0 +1,34 @@
1
+ <?xml version='1.0' encoding='ISO-8859-1'?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3
+ <!-- This file was generated by dvisvgm 0.8.4 (i386-redhat-linux-gnu) -->
4
+ <!-- Mon May 31 11:58:48 2010 -->
5
+ <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
6
+ <defs>
7
+ <path d='M3.804 -1.716C3.804 -1.776 3.756 -1.824 3.684 -1.824C3.588 -1.824 3.564 -1.776 3.528 -1.668C3.144 -0.504 2.172 -0.12 1.668 -0.12C1.524 -0.12 1.344 -0.144 1.344 -0.516C1.344 -0.804 1.476 -1.164 1.536 -1.332C2.136 -2.964 2.592 -4.896 2.592 -4.992C2.592 -5.184 2.436 -5.292 2.28 -5.292C2.088 -5.292 1.92 -5.172 1.848 -4.98C1.764 -4.752 1.644 -4.176 1.572 -3.948C1.56 -3.9 1.26 -2.808 1.212 -2.664C1.128 -2.352 1.14 -2.448 1.056 -2.148C0.948 -1.728 0.672 -1.26 0.672 -0.852C0.672 -0.384 0.972 0.12 1.644 0.12C2.976 0.12 3.804 -1.32 3.804 -1.716Z' id='g119'/>
8
+ <path d='M0.372 2.076C0.36 2.136 0.336 2.208 0.336 2.28C0.336 2.46 0.48 2.58 0.66 2.58S1.008 2.46 1.08 2.292C1.128 2.184 1.464 0.744 1.848 -0.732C2.088 -0.132 2.532 0.12 3 0.12C4.356 0.12 5.892 -1.56 5.892 -3.372C5.892 -4.656 5.112 -5.292 4.284 -5.292C3.228 -5.292 1.944 -4.2 1.548 -2.604L0.372 2.076ZM2.988 -0.12C2.172 -0.12 1.968 -1.068 1.968 -1.212C1.968 -1.284 2.268 -2.424 2.304 -2.604C2.916 -4.992 4.092 -5.052 4.272 -5.052C4.812 -5.052 5.112 -4.56 5.112 -3.852C5.112 -3.24 4.788 -2.052 4.584 -1.548C4.224 -0.72 3.6 -0.12 2.988 -0.12Z' id='g126'/>
9
+ <path d='M3.456 -1.728C3.744 -2.4 3.912 -3.06 3.912 -3.228C3.912 -3.42 3.792 -3.48 3.708 -3.48C3.468 -3.48 3.372 -3.168 3.288 -2.76C3.168 -2.22 3.144 -2.016 3.12 -1.776C2.748 -1.188 2.208 -0.672 1.512 -0.672C1.332 -0.672 0.972 -0.672 0.708 -1.092C0.504 -1.404 0.48 -1.872 0.48 -2.04C0.48 -2.616 0.672 -3.624 1.512 -4.848C1.608 -4.992 1.608 -5.016 1.608 -5.04C1.608 -5.1 1.572 -5.16 1.488 -5.16C1.38 -5.16 1.176 -4.836 1.02 -4.56C0.192 -3.156 0.144 -1.92 0.144 -1.524C0.144 -1.248 0.144 0.12 1.356 0.12C2.148 0.12 2.724 -0.456 3.108 -1.056C3.168 -0.312 3.528 0.12 4.2 0.12C6.312 0.12 7.128 -3.468 7.128 -4.488C7.128 -5.148 6.828 -5.292 6.648 -5.292C6.372 -5.292 6.096 -5.016 6.096 -4.764C6.096 -4.62 6.18 -4.536 6.228 -4.488C6.48 -4.236 6.648 -3.888 6.648 -3.42C6.648 -2.388 5.664 -0.672 4.356 -0.672C4.044 -0.672 3.528 -0.732 3.456 -1.728Z' id='g133'/>
10
+ <path d='M5.352 -4.824C5.592 -4.824 5.688 -4.824 5.688 -5.052C5.688 -5.172 5.592 -5.172 5.376 -5.172H4.404C4.632 -6.408 4.8 -7.26 4.896 -7.644C4.968 -7.932 5.22 -8.208 5.532 -8.208C5.784 -8.208 6.036 -8.1 6.156 -7.992C5.688 -7.944 5.544 -7.596 5.544 -7.392C5.544 -7.152 5.724 -7.008 5.952 -7.008C6.192 -7.008 6.552 -7.212 6.552 -7.668C6.552 -8.172 6.048 -8.448 5.52 -8.448C5.004 -8.448 4.5 -8.064 4.26 -7.596C4.044 -7.176 3.924 -6.744 3.648 -5.172H2.844C2.616 -5.172 2.496 -5.172 2.496 -4.956C2.496 -4.824 2.568 -4.824 2.808 -4.824H3.576C3.36 -3.708 2.868 -0.996 2.592 0.288C2.388 1.332 2.208 2.208 1.608 2.208C1.572 2.208 1.224 2.208 1.008 1.98C1.62 1.932 1.62 1.404 1.62 1.392C1.62 1.152 1.44 1.008 1.212 1.008C0.972 1.008 0.612 1.212 0.612 1.668C0.612 2.184 1.14 2.448 1.608 2.448C2.832 2.448 3.336 0.252 3.468 -0.348C3.684 -1.272 4.272 -4.464 4.332 -4.824H5.352Z' id='g1102'/>
11
+ <path d='M5.016 -3L7.404 -5.4C7.536 -5.532 7.56 -5.556 7.56 -5.652C7.56 -5.784 7.452 -5.892 7.32 -5.892C7.224 -5.892 7.176 -5.844 7.068 -5.736L4.668 -3.336L2.256 -5.736C2.124 -5.868 2.1 -5.892 2.004 -5.892C1.884 -5.892 1.764 -5.784 1.764 -5.652C1.764 -5.556 1.812 -5.508 1.92 -5.4L4.308 -3L1.92 -0.612C1.8 -0.492 1.764 -0.42 1.764 -0.348C1.764 -0.216 1.884 -0.108 2.004 -0.108C2.1 -0.108 2.124 -0.132 2.256 -0.264L4.656 -2.664L7.056 -0.264C7.176 -0.144 7.248 -0.108 7.32 -0.108C7.464 -0.108 7.56 -0.216 7.56 -0.348C7.56 -0.444 7.536 -0.468 7.404 -0.6L5.016 -3Z' id='g02'/>
12
+ <path d='M1.908 -8.604C1.908 -8.772 1.908 -9 1.668 -9S1.428 -8.772 1.428 -8.604V2.604C1.428 2.772 1.428 3 1.668 3S1.908 2.772 1.908 2.604V-8.604Z' id='g0106'/>
13
+ <path d='M3.456 -7.692C3.456 -7.968 3.456 -7.98 3.216 -7.98C2.928 -7.656 2.328 -7.212 1.092 -7.212V-6.864C1.368 -6.864 1.968 -6.864 2.628 -7.176V-0.924C2.628 -0.492 2.592 -0.348 1.536 -0.348H1.164V-0C1.488 -0.024 2.652 -0.024 3.048 -0.024S4.596 -0.024 4.92 -0V-0.348H4.548C3.492 -0.348 3.456 -0.492 3.456 -0.924V-7.692Z' id='g249'/>
14
+ </defs>
15
+ <g id='page1' transform='matrix(1.5 0 0 1.5 -83.737 -78)'>
16
+ <use x='57.8248' xlink:href='#g0106' y='63'/>
17
+ <use x='61.1582' xlink:href='#g133' y='63'/>
18
+ <use x='68.9053' xlink:href='#g0106' y='63'/>
19
+ <rect height='0.47998' width='14.4138' x='57.8248' y='67.8781'/>
20
+ <use x='58.162' xlink:href='#g0106' y='79.3495'/>
21
+ <use x='61.4953' xlink:href='#g1102' y='79.3495'/>
22
+ <use x='68.5682' xlink:href='#g0106' y='79.3495'/>
23
+ <use x='76.1053' xlink:href='#g02' y='71.1181'/>
24
+ <use x='105.474' xlink:href='#g249' y='63'/>
25
+ <rect height='0.47998' width='38.2131' x='89.3052' y='67.8781'/>
26
+ <use x='89.3052' xlink:href='#g0106' y='79.3495'/>
27
+ <use x='92.6386' xlink:href='#g119' y='79.3495'/>
28
+ <use x='96.7913' xlink:href='#g0106' y='79.3495'/>
29
+ <use x='102.791' xlink:href='#g02' y='79.3495'/>
30
+ <use x='114.791' xlink:href='#g0106' y='79.3495'/>
31
+ <use x='118.125' xlink:href='#g126' y='79.3495'/>
32
+ <use x='124.185' xlink:href='#g0106' y='79.3495'/>
33
+ </g>
34
+ </svg>
@@ -0,0 +1,41 @@
1
+ <?xml version="1.0"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" viewBox="39 70 318 312" width="318pt" height="26pc">
4
+ <metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
5
+ <dc:date>2010-05-25 19:53Z</dc:date>
6
+ <!-- Produced by OmniGraffle Professional 5.2.1 -->
7
+ </metadata>
8
+ <defs>
9
+ <font-face font-family="Helvetica" font-size="7" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="522.94922" cap-height="717.28516" ascent="770.01953" descent="-229.98047" font-weight="500">
10
+ <font-face-src>
11
+ <font-face-name name="Helvetica"/>
12
+ </font-face-src>
13
+ </font-face>
14
+ <font-face font-family="Helvetica" font-size="18" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="522.94922" cap-height="717.28516" ascent="770.01953" descent="-229.98047" font-weight="500">
15
+ <font-face-src>
16
+ <font-face-name name="Helvetica"/>
17
+ </font-face-src>
18
+ </font-face>
19
+ </defs>
20
+ <g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1">
21
+ <title>Canvas 1</title>
22
+ <rect fill="white" width="559.2" height="782.8"/>
23
+ <g>
24
+ <title>Layer 1</title>
25
+ <rect x="43" y="146" width="208" height="205" fill="white"/>
26
+ <rect x="43" y="146" width="208" height="205" stroke="maroon" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
27
+ <ellipse cx="225.5" cy="179.99998" rx="114.50019" ry="108.000175" fill="yellow"/>
28
+ <ellipse cx="225.5" cy="179.99998" rx="114.50019" ry="108.000175" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
29
+ <text transform="translate(138.89999 172)" fill="#4c4c4c">
30
+ <tspan font-family="Helvetica" font-size="7" font-weight="500" fill="#4c4c4c" x="63.651756" y="6" textLength="45.896484">Tiny Grey Text</tspan>
31
+ <tspan font-family="Helvetica" font-size="7" font-weight="500" fill="#4c4c4c" x="61.50698" y="14" textLength="50.186035">on Yellow Circle</tspan>
32
+ </text>
33
+ <path d="M 107 380 L 231 243 L 355 380 Z" fill="red"/>
34
+ <path d="M 107 380 L 231 243 L 355 380 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
35
+ <text transform="translate(174 316.9)" fill="blue">
36
+ <tspan font-family="Helvetica" font-size="18" font-weight="500" fill="blue" x="6.4716797" y="18" textLength="101.05664">Blue Text on</tspan>
37
+ <tspan font-family="Helvetica" font-size="18" font-weight="500" fill="blue" x="5.474121" y="40" textLength="103.05176">Red Triangle</tspan>
38
+ </text>
39
+ </g>
40
+ </g>
41
+ </svg>
@@ -0,0 +1,42 @@
1
+ <?xml version="1.0" standalone="no"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
3
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
4
+ <svg width="12cm" height="3.5cm" viewBox="0 0 1200 350"
5
+ xmlns="http://www.w3.org/2000/svg">
6
+ <desc>Example opacity01 - opacity property</desc>
7
+ <rect x="1" y="1" width="1198" height="348"
8
+ fill="none" stroke="blue" />
9
+ <!-- Background blue rectangle -->
10
+ <rect x="100" y="100" width="1000" height="150" fill="#0000ff" />
11
+ <!-- Red circles going from opaque to nearly transparent -->
12
+ <circle cx="200" cy="100" r="50" fill="red" opacity="1" />
13
+ <circle cx="400" cy="100" r="50" fill="red" opacity=".8" />
14
+ <circle cx="600" cy="100" r="50" fill="red" opacity=".6" />
15
+ <circle cx="800" cy="100" r="50" fill="red" opacity=".4" />
16
+ <circle cx="1000" cy="100" r="50" fill="red" opacity=".2" />
17
+ <!-- Opaque group, opaque circles -->
18
+ <g opacity="1" >
19
+ <circle cx="182.5" cy="250" r="50" fill="red" opacity="1" />
20
+ <circle cx="217.5" cy="250" r="50" fill="green" opacity="1" />
21
+ </g>
22
+ <!-- Group opacity: .5, opacity circles -->
23
+ <g opacity=".5" >
24
+ <circle cx="382.5" cy="250" r="50" fill="red" opacity="1" />
25
+ <circle cx="417.5" cy="250" r="50" fill="green" opacity="1" />
26
+ </g>
27
+ <!-- Opaque group, semi-transparent green over red -->
28
+ <g opacity="1" >
29
+ <circle cx="582.5" cy="250" r="50" fill="red" opacity=".5" />
30
+ <circle cx="617.5" cy="250" r="50" fill="green" opacity=".5" />
31
+ </g>
32
+ <!-- Opaque group, semi-transparent red over green -->
33
+ <g opacity="1" >
34
+ <circle cx="817.5" cy="250" r="50" fill="green" opacity=".5" />
35
+ <circle cx="782.5" cy="250" r="50" fill="red" opacity=".5" />
36
+ </g>
37
+ <!-- Group opacity .5, semi-transparent green over red -->
38
+ <g opacity=".5" >
39
+ <circle cx="982.5" cy="250" r="50" fill="red" opacity=".5" />
40
+ <circle cx="1017.5" cy="250" r="50" fill="green" opacity=".5" />
41
+ </g>
42
+ </svg>
@@ -0,0 +1,17 @@
1
+ <?xml version="1.0" standalone="no"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
3
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
+ <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
5
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
6
+ <desc>Example polygon01 - star and hexagon</desc>
7
+ <!-- Show outline of canvas using 'rect' element -->
8
+ <rect x="1" y="1" width="1198" height="398"
9
+ fill="none" stroke="blue" stroke-width="2" />
10
+ <polygon fill="red" stroke="blue" stroke-width="10"
11
+ points="350,75 379,161 469,161 397,215
12
+ 423,301 350,250 277,301 303,215
13
+ 231,161 321,161" />
14
+ <polygon fill="lime" stroke="blue" stroke-width="10"
15
+ points="850,75 958,137.5 958,262.5
16
+ 850,325 742,262.6 742,137.5" />
17
+ </svg>
@@ -0,0 +1,18 @@
1
+ <?xml version="1.0" standalone="no"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
3
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
+ <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
5
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
6
+ <desc>Example polyline01 - increasingly larger bars</desc>
7
+ <!-- Show outline of canvas using 'rect' element -->
8
+ <rect x="1" y="1" width="1198" height="398"
9
+ fill="none" stroke="blue" stroke-width="2" />
10
+ <polyline fill="none" stroke="blue" stroke-width="10"
11
+ points="50,375
12
+ 150,375 150,325 250,325 250,375
13
+ 350,375 350,250 450,250 450,375
14
+ 550,375 550,175 650,175 650,375
15
+ 750,375 750,100 850,100 850,375
16
+ 950,375 950,25 1050,25 1050,375
17
+ 1150,375" />
18
+ </svg>
@@ -0,0 +1,28 @@
1
+ <?xml version="1.0" standalone="no"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
3
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
+ <svg width="12cm" height="6cm" viewBox="0 0 1200 600"
5
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
6
+ <title>Example quad01 - quadratic Bezier commands in path data</title>
7
+ <desc>Picture showing a "Q" a "T" command,
8
+ along with annotations showing the control points
9
+ and end points</desc>
10
+ <rect x="1" y="1" width="1198" height="598"
11
+ fill="none" stroke="blue" stroke-width="1" />
12
+ <path d="M200,300 Q400,50 600,300 T1000,300"
13
+ fill="none" stroke="red" stroke-width="5" />
14
+ <!-- End points -->
15
+ <g fill="black" >
16
+ <circle cx="200" cy="300" r="10"/>
17
+ <circle cx="600" cy="300" r="10"/>
18
+ <circle cx="1000" cy="300" r="10"/>
19
+ </g>
20
+ <!-- Control points and lines from end points to control points -->
21
+ <g fill="#888888" >
22
+ <circle cx="400" cy="50" r="10"/>
23
+ <circle cx="800" cy="550" r="10"/>
24
+ </g>
25
+ <path d="M200,300 L400,50 L600,300
26
+ L800,550 L1000,300"
27
+ fill="none" stroke="#888888" stroke-width="2" />
28
+ </svg>
@@ -0,0 +1,12 @@
1
+ <?xml version="1.0" standalone="no"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
3
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
+ <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
5
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
6
+ <desc>Example rect01 - rectangle with sharp corners</desc>
7
+ <!-- Show outline of canvas using 'rect' element -->
8
+ <rect x="1" y="1" width="1198" height="398"
9
+ fill="none" stroke="blue" stroke-width="2"/>
10
+ <rect x="400" y="100" width="400" height="200"
11
+ fill="yellow" stroke="navy" stroke-width="10" />
12
+ </svg>
@@ -0,0 +1,16 @@
1
+ <?xml version="1.0" standalone="no"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
3
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
+ <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
5
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
6
+ <desc>Example rect02 - rounded rectangles</desc>
7
+ <!-- Show outline of canvas using 'rect' element -->
8
+ <rect x="1" y="1" width="1198" height="398"
9
+ fill="none" stroke="blue" stroke-width="2"/>
10
+ <rect x="100" y="100" width="400" height="200" rx="50"
11
+ fill="green" />
12
+ <g transform="translate(700 210) rotate(-30)">
13
+ <rect x="0" y="0" width="400" height="200" rx="50"
14
+ fill="none" stroke="purple" stroke-width="30" />
15
+ </g>
16
+ </svg>
@@ -0,0 +1,38 @@
1
+ <?xml version="1.0" standalone="no"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
3
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
+ <svg width="400px" height="120px" version="1.1"
5
+ xmlns="http://www.w3.org/2000/svg">
6
+ <desc>Example RotateScale - Rotate and scale transforms</desc>
7
+ <g fill="none" stroke="black" stroke-width="3" >
8
+ <!-- Draw the axes of the original coordinate system -->
9
+ <line x1="0" y1="1.5" x2="400" y2="1.5" />
10
+ <line x1="1.5" y1="0" x2="1.5" y2="120" />
11
+ </g>
12
+ <!-- Establish a new coordinate system whose origin is at (50,30)
13
+ in the initial coord. system and which is rotated by 30 degrees. -->
14
+ <g transform="translate(50,30)">
15
+ <g transform="rotate(30)">
16
+ <g fill="none" stroke="red" stroke-width="3" >
17
+ <line x1="0" y1="0" x2="50" y2="0" />
18
+ <line x1="0" y1="0" x2="0" y2="50" />
19
+ </g>
20
+ <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
21
+ ABC (rotate)
22
+ </text>
23
+ </g>
24
+ </g>
25
+ <!-- Establish a new coordinate system whose origin is at (200,40)
26
+ in the initial coord. system and which is scaled by 1.5. -->
27
+ <g transform="translate(200,40)">
28
+ <g transform="scale(1.5)">
29
+ <g fill="none" stroke="red" stroke-width="3" >
30
+ <line x1="0" y1="0" x2="50" y2="0" />
31
+ <line x1="0" y1="0" x2="0" y2="50" />
32
+ </g>
33
+ <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
34
+ ABC (scale)
35
+ </text>
36
+ </g>
37
+ </g>
38
+ </svg>
@@ -0,0 +1,134 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <?DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" type=""?>
3
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="360">
4
+ <g id="scruffy_graph">
5
+ <g transform="translate(0.0, 0.0)" id="background">
6
+ <rect width="600.0" fill="#FFFFFF" x="0" y="0" height="360.0"/>
7
+ </g>
8
+ <g transform="translate(30.0, 7.2)" id="title">
9
+ <text fill="#333333" text-anchor="middle" class="title" font-size="25.2" stroke="none" font-family="" x="270.0" y="25.2" stroke-width="0">Steam</text>
10
+ </g>
11
+ <g transform="translate(12.0, 93.6)" id="view">
12
+ <g>
13
+ <g transform="translate(0.0, 4.752)" id="values">
14
+ <text fill="#333333" text-anchor="end" font-size="16.91712" font-family="" x="43.2" y="211.464">0</text>
15
+ <text fill="#333333" text-anchor="end" font-size="16.91712" font-family="" x="43.2" y="158.598">2,428</text>
16
+ <text fill="#333333" text-anchor="end" font-size="16.91712" font-family="" x="43.2" y="105.732">4,855</text>
17
+ <text fill="#333333" text-anchor="end" font-size="16.91712" font-family="" x="43.2" y="52.866">7,282</text>
18
+ <text fill="#333333" text-anchor="end" font-size="16.91712" font-family="" x="43.2" y="0.0">9,710</text>
19
+ </g>
20
+ <g transform="translate(54.0, 0.0)" id="grid">
21
+ <line x2="486.0" x1="0" y2="0.0" y1="0.0" style="stroke: #333333; stroke-width: 1;"/>
22
+ <line x2="486.0" x1="0" y2="52.866" y1="52.866" style="stroke: #333333; stroke-width: 1;"/>
23
+ <line x2="486.0" x1="0" y2="105.732" y1="105.732" style="stroke: #333333; stroke-width: 1;"/>
24
+ <line x2="486.0" x1="0" y2="158.598" y1="158.598" style="stroke: #333333; stroke-width: 1;"/>
25
+ <line x2="486.0" x1="0" y2="211.464" y1="211.464" style="stroke: #333333; stroke-width: 1;"/>
26
+ <line x2="486.0" x1="0" y2="211.464" y1="211.464" style="stroke: #333333; stroke-width: 1;"/>
27
+ </g>
28
+ <g transform="translate(54.0, 0.0)" id="vgrid">
29
+ <line x2="20.25" x1="20.25" y2="211.464" y1="0" style="stroke: #333333; stroke-width: 1;"/>
30
+ <line x2="60.75" x1="60.75" y2="211.464" y1="0" style="stroke: #333333; stroke-width: 1;"/>
31
+ <line x2="101.25" x1="101.25" y2="211.464" y1="0" style="stroke: #333333; stroke-width: 1;"/>
32
+ <line x2="141.75" x1="141.75" y2="211.464" y1="0" style="stroke: #333333; stroke-width: 1;"/>
33
+ <line x2="182.25" x1="182.25" y2="211.464" y1="0" style="stroke: #333333; stroke-width: 1;"/>
34
+ <line x2="222.75" x1="222.75" y2="211.464" y1="0" style="stroke: #333333; stroke-width: 1;"/>
35
+ <line x2="263.25" x1="263.25" y2="211.464" y1="0" style="stroke: #333333; stroke-width: 1;"/>
36
+ <line x2="303.75" x1="303.75" y2="211.464" y1="0" style="stroke: #333333; stroke-width: 1;"/>
37
+ <line x2="344.25" x1="344.25" y2="211.464" y1="0" style="stroke: #333333; stroke-width: 1;"/>
38
+ <line x2="384.75" x1="384.75" y2="211.464" y1="0" style="stroke: #333333; stroke-width: 1;"/>
39
+ <line x2="425.25" x1="425.25" y2="211.464" y1="0" style="stroke: #333333; stroke-width: 1;"/>
40
+ <line x2="465.75" x1="465.75" y2="211.464" y1="0" style="stroke: #333333; stroke-width: 1;"/>
41
+ <line x2="0" x1="0" y2="211.464" y1="0" style="stroke: #333333; stroke-width: 1;"/>
42
+ <line x2="486.0" x1="486.0" y2="211.464" y1="0" style="stroke: #333333; stroke-width: 1;"/>
43
+ </g>
44
+ <g transform="translate(54.0, 218.592)" id="labels">
45
+ <text fill="#333333" text-anchor="middle" font-size="17.1072" transform="translate(20.25,19.008) rotate(0)" font-family="" x="0" y="0">Jan</text>
46
+ <text fill="#333333" text-anchor="middle" font-size="17.1072" transform="translate(60.75,19.008) rotate(0)" font-family="" x="0" y="0">Feb</text>
47
+ <text fill="#333333" text-anchor="middle" font-size="17.1072" transform="translate(101.25,19.008) rotate(0)" font-family="" x="0" y="0">Mar</text>
48
+ <text fill="#333333" text-anchor="middle" font-size="17.1072" transform="translate(141.75,19.008) rotate(0)" font-family="" x="0" y="0">Apr</text>
49
+ <text fill="#333333" text-anchor="middle" font-size="17.1072" transform="translate(182.25,19.008) rotate(0)" font-family="" x="0" y="0">May</text>
50
+ <text fill="#333333" text-anchor="middle" font-size="17.1072" transform="translate(222.75,19.008) rotate(0)" font-family="" x="0" y="0">Jun</text>
51
+ <text fill="#333333" text-anchor="middle" font-size="17.1072" transform="translate(263.25,19.008) rotate(0)" font-family="" x="0" y="0">Jul</text>
52
+ <text fill="#333333" text-anchor="middle" font-size="17.1072" transform="translate(303.75,19.008) rotate(0)" font-family="" x="0" y="0">Aug</text>
53
+ <text fill="#333333" text-anchor="middle" font-size="17.1072" transform="translate(344.25,19.008) rotate(0)" font-family="" x="0" y="0">Sep</text>
54
+ <text fill="#333333" text-anchor="middle" font-size="17.1072" transform="translate(384.75,19.008) rotate(0)" font-family="" x="0" y="0">Oct</text>
55
+ <text fill="#333333" text-anchor="middle" font-size="17.1072" transform="translate(425.25,19.008) rotate(0)" font-family="" x="0" y="0">Nov</text>
56
+ <text fill="#333333" text-anchor="middle" font-size="17.1072" transform="translate(465.75,19.008) rotate(0)" font-family="" x="0" y="0">Dec</text>
57
+ </g>
58
+ <g transform="translate(54.0, 0.0)" id="graphs">
59
+ <g class="graph_layer" id="component_graphs_graph_0">
60
+ <g transform="translate(-1.05732, -1.05732)">
61
+ <rect width="40.58964" x="1.0125" y="0.0" style="fill: black; fill-opacity: 0.15; stroke: none;" height="213.57864"/>
62
+ <rect width="40.58964" x="2.06982" y="4.22928" style="fill: black; fill-opacity: 0.15; stroke: none;" height="210.40668"/>
63
+ </g>
64
+ <rect width="38.475" fill="#1919B3" x="1.0125" y="0.0" height="211.464" style="opacity: 1.0; stroke: none;"/>
65
+ <g transform="translate(-1.05732, -1.05732)">
66
+ <rect width="40.58964" x="41.5125" y="205.975953861998" style="fill: black; fill-opacity: 0.15; stroke: none;" height="7.60268613800206"/>
67
+ <rect width="40.58964" x="42.56982" y="210.205233861998" style="fill: black; fill-opacity: 0.15; stroke: none;" height="4.43072613800206"/>
68
+ </g>
69
+ <rect width="38.475" fill="#1919B3" x="41.5125" y="205.975953861998" height="5.48804613800206" style="opacity: 1.0; stroke: none;"/>
70
+ <g transform="translate(-1.05732, -1.05732)">
71
+ <rect width="40.58964" x="82.0125" y="29.0300218331617" style="fill: black; fill-opacity: 0.15; stroke: none;" height="184.548618166838"/>
72
+ <rect width="40.58964" x="83.06982" y="33.2593018331617" style="fill: black; fill-opacity: 0.15; stroke: none;" height="181.376658166838"/>
73
+ </g>
74
+ <rect width="38.475" fill="#1919B3" x="82.0125" y="29.0300218331617" height="182.433978166838" style="opacity: 1.0; stroke: none;"/>
75
+ <g transform="translate(-1.05732, -1.05732)">
76
+ <rect width="40.58964" x="122.5125" y="47.9768477857878" style="fill: black; fill-opacity: 0.15; stroke: none;" height="165.601792214212"/>
77
+ <rect width="40.58964" x="123.56982" y="52.2061277857878" style="fill: black; fill-opacity: 0.15; stroke: none;" height="162.429832214212"/>
78
+ </g>
79
+ <rect width="38.475" fill="#1919B3" x="122.5125" y="47.9768477857878" height="163.487152214212" style="opacity: 1.0; stroke: none;"/>
80
+ <g transform="translate(-1.05732, -1.05732)">
81
+ <rect width="40.58964" x="163.0125" y="123.001922966014" style="fill: black; fill-opacity: 0.15; stroke: none;" height="90.5767170339856"/>
82
+ <rect width="40.58964" x="164.06982" y="127.231202966014" style="fill: black; fill-opacity: 0.15; stroke: none;" height="87.4047570339856"/>
83
+ </g>
84
+ <rect width="38.475" fill="#1919B3" x="163.0125" y="123.001922966014" height="88.4620770339856" style="opacity: 1.0; stroke: none;"/>
85
+ <g transform="translate(-1.05732, -1.05732)">
86
+ <rect width="40.58964" x="203.5125" y="79.0539979402678" style="fill: black; fill-opacity: 0.15; stroke: none;" height="134.524642059732"/>
87
+ <rect width="40.58964" x="204.56982" y="83.2832779402678" style="fill: black; fill-opacity: 0.15; stroke: none;" height="131.352682059732"/>
88
+ </g>
89
+ <rect width="38.475" fill="#1919B3" x="203.5125" y="79.0539979402678" height="132.410002059732" style="opacity: 1.0; stroke: none;"/>
90
+ <g transform="translate(-1.05732, -1.05732)">
91
+ <rect width="40.58964" x="244.0125" y="50.3724234809475" style="fill: black; fill-opacity: 0.15; stroke: none;" height="163.206216519053"/>
92
+ <rect width="40.58964" x="245.06982" y="54.6017034809475" style="fill: black; fill-opacity: 0.15; stroke: none;" height="160.034256519053"/>
93
+ </g>
94
+ <rect width="38.475" fill="#1919B3" x="244.0125" y="50.3724234809475" height="161.091576519053" style="opacity: 1.0; stroke: none;"/>
95
+ <g transform="translate(-1.05732, -1.05732)">
96
+ <rect width="40.58964" x="284.5125" y="0.936452317198757" style="fill: black; fill-opacity: 0.15; stroke: none;" height="212.642187682801"/>
97
+ <rect width="40.58964" x="285.56982" y="5.16573231719876" style="fill: black; fill-opacity: 0.15; stroke: none;" height="209.470227682801"/>
98
+ </g>
99
+ <rect width="38.475" fill="#1919B3" x="284.5125" y="0.936452317198757" height="210.527547682801" style="opacity: 1.0; stroke: none;"/>
100
+ <g transform="translate(-1.05732, -1.05732)">
101
+ <rect width="40.58964" x="325.0125" y="209.177314109166" style="fill: black; fill-opacity: 0.15; stroke: none;" height="4.40132589083419"/>
102
+ <rect width="40.58964" x="326.06982" y="213.406594109166" style="fill: black; fill-opacity: 0.15; stroke: none;" height="1.22936589083419"/>
103
+ </g>
104
+ <rect width="38.475" fill="#1919B3" x="325.0125" y="209.177314109166" height="2.28668589083419" style="opacity: 1.0; stroke: none;"/>
105
+ <g transform="translate(-1.05732, -1.05732)">
106
+ <rect width="40.58964" x="365.5125" y="134.979801441813" style="fill: black; fill-opacity: 0.15; stroke: none;" height="78.5988385581874"/>
107
+ <rect width="40.58964" x="366.56982" y="139.209081441813" style="fill: black; fill-opacity: 0.15; stroke: none;" height="75.4268785581874"/>
108
+ </g>
109
+ <rect width="38.475" fill="#1919B3" x="365.5125" y="134.979801441813" height="76.4841985581874" style="opacity: 1.0; stroke: none;"/>
110
+ <g transform="translate(-1.05732, -1.05732)">
111
+ <rect width="40.58964" x="406.0125" y="55.969359423275" style="fill: black; fill-opacity: 0.15; stroke: none;" height="157.609280576725"/>
112
+ <rect width="40.58964" x="407.06982" y="60.198639423275" style="fill: black; fill-opacity: 0.15; stroke: none;" height="154.437320576725"/>
113
+ </g>
114
+ <rect width="38.475" fill="#1919B3" x="406.0125" y="55.969359423275" height="155.494640576725" style="opacity: 1.0; stroke: none;"/>
115
+ <g transform="translate(-1.05732, -1.05732)">
116
+ <rect width="40.58964" x="446.5125" y="38.6994364572606" style="fill: black; fill-opacity: 0.15; stroke: none;" height="174.879203542739"/>
117
+ <rect width="40.58964" x="447.56982" y="42.9287164572606" style="fill: black; fill-opacity: 0.15; stroke: none;" height="171.707243542739"/>
118
+ </g>
119
+ <rect width="38.475" fill="#1919B3" x="446.5125" y="38.6994364572606" height="172.764563542739" style="opacity: 1.0; stroke: none;"/>
120
+ </g>
121
+ <g class="graph_layer" id="component_graphs_graph_1">
122
+ <polyline fill="none" stroke="#FFB200" style="" stroke-width="1" points="20.25,40.311005561277 60.75,163.160482801236 101.25,175.356140885685 141.75,28.0064576725026 182.25,135.829141915551 222.75,208.480419361483 263.25,147.066569721936 303.75,19.4694970133883 344.25,41.2692358393409 384.75,54.3142343975283 425.25,191.51538784758 465.75,204.821721936148"/>
123
+ </g>
124
+ </g>
125
+ </g>
126
+ </g>
127
+ <g transform="translate(30.0, 46.8)" id="legend">
128
+ <rect width="10.8" fill="#1919B3" x="75.6" y="0" height="10.8"/>
129
+ <text fill="#333333" font-size="15.552" font-family="" x="95.04" y="11.664" style="color: #333333">This Year (2008)</text>
130
+ <rect width="10.8" fill="#FFB200" x="280.8" y="0" height="10.8"/>
131
+ <text fill="#333333" font-size="15.552" font-family="" x="300.24" y="11.664" style="color: #333333">Last Year (2007)</text>
132
+ </g>
133
+ </g>
134
+ </svg>