svg masters + diffs

tests/images/svg/circle01.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" standalone="no"?>
-<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+<svg viewBox="0 0 1200 400"
      xmlns="http://www.w3.org/2000/svg" version="1.1">
   <desc>Example circle01 - circle filled with red and stroked with blue</desc>
 

tests/images/svg/dashes.svg

@@ -1,20 +1,22 @@
-<svg viewBox="0 0 600 200" transform="scale(20, 20)" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 600 200" xmlns="http://www.w3.org/2000/svg">
+  <rect width="600" height="200" fill="white"/>
+
   <!-- No dashes nor gaps -->
-  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />
+  <line x1="0" y1="20" x2="600" y2="20" stroke="black" stroke-width="20" />
 
   <!-- Dashes and gaps of the same size -->
-  <line x1="0" y1="3" x2="30" y2="3" stroke="black"
-          stroke-dasharray="4" />
+  <line x1="0" y1="60" x2="600" y2="60" stroke="black"
+          stroke-dasharray="80" stroke-width="20" />
 
   <!-- Dashes and gaps of different sizes -->
-  <line x1="0" y1="5" x2="30" y2="5" stroke="black"
-          stroke-dasharray="4 1" />
+  <line x1="0" y1="100" x2="600" y2="100" stroke="black"
+          stroke-dasharray="80 20" stroke-width="20" />
 
   <!-- Dashes and gaps of various sizes with an odd number of values -->
-  <line x1="0" y1="7" x2="30" y2="7" stroke="black"
-          stroke-dasharray="4 1 2" />
+  <line x1="0" y1="140" x2="600" y2="140" stroke="black"
+          stroke-dasharray="80 20 40" stroke-width="20" />
 
   <!-- Dashes and gaps of various sizes with an even number of values -->
-  <line x1="0" y1="9" x2="30" y2="9" stroke="black"
-          stroke-dasharray="4 1 2 3" />
+  <line x1="0" y1="180" x2="600" y2="180" stroke="black"
+          stroke-dasharray="80 20 40 60" stroke-width="20" />
 </svg>

tests/images/svg/ellipse01.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" standalone="no"?>
-<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+<svg viewBox="0 0 1200 400"
      xmlns="http://www.w3.org/2000/svg" version="1.1">
   <desc>Example ellipse01 - examples of ellipses</desc>
 

tests/images/svg/line01.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" standalone="no"?>
-<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+<svg viewBox="0 0 1200 400"
      xmlns="http://www.w3.org/2000/svg" version="1.1">
   <desc>Example line01 - lines expressed in user coordinates</desc>
 

tests/images/svg/miterlimit.svg

@@ -1,27 +1,24 @@
-<svg viewBox="0 0 760 600" transform="scale(20, 20)" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 760 600" xmlns="http://www.w3.org/2000/svg">
+  <rect width="760" height="600" fill="white"/>
+
   <!-- Impact of the default miter limit -->
-  <path stroke="black" fill="none" stroke-linejoin="miter" id="p1" d="M1,9 l7   ,-3 l7   ,3
-           m2,0 l3.5 ,-3 l3.5 ,3
-           m2,0 l2   ,-3 l2   ,3
-           m2,0 l0.75,-3 l0.75,3
-           m2,0 l0.5 ,-3 l0.5 ,3"></path>
+  <path stroke="black" fill="none" stroke-linejoin="miter" stroke-width="20" id="p1" d="M20,180 l140   ,-60 l140   ,60
+           m40,0 l70 ,-60 l140 ,60
+           m40,0 l40   ,-60 l40   ,60
+           m40,0 l15,-60 l30,60
+           m40,0 l10 ,-60 l20 ,60"></path>
 
   <!-- Impact of the smallest miter limit (1) -->
-  <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="1" id="p2" d="M1,19 l7   ,-3 l7   ,3
-           m2, 0 l3.5 ,-3 l3.5 ,3
-           m2, 0 l2   ,-3 l2   ,3
-           m2, 0 l0.75,-3 l0.75,3
-           m2, 0 l0.5 ,-3 l0.5 ,3"></path>
+  <path stroke="black" fill="none" stroke-linejoin="miter" stroke-width="20" stroke-miterlimit="1" id="p2" d="M20,380 l140   ,-60 l140   ,60
+           m40, 0 l70 ,-60 l140 ,60
+           m40, 0 l40   ,-60 l40   ,60
+           m40, 0 l15,-60 l15,60
+           m40, 0 l10 ,-60 l10 ,60"></path>
 
   <!-- Impact of a large miter limit (8) -->
-  <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="8" id="p3" d="M1,29 l7   ,-3 l7   ,3
-           m2, 0 l3.5 ,-3 l3.5 ,3
-           m2, 0 l2   ,-3 l2   ,3
-           m2, 0 l0.75,-3 l0.75,3
-           m2, 0 l0.5 ,-3 l0.5 ,3"></path>
-
-  <!-- the following pink lines highlight the position of the path for each stroke -->
-  <path stroke="pink" fill="none" stroke-width="0.05" d="M1, 9 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3
-           M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3
-           M1,29 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3"></path>
+  <path stroke="black" fill="none" stroke-linejoin="miter" stroke-width="20" stroke-miterlimit="8" id="p3" d="M20,580 l140   ,-60 l140   ,60
+           m40, 0 l70 ,-60 l140 ,60
+           m40, 0 l40   ,-60 l40   ,60
+           m40, 0 l15,-60 l15,60
+           m40, 0 l10 ,-60 l10 ,60"></path>
 </svg>

tests/images/svg/polygon01.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" standalone="no"?>
-<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+<svg viewBox="0 0 1200 400"
      xmlns="http://www.w3.org/2000/svg" version="1.1">
   <desc>Example polygon01 - star and hexagon</desc>
 

tests/images/svg/polyline01.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" standalone="no"?>
-<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+<svg viewBox="0 0 1200 400"
      xmlns="http://www.w3.org/2000/svg" version="1.1">
   <desc>Example polyline01 - increasingly larger bars</desc>
 

tests/images/svg/quad01.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" standalone="no"?>
-<svg width="12cm" height="6cm" viewBox="0 0 1200 600"
+<svg viewBox="0 0 1200 600"
      xmlns="http://www.w3.org/2000/svg" version="1.1">
   <title>Example quad01 - quadratic Bézier commands in path data</title>
   <desc>Picture showing a "Q" a "T" command,

tests/images/svg/rect01.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" standalone="no"?>
-<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+<svg viewBox="0 0 1200 400"
      xmlns="http://www.w3.org/2000/svg" version="1.1">
   <desc>Example rect01 - rectangle with sharp corners</desc>
 

tests/images/svg/rect02.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" standalone="no"?>
-<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+<svg viewBox="0 0 1200 400"
      xmlns="http://www.w3.org/2000/svg" version="1.1">
   <desc>Example rect02 - rounded rectangles</desc>
 

tests/images/svg/triangle01.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" standalone="no"?>
-<svg width="4cm" height="4cm" viewBox="0 0 400 400"
+<svg viewBox="0 0 400 400"
      xmlns="http://www.w3.org/2000/svg" version="1.1">
   <title>Example triangle01- simple example of a 'path'</title>
   <desc>A path that draws a triangle</desc>

tests/test_svg.nim

@@ -16,9 +16,13 @@ const files = [
   "dashes"
 ]
 
-for file in files:
+proc doDiff(rendered: Image, name: string) =
+  rendered.writeFile(&"tests/images/svg/rendered/{name}.png")
   let
-    original = readFile(&"tests/images/svg/{file}.svg")
-    image = decodeSvg(original)
+    master = readImage(&"tests/images/svg/masters/{name}.png")
+    (diffScore, diffImage) = diff(master, rendered)
+  echo &"{name} score: {diffScore}"
+  diffImage.writeFile(&"tests/images/svg/diffs/{name}.png")
 
-  image.writeFile(&"tests/images/svg/rendered/{file}.png")
+for file in files:
+  doDiff(decodeSvg(readFile(&"tests/images/svg/{file}.svg")), file)