CONTROL

Svg

Svg renders portable inline vector paths from one target-neutral Dowe source tree.

SVG TO DOWE

Convert vector source in the view

Paste SVG XML, run the view function, and copy the generated Svg and Path declarations.

SVG source

PREVIEW

dowe

The preview and generated Path declarations preserve original colors and inherited evenodd fill rules, so compound-path holes remain visible.

dowe
signal svgSource value:"<svg viewBox='0 0 24 24' style='fill-rule:evenodd'><path d='M2 2H22V22H2ZM7 7H17V17H7Z'/></svg>"
signal doweSvg value:""
signal svgPreview value:""

fn convertSvg
  set doweSvg source:parse.svg value:svgSource fallback:"" colors:"original" format:"source"
  set svgPreview source:parse.svg value:svgSource fallback:"" colors:"original" format:"data"

Textarea bind:svgSource label:"SVG source" rows:12
Button onClick:convertSvg
  "Convert to Dowe"
Code language:"dowe" template:true content:"{doweSvg}"
Svg data:svgPreview w:"full" h:48

AUTHORING CONTRACT

One surface, direct Path children

Svg requires a viewBox and one or more direct Path children. Path is structural and cannot be used outside Svg.

Svg prop
Accepted value
Default

No data

There are no records to display

Path prop
Accepted value
Default

No data

There are no records to display

dowe
Svg viewBox:"0 0 120 72" w:32 h:20
  Path d:"M42 24H60C70 24 78 29 82 36L72 48L62 34L52 48L42 36Z" fill:"#1f3a60"
  Path d:"M60 4A32 32 0 1 1 60 68A32 32 0 1 1 60 4ZM60 10A26 26 0 1 0 60 62A26 26 0 1 0 60 10Z" fill:"#6bc66e" fillRule:"evenodd"

PORTABLE SUBSET

Paths, fill rules, and affine matrices

parse.svg imports svg, g, path, and non-rounded rect elements; inherits nonzero or evenodd fill-rule; and flattens matrix(...) transforms. It ignores unsupported drawing elements and never executes scripts, DTD, external entities, or user JavaScript.

Generated source writes inherited evenodd as Path fillRule, while preview data uses evenOdd. Web, Android Canvas, and iOS SwiftUI consume the same normalized rule and geometry.