Merge pull request #35 from guzba/master

svg stuff

pixie.nimble

@@ -7,7 +7,7 @@ srcDir = "src"
 
 requires "nim >= 1.2.6"
 requires "vmath >= 0.4.0"
-requires "chroma >= 0.1.5"
+requires "chroma >= 0.2.1"
 requires "zippy >= 0.3.5"
 requires "flatty >= 0.1.2"
 requires "nimsimd >= 0.4.6"

src/pixie/fileformats/svg.nim

@@ -1,24 +1,54 @@
 ## Load and Save SVG files.
 
-import chroma, pixie/images, pixie/common, pixie/paths, vmath, xmlparser, xmltree,
+import chroma, pixie/images, pixie/common, pixie/paths, vmath, xmlparser,
-  strutils, strutils, bumpy
+  xmltree, strutils, strutils, bumpy
 
 const svgSignature* = "<?xml"
 
+type Ctx = object
+  fill, stroke: ColorRGBA
+  strokeWidth: float32
+  transform: Mat3
+
 template failInvalid() =
   raise newException(PixieError, "Invalid SVG data")
 
-proc draw(img: Image, matStack: var seq[Mat3], xml: XmlNode) =
+proc initCtx(): Ctx =
-  if xml.tag != "g":
+  result.fill = parseHtmlColor("black").rgba
-    raise newException(PixieError, "Unsupported SVG tag: " & xml.tag & ".")
+  result.strokeWidth = 1
+  result.transform = mat3()
+
+proc decodeCtx(inherited: Ctx, node: XmlNode): Ctx =
+  result = inherited
 
   let
-    fill = xml.attr("fill")
+    fill = node.attr("fill")
-    stroke = xml.attr("stroke")
+    stroke = node.attr("stroke")
-    strokeWidth = xml.attr("stroke-width")
+    strokeWidth = node.attr("stroke-width")
-    transform = xml.attr("transform")
+    transform = node.attr("transform")
 
-  if transform != "":
+  if fill == "":
+    discard # Inherit
+  elif fill == "none":
+    result.fill = ColorRGBA()
+  else:
+    result.fill = parseHtmlColor(fill).rgba
+
+  if stroke == "":
+    discard # Inherit
+  elif stroke == "none":
+    result.stroke = ColorRGBA()
+  else:
+    result.stroke = parseHtmlColor(stroke).rgba
+
+  if strokeWidth == "":
+    discard # Inherit
+  else:
+    result.strokeWidth = parseFloat(strokeWidth)
+
+  if transform == "":
+    discard # Inherit
+  else:
     if transform.startsWith("matrix("):
       let arr = transform[7..^2].split(",")
       if arr.len != 6:
@@ -30,45 +60,71 @@ proc draw(img: Image, matStack: var seq[Mat3], xml: XmlNode) =
       m[4] = parseFloat(arr[3])
       m[6] = parseFloat(arr[4])
       m[7] = parseFloat(arr[5])
-      matStack.add(matStack[^1] * m)
+      result.transform = result.transform * m
     else:
       raise newException(
-        PixieError, "Unsupported SVG transform: " & transform & ".")
+        PixieError, "Unsupported SVG transform: " & transform & "."
+      )
 
-  for child in xml:
+proc draw(
-    if child.tag == "path":
+  img: Image, node: XmlNode, ctxStack: var seq[Ctx]
-      let d = child.attr("d")
+) =
+  if node.kind != xnElement:
+    # Skip <!-- comments -->
+    return
 
-      if fill != "none" and fill != "":
+  case node.tag:
-        let
+  of "title":
-          fillColor = parseHtmlColor(fill).rgba
+    discard
-          (bounds, fillImg) = fillPathBounds(d, fillColor, matStack[^1])
+  of "desc":
-        img.draw(fillImg, bounds.xy)
+    discard
-
+  of "g":
-      if stroke != "none" and stroke != "":
+    let ctx = decodeCtx(ctxStack[^1], node)
-        let
+    ctxStack.add(ctx)
-          strokeColor = parseHtmlColor(stroke).rgba
+    for child in node:
-          strokeWidth =
+      img.draw(child, ctxStack)
-            if strokeWidth == "": 1.0 # Default stroke width is 1px
+    discard ctxStack.pop()
-            else: parseFloat(strokeWidth)
+  of "path":
-          (bounds, strokeImg) =
+    let
-            strokePathBounds(d, strokeColor, strokeWidth, matStack[^1])
+      d = node.attr("d")
-        img.draw(strokeImg, bounds.xy)
+      ctx = decodeCtx(ctxStack[^1], node)
-    else:
+    if ctx.fill != ColorRGBA():
-      img.draw(matStack, child)
+      let (bounds, fillImg) = fillPathBounds(d, ctx.fill, ctx.transform)
-
+      img.draw(fillImg, bounds.xy)
-  if transform != "":
+    if ctx.stroke != ColorRGBA():
-    discard matStack.pop()
+      let (bounds, strokeImg) = strokePathBounds(
+        d, ctx.stroke, ctx.strokeWidth, ctx.transform
+      )
+      img.draw(strokeImg, bounds.xy)
+  of "rect":
+    let
+      ctx = decodeCtx(ctxStack[^1], node)
+      x = parseFloat(node.attr("x"))
+      y = parseFloat(node.attr("y"))
+      width = parseFloat(node.attr("width"))
+      height = parseFloat(node.attr("height"))
+      path = newPath()
+    path.moveTo(x, y)
+    path.lineTo(x + width, x)
+    path.lineTo(x + width, y + height)
+    path.lineTo(x, y + height)
+    path.closePath()
+    if ctx.fill != ColorRGBA():
+      img.fillPath(path, ctx.fill, ctx.transform)
+    if ctx.stroke != ColorRGBA():
+      img.strokePath(path, ctx.stroke, ctx.strokeWidth, ctx.transform)
+  else:
+    raise newException(PixieError, "Unsupported SVG tag: " & node.tag & ".")
 
 proc decodeSvg*(data: string): Image =
   ## Render SVG file and return the image.
   try:
-    let xml = parseXml(data)
+    let root = parseXml(data)
-    if xml.tag != "svg":
+    if root.tag != "svg":
       failInvalid()
 
     let
-      viewBox = xml.attr("viewBox")
+      viewBox = root.attr("viewBox")
       box = viewBox.split(" ")
     if parseInt(box[0]) != 0 or parseInt(box[1]) != 0:
       failInvalid()
@@ -76,11 +132,11 @@ proc decodeSvg*(data: string): Image =
     let
       width = parseInt(box[2])
       height = parseInt(box[3])
+    var ctxStack = @[initCtx()]
     result = newImage(width, height)
-    var matStack = @[mat3()]
+    for node in root:
-    for n in xml:
+      result.draw(node, ctxStack)
-      result.draw(matStack, n)
   except PixieError as e:
     raise e
   except:
-     raise newException(PixieError, "Unable to load SVG")
+    raise newException(PixieError, "Unable to load SVG")

tests/images/svg/triangle01.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" standalone="no"?>
+<svg width="4cm" height="4cm" 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>
+  <rect x="1" y="1" width="398" height="398"
+        fill="none" stroke="blue" />
+  <path d="M 100 100 L 300 100 L 200 300 z"
+        fill="red" stroke="blue" stroke-width="3" />
+</svg>
+

tests/test_svg.nim

@@ -1,9 +1,15 @@
-import pixie/fileformats/svg, pixie
+import pixie/fileformats/svg, pixie, strformat
 
-let
+const files = [
-  original = readFile("tests/images/svg/Ghostscript_Tiger.svg")
+  "triangle01",
-  image = decodeSvg(original)
+  "Ghostscript_Tiger"
-  gold = readImage("tests/images/svg/Ghostscript_Tiger.png")
+]
 
-doAssert image.data == gold.data
+for file in files:
-# image.writeFile("tests/images/svg/Ghostscript_Tiger.png")
+  let
+    original = readFile(&"tests/images/svg/{file}.svg")
+    image = decodeSvg(original)
+    gold = readImage(&"tests/images/svg/{file}.png")
+
+  doAssert image.data == gold.data
+  # image.writeFile(&"{file}.png")