Draw with SVG commands

[liuguangxi]

As in the previous discussion #553, the drawing function in Typst is more or less limited. I have an idea that we can generate SVG codes in Typst and show it with image.decode.

Here is an example:

#import "@preview/cetz:0.2.2"

#set page(width: auto, height: auto, margin: 0.5cm)

#let windmill(color1: rgb(230, 230, 70), color2: rgb(20, 180, 180)) = {
  let code = ""
  code += "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"200\" height=\"200\" viewBox=\"-100 -100 200 200\">"
  code += "<defs>"
  code += "<clipPath id=\"ball\">"
  code += "<circle cx=\"0\" cy=\"0\" r=\"70\" />"
  code += "</clipPath>"
  code += "<linearGradient id=\"grad1\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">"
  code += "<stop offset=\"0%\" style=\"stop-color: COLOR1; stop-opacity: 1\"/>"
  code += "<stop offset=\"100%\" style=\"stop-color: COLOR2; stop-opacity: 1\"/>"
  code += "</linearGradient>"
  code += "<filter id=\"f1\" x=\"0\" y=\"0\" width=\"150%\" height=\"150%\">"
  code += "<feOffset result=\"offOut\" in=\"SourceAlpha\" dx=\"5\" dy=\"5\" />"
  code += "<feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"2\" />"
  code += "<feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" />"
  code += "</filter>"
  code += "</defs>"
  code += "<path clip-path=\"url(#ball)\" fill=\"url(#grad1)\" filter=\"url(#f1)\" d=\"M 5 -5 L 5 -40 L 70 -50 L 90 -5 Z M 5 5 L 40 5 L 50 70 L 5 90 Z M -5 5 L -5 40 L -70 50 L -90 5 M -5 -5 L -40 -5 L -50 -70 L -5 -90 Z\"/>"
  code += "</svg>"

  code = code.replace("COLOR1", color1.to-hex())
  code = code.replace("COLOR2", color2.to-hex())

  image.decode(code)
}

#cetz.canvas(length: 1pt, {
  import cetz.draw: *

  content((0, 0), windmill(color1: luma(240), color2: luma(100)))
  for i in range(6) {
    content((150*calc.cos(i*calc.pi/3+calc.pi/6), 150*calc.sin(i*calc.pi/3+calc.pi/6)), windmill(color1: color.hsv(i*60deg+60deg, 80%, 70%), color2: color.hsv(i*60deg, 80%, 70%)))
  }
})

And the output is:

Note that there are some drawing features in SVG that are not yet supported in Typst, such as multiple closed subpaths in the path object, clip path, filter and so on. As SVG code is just a string, drawing properties are easy to generate and modify dynamically. The decoded SVG objects can be easily integrated with CeTZ.

I'm wondering if some drawing functionalities or even drawing packages can be implemented indirectly by generating SVG codes, although this may seem a little unusual.

[fenjalien]

I played around with the idea when svg decoding first came out and left my thoughts in #122. Essentially the cons outway the pros