Flash Vector Graphics to SVG & HTML5 Canvas: Automated AST Parsing & Bezier Math

Flash's proprietary SWF format stored vector graphics with extreme mathematical efficiency using twips (1/20th of a pixel) and quadratic Bezier curves. Porting these shape dictionaries to modern SVG paths or HTML5 Canvas 2D contexts requires algorithmic curve translation and gradient fill matrix mapping.

1. Quadratic to Cubic Bezier Curve Math

HTML5 Canvas and SVG <path> elements natively use cubic Bezier curves defined by two control points ($CP_1, CP_2$) and start/end coordinates ($P_0, P_3$). Converting a Flash quadratic Bezier curve with single control point $QP$ follows exact mathematical derivation:

// Quadratic to Cubic Bezier Conversion Algorithm
function quadraticToCubic(p0, qp, p1) {
  const cp1 = {
    x: p0.x + (2 / 3) * (qp.x - p0.x),
    y: p0.y + (2 / 3) * (qp.y - p0.y)
  };
  const cp2 = {
    x: p1.x + (2 / 3) * (qp.x - p1.x),
    y: p1.y + (2 / 3) * (qp.y - p1.y)
  };
  return { cp1, cp2, p3: p1 };
}