svg-cheat-sheet.jade

//- templated by jade
svg(width=640 height=480 style="background-color:grey;")
  circle(
    cx=30 cy=30
    r=25
    stroke="grey" stroke-width=1
    fill="wheat")
  rect(
    width=50 height=50
    x=60 y=10
    style="fill:red;stroke:black;stroke-width:5;opacity:0.5")
  ellipse(
    cx=170 cy=50
    rx=40 ry=50
    style="fill:yellow;stroke:purple;stroke-width:2")
  line(
    x1=0 y1=100
    x2=200 y2=120
    style="stroke:rgb(255,0,0);stroke-width:2")
  polyline(
    points="20,20 40,25 60,40 80,120 120,140 200,180"
    style="fill:none;stroke:black;stroke-width:3")

  polygon(
    points="200,10 250,190 160,210"
    style="fill:lime;stroke:purple;stroke-width:1")

  //- text
  text(x="0" y="205" fill="green") DVD! DVD!

  //- multiline text
  text(x="0" y="0" fill="green")
    tspan(x="10" y="45") uhe
    tspan(x="10" y="65") aha

  //- embed html
  foreignObject(class="node" x="300" y="22" width="200" height="300")
    body
      //- document.querySelector(query) is reachable here!
      div.inner-svg innner div

  //- group
  g(style="-webkit-transform: matrix(1,-0.2,0,1,0,0);")
    circle(cx=190 cy=80 r=25 stroke="black" fill="wheat")
    circle(cx=220 cy=80 r=25 stroke="black" fill="wheat")

  //- nested svg node
  svg(x=200 y=200)
    rect(
      x=0 y=0
      width=200 height=200
      style="fill:red;stroke:black;stroke-width:1;opacity:0.5")

  //- M = moveto
  //- L = lineto
  //- H = horizontal lineto
  //- V = vertical lineto
  //- C = curveto
  //- S = smooth curveto
  //- Q = quadratic Bézier curve
  //- T = smooth quadratic Bézier curveto
  //- A = elliptical Arc
  //- Z = closepath
  path(
    d="M250 0 L255 100 L265 100 Z"
    )

svg-cheat-sheet.md