@llc3233149/core 0.9.0

package/src/svg-export/index.ts

@@ -0,0 +1,427 @@
+import { computeContentBounds } from '../render-image'
+import {
+  round,
+  geometryBlobToSVGPath,
+  vectorNetworkToSVGPaths,
+  makePolygonPoints,
+  hasRadius,
+  roundedRectPath,
+  arcPath
+} from './paths'
+import {
+  nextDefId,
+  formatColor,
+  createFilterDef,
+  resolveFill,
+  SVG_STROKE_CAP,
+  SVG_STROKE_JOIN,
+  SVG_BLEND_MODE
+} from './defs'
+
+export { geometryBlobToSVGPath, vectorNetworkToSVGPaths } from './paths'
+
+import { svg, renderSVGNode } from '../svg-node'
+
+import type { SVGNode } from '../svg-node'
+import type { SceneGraph, SceneNode, Fill, Stroke, CharacterStyleOverride } from '../scene-graph'
+import type { SVGExportContext } from './defs'
+
+// --- Node rendering ---
+
+function vectorShapeElements(
+  node: SceneNode,
+  common: Record<string, string | number | undefined>,
+  strokeAttrs: Record<string, string | number | undefined>
+): SVGNode[] {
+  const elements: SVGNode[] = []
+  if (node.fillGeometry.length > 0) {
+    for (const geo of node.fillGeometry) {
+      const d = geometryBlobToSVGPath(geo.commandsBlob)
+      if (d) {
+        elements.push(
+          svg('path', {
+            d,
+            'fill-rule': geo.windingRule === 'EVENODD' ? 'evenodd' : undefined,
+            ...common
+          })
+        )
+      }
+    }
+  } else if (node.vectorNetwork) {
+    const paths = vectorNetworkToSVGPaths(node.vectorNetwork)
+    for (const d of paths) {
+      elements.push(svg('path', { d, ...common }))
+    }
+  }
+  if (node.strokeGeometry.length > 0 && strokeAttrs.stroke && strokeAttrs.stroke !== 'none') {
+    for (const geo of node.strokeGeometry) {
+      const d = geometryBlobToSVGPath(geo.commandsBlob)
+      if (d) {
+        elements.push(
+          svg('path', {
+            d,
+            fill: strokeAttrs.stroke as string,
+            'fill-opacity': strokeAttrs['stroke-opacity'],
+            stroke: 'none'
+          })
+        )
+      }
+    }
+  }
+  return elements.length > 0
+    ? elements
+    : [svg('rect', { width: round(node.width), height: round(node.height), ...common })]
+}
+
+function nodeShapeElements(
+  node: SceneNode,
+  fillAttr: string | null,
+  strokeAttrs: Record<string, string | number | undefined>
+): SVGNode[] {
+  const common: Record<string, string | number | undefined> = {
+    fill: fillAttr ?? 'none',
+    ...strokeAttrs
+  }
+
+  switch (node.type) {
+    case 'ELLIPSE': {
+      if (node.arcData) {
+        return [svg('path', { d: arcPath(node), ...common })]
+      }
+      return [
+        svg('ellipse', {
+          cx: round(node.width / 2),
+          cy: round(node.height / 2),
+          rx: round(node.width / 2),
+          ry: round(node.height / 2),
+          ...common
+        })
+      ]
+    }
+
+    case 'LINE':
+      return [
+        svg('line', {
+          x1: 0,
+          y1: 0,
+          x2: round(node.width),
+          y2: round(node.height),
+          fill: 'none',
+          ...strokeAttrs
+        })
+      ]
+
+    case 'STAR':
+    case 'POLYGON':
+      return [svg('polygon', { points: makePolygonPoints(node), ...common })]
+
+    case 'VECTOR':
+      return vectorShapeElements(node, common, strokeAttrs)
+
+    default: {
+      if (hasRadius(node)) {
+        if (node.independentCorners) {
+          return [svg('path', { d: roundedRectPath(node), ...common })]
+        }
+        return [
+          svg('rect', {
+            width: round(node.width),
+            height: round(node.height),
+            rx: round(node.cornerRadius),
+            ry: round(node.cornerRadius),
+            ...common
+          })
+        ]
+      }
+      return [svg('rect', { width: round(node.width), height: round(node.height), ...common })]
+    }
+  }
+}
+
+function styleOverrideToTspanAttrs(style: CharacterStyleOverride): Record<string, string | number | undefined> {
+  const attrs: Record<string, string | number | undefined> = {}
+  if (style.fontFamily) attrs['font-family'] = style.fontFamily
+  if (style.fontSize) attrs['font-size'] = style.fontSize
+  if (style.fontWeight) attrs['font-weight'] = style.fontWeight
+  if (style.italic) attrs['font-style'] = 'italic'
+  if (style.letterSpacing) attrs['letter-spacing'] = round(style.letterSpacing)
+  if (style.textDecoration === 'UNDERLINE') attrs['text-decoration'] = 'underline'
+  if (style.textDecoration === 'STRIKETHROUGH') attrs['text-decoration'] = 'line-through'
+  return attrs
+}
+
+function renderTextNode(node: SceneNode, fillAttr: string | null): SVGNode {
+  const attrs: Record<string, string | number | undefined> = {
+    'font-family': node.fontFamily || undefined,
+    'font-size': node.fontSize || undefined,
+    'font-weight': node.fontWeight !== 400 ? node.fontWeight : undefined,
+    'font-style': node.italic ? 'italic' : undefined,
+    fill: fillAttr ?? undefined,
+    'text-anchor':
+      node.textAlignHorizontal === 'CENTER'
+        ? 'middle'
+        : (node.textAlignHorizontal === 'RIGHT'
+          ? 'end'
+          : undefined),
+    'text-decoration':
+      node.textDecoration === 'UNDERLINE'
+        ? 'underline'
+        : (node.textDecoration === 'STRIKETHROUGH'
+          ? 'line-through'
+          : undefined),
+    'letter-spacing': node.letterSpacing ? round(node.letterSpacing) : undefined
+  }
+
+  const x =
+    node.textAlignHorizontal === 'CENTER'
+      ? round(node.width / 2)
+      : (node.textAlignHorizontal === 'RIGHT'
+        ? round(node.width)
+        : 0)
+  const y = node.fontSize || 14
+
+  if (node.styleRuns.length > 0) {
+    const spans: SVGNode[] = []
+    let pos = 0
+    for (const run of node.styleRuns) {
+      const text = node.text.slice(pos, pos + run.length)
+      pos += run.length
+      spans.push(svg('tspan', styleOverrideToTspanAttrs(run.style), text))
+    }
+
+    return svg('text', { x, y, ...attrs }, ...spans)
+  }
+
+  return svg('text', { x, y, ...attrs }, node.text)
+}
+
+// --- Main recursive renderer ---
+
+function buildTransformAttr(node: SceneNode): string | undefined {
+  const transforms: string[] = []
+  if (node.x !== 0 || node.y !== 0) transforms.push(`translate(${round(node.x)}, ${round(node.y)})`)
+  if (node.rotation !== 0) {
+    transforms.push(
+      `rotate(${round(node.rotation)}, ${round(node.width / 2)}, ${round(node.height / 2)})`
+    )
+  }
+  if (node.flipX || node.flipY) {
+    const tx = node.flipX ? node.width : 0
+    const ty = node.flipY ? node.height : 0
+    const sx = node.flipX ? -1 : 1
+    const sy = node.flipY ? -1 : 1
+    transforms.push(`translate(${round(tx)}, ${round(ty)}) scale(${sx}, ${sy})`)
+  }
+  return transforms.length > 0 ? transforms.join(' ') : undefined
+}
+
+function buildGroupAttrs(
+  node: SceneNode,
+  ctx: SVGExportContext
+): { attrs: Record<string, string | number | undefined>; clipId?: string } {
+  const attrs: Record<string, string | number | undefined> = {}
+
+  const transform = buildTransformAttr(node)
+  if (transform) attrs.transform = transform
+
+  if (node.opacity < 1) attrs.opacity = round(node.opacity)
+
+  const blend = SVG_BLEND_MODE[node.blendMode]
+  if (blend && blend !== 'normal' && node.blendMode !== 'PASS_THROUGH') {
+    attrs.style = `mix-blend-mode: ${blend}`
+  }
+
+  const filterDef = createFilterDef(node.effects, ctx)
+  if (filterDef) {
+    ctx.defs.push(filterDef.node)
+    attrs.filter = `url(#${filterDef.id})`
+  }
+
+  let clipId: string | undefined
+  if (node.clipsContent && node.childIds.length > 0) {
+    clipId = nextDefId(ctx, 'clip')
+    ctx.defs.push(
+      svg(
+        'clipPath',
+        { id: clipId },
+        svg('rect', { width: round(node.width), height: round(node.height) })
+      )
+    )
+  }
+
+  return { attrs, clipId }
+}
+
+function buildSVGStrokeAttrs(visibleStrokes: Stroke[]): Record<string, string | number | undefined> {
+  if (visibleStrokes.length === 0) return {}
+  const stroke = visibleStrokes[0]
+  const attrs: Record<string, string | number | undefined> = {
+    stroke: formatColor(stroke.color, 1),
+    'stroke-width': round(stroke.weight)
+  }
+  if (stroke.opacity < 1) attrs['stroke-opacity'] = round(stroke.opacity)
+  if (stroke.cap && stroke.cap !== 'NONE') {
+    attrs['stroke-linecap'] = SVG_STROKE_CAP[stroke.cap] ?? 'butt'
+  }
+  if (stroke.join && stroke.join !== 'MITER') {
+    attrs['stroke-linejoin'] = SVG_STROKE_JOIN[stroke.join] ?? 'miter'
+  }
+  if (stroke.dashPattern && stroke.dashPattern.length > 0) {
+    attrs['stroke-dasharray'] = stroke.dashPattern.map((n) => round(n)).join(' ')
+  }
+  return attrs
+}
+
+function buildShapeChildren(
+  node: SceneNode,
+  visibleFills: Fill[],
+  fillAttr: string | null,
+  strokeAttrs: Record<string, string | number | undefined>,
+  visibleStrokeCount: number,
+  ctx: SVGExportContext
+): SVGNode[] {
+  if (visibleFills.length > 1) {
+    const elements: SVGNode[] = []
+    for (const fill of visibleFills) {
+      const ref = resolveFill(fill, node, ctx)
+      if (ref) {
+        elements.push(
+          ...nodeShapeElements(
+            node,
+            ref,
+            fill === visibleFills[visibleFills.length - 1] ? strokeAttrs : {}
+          )
+        )
+      }
+    }
+    return elements
+  }
+
+  const hasFillOrStroke = fillAttr || visibleStrokeCount > 0
+  if (hasFillOrStroke && !isGroupLike(node)) {
+    return nodeShapeElements(node, fillAttr, strokeAttrs)
+  }
+
+  return []
+}
+
+function renderNode(node: SceneNode, ctx: SVGExportContext): SVGNode | null {
+  if (!node.visible) return null
+
+  const { attrs: groupAttrs, clipId } = buildGroupAttrs(node, ctx)
+
+  if (node.type === 'TEXT') {
+    const firstFill = node.fills.find((f) => f.visible)
+    const fillAttr = firstFill ? resolveFill(firstFill, node, ctx) : null
+    const textEl = renderTextNode(node, fillAttr)
+    return svg('g', groupAttrs, textEl)
+  }
+
+  const visibleFills = node.fills.filter((f) => f.visible)
+  const visibleStrokes = node.strokes.filter((s) => s.visible)
+  const fillAttr = visibleFills.length > 0 ? resolveFill(visibleFills[0], node, ctx) : null
+  const strokeAttrs = buildSVGStrokeAttrs(visibleStrokes)
+
+  const children: (SVGNode | null)[] = buildShapeChildren(
+    node, visibleFills, fillAttr, strokeAttrs, visibleStrokes.length, ctx
+  )
+
+  const childNodes = ctx.graph.getChildren(node.id)
+  const childContent: SVGNode[] = []
+  for (const child of childNodes) {
+    const rendered = renderNode(child, ctx)
+    if (rendered) childContent.push(rendered)
+  }
+
+  if (clipId && childContent.length > 0) {
+    children.push(svg('g', { 'clip-path': `url(#${clipId})` }, ...childContent))
+  } else {
+    children.push(...childContent)
+  }
+
+  const validChildren = children.filter((c): c is SVGNode => c !== null)
+
+  if (validChildren.length === 0 && Object.keys(groupAttrs).length === 0) {
+    return null
+  }
+
+  if (validChildren.length === 1 && Object.keys(groupAttrs).length === 0) {
+    return validChildren[0]
+  }
+
+  return svg('g', groupAttrs, ...validChildren)
+}
+
+function isGroupLike(node: SceneNode): boolean {
+  return node.type === 'GROUP'
+}
+
+// --- Public API ---
+
+export interface SVGExportOptions {
+  /** Include XML declaration (default: true) */
+  xmlDeclaration?: boolean
+}
+
+export function renderNodesToSVG(
+  graph: SceneGraph,
+  _pageId: string,
+  nodeIds: string[],
+  options: SVGExportOptions = {}
+): string | null {
+  const bounds = computeContentBounds(graph, nodeIds)
+  if (!bounds) return null
+
+  const { minX, minY, maxX, maxY } = bounds
+  const width = round(maxX - minX)
+  const height = round(maxY - minY)
+
+  const ctx: SVGExportContext = {
+    defs: [],
+    defIdCounter: 0,
+    graph
+  }
+
+  const contentNodes: SVGNode[] = []
+
+  for (const id of nodeIds) {
+    const node = graph.getNode(id)
+    if (!node?.visible) continue
+
+    const abs = graph.getAbsolutePosition(id)
+    const offsetX = abs.x - minX
+    const offsetY = abs.y - minY
+
+    const needsOffset = offsetX !== node.x || offsetY !== node.y
+    const clone = needsOffset
+      ? { ...node, x: round(offsetX), y: round(offsetY) }
+      : node
+
+    const rendered = renderNode(clone, ctx)
+    if (rendered) contentNodes.push(rendered)
+  }
+
+  if (contentNodes.length === 0) return null
+
+  const rootChildren: (SVGNode | string)[] = []
+  if (ctx.defs.length > 0) {
+    rootChildren.push(svg('defs', {}, ...ctx.defs))
+  }
+  rootChildren.push(...contentNodes)
+
+  const root = svg(
+    'svg',
+    {
+      xmlns: 'http://www.w3.org/2000/svg',
+      'xmlns:xlink': 'http://www.w3.org/1999/xlink',
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`
+    },
+    ...(rootChildren as SVGNode[])
+  )
+
+  const svgStr = renderSVGNode(root)
+  const xmlDecl = options.xmlDeclaration !== false ? '<?xml version="1.0" encoding="UTF-8"?>\n' : ''
+  return xmlDecl + svgStr
+}

package/src/svg-export/paths.ts

@@ -0,0 +1,212 @@
+import type { SceneNode, VectorNetwork, VectorSegment, VectorVertex } from '../scene-graph'
+
+const CMD_CLOSE = 0
+const CMD_MOVE_TO = 1
+const CMD_LINE_TO = 2
+const CMD_CUBIC_TO = 4
+
+export function round(n: number, decimals = 2): number {
+  const factor = 10 ** decimals
+  return Math.round(n * factor) / factor
+}
+
+export function geometryBlobToSVGPath(blob: Uint8Array): string {
+  if (blob.length === 0) return ''
+  const dv = new DataView(blob.buffer, blob.byteOffset, blob.byteLength)
+  let o = 0
+  const parts: string[] = []
+
+  while (o < blob.length) {
+    const cmd = blob[o++]
+    switch (cmd) {
+      case CMD_CLOSE:
+        parts.push('Z')
+        break
+      case CMD_MOVE_TO: {
+        const x = round(dv.getFloat32(o, true))
+        const y = round(dv.getFloat32(o + 4, true))
+        o += 8
+        parts.push(`M${x} ${y}`)
+        break
+      }
+      case CMD_LINE_TO: {
+        const x = round(dv.getFloat32(o, true))
+        const y = round(dv.getFloat32(o + 4, true))
+        o += 8
+        parts.push(`L${x} ${y}`)
+        break
+      }
+      case CMD_CUBIC_TO: {
+        const x1 = round(dv.getFloat32(o, true))
+        const y1 = round(dv.getFloat32(o + 4, true))
+        const x2 = round(dv.getFloat32(o + 8, true))
+        const y2 = round(dv.getFloat32(o + 12, true))
+        const x = round(dv.getFloat32(o + 16, true))
+        const y = round(dv.getFloat32(o + 20, true))
+        o += 24
+        parts.push(`C${x1} ${y1} ${x2} ${y2} ${x} ${y}`)
+        break
+      }
+      default:
+        return parts.join('')
+    }
+  }
+
+  return parts.join('')
+}
+
+function segmentToSVG(seg: VectorSegment, vertices: VectorVertex[], forward: boolean): string {
+  const start = forward ? vertices[seg.start] : vertices[seg.end]
+  const end = forward ? vertices[seg.end] : vertices[seg.start]
+  const ts = forward ? seg.tangentStart : { x: -seg.tangentEnd.x, y: -seg.tangentEnd.y }
+  const te = forward ? seg.tangentEnd : { x: -seg.tangentStart.x, y: -seg.tangentStart.y }
+
+  const isStraight =
+    Math.abs(ts.x) < 0.001 &&
+    Math.abs(ts.y) < 0.001 &&
+    Math.abs(te.x) < 0.001 &&
+    Math.abs(te.y) < 0.001
+
+  if (isStraight) {
+    return `L${round(end.x)} ${round(end.y)}`
+  }
+
+  const cp1x = round(start.x + ts.x)
+  const cp1y = round(start.y + ts.y)
+  const cp2x = round(end.x + te.x)
+  const cp2y = round(end.y + te.y)
+  return `C${cp1x} ${cp1y} ${cp2x} ${cp2y} ${round(end.x)} ${round(end.y)}`
+}
+
+export function vectorNetworkToSVGPaths(network: VectorNetwork): string[] {
+  const { vertices, segments, regions } = network
+
+  if (regions.length > 0) {
+    return regions.map((region) => {
+      const parts: string[] = []
+      for (const loop of region.loops) {
+        if (loop.length === 0) continue
+        const firstSeg = segments[loop[0]]
+        parts.push(`M${round(vertices[firstSeg.start].x)} ${round(vertices[firstSeg.start].y)}`)
+        for (const segIdx of loop) {
+          parts.push(segmentToSVG(segments[segIdx], vertices, true))
+        }
+        parts.push('Z')
+      }
+      return parts.join('')
+    })
+  }
+
+  const parts: string[] = []
+  for (const seg of segments) {
+    parts.push(`M${round(vertices[seg.start].x)} ${round(vertices[seg.start].y)}`)
+    parts.push(segmentToSVG(seg, vertices, true))
+  }
+
+  return parts.length > 0 ? [parts.join('')] : []
+}
+
+export function makePolygonPoints(node: SceneNode): string {
+  const cx = node.width / 2
+  const cy = node.height / 2
+  const rx = node.width / 2
+  const ry = node.height / 2
+  const n = Math.max(3, node.pointCount)
+  const isStar = node.type === 'STAR'
+  const innerRatio = isStar ? node.starInnerRadius : 1
+  const totalPoints = isStar ? n * 2 : n
+  const angleOffset = -Math.PI / 2
+
+  const points: string[] = []
+  for (let i = 0; i < totalPoints; i++) {
+    const angle = angleOffset + (2 * Math.PI * i) / totalPoints
+    const isInner = isStar && i % 2 === 1
+    const r = isInner ? innerRatio : 1
+    points.push(`${round(cx + rx * r * Math.cos(angle))},${round(cy + ry * r * Math.sin(angle))}`)
+  }
+  return points.join(' ')
+}
+
+export function hasRadius(node: SceneNode): boolean {
+  return (
+    node.cornerRadius > 0 ||
+    (node.independentCorners &&
+      (node.topLeftRadius > 0 ||
+        node.topRightRadius > 0 ||
+        node.bottomRightRadius > 0 ||
+        node.bottomLeftRadius > 0))
+  )
+}
+
+export function roundedRectPath(node: SceneNode): string {
+  const w = node.width
+  const h = node.height
+  let tl: number, tr: number, br: number, bl: number
+  if (node.independentCorners) {
+    tl = node.topLeftRadius
+    tr = node.topRightRadius
+    br = node.bottomRightRadius
+    bl = node.bottomLeftRadius
+  } else {
+    tl = tr = br = bl = node.cornerRadius
+  }
+
+  tl = Math.min(tl, w / 2, h / 2)
+  tr = Math.min(tr, w / 2, h / 2)
+  br = Math.min(br, w / 2, h / 2)
+  bl = Math.min(bl, w / 2, h / 2)
+
+  return [
+    `M${round(tl)} 0`,
+    `L${round(w - tr)} 0`,
+    tr > 0 ? `A${round(tr)} ${round(tr)} 0 0 1 ${round(w)} ${round(tr)}` : '',
+    `L${round(w)} ${round(h - br)}`,
+    br > 0 ? `A${round(br)} ${round(br)} 0 0 1 ${round(w - br)} ${round(h)}` : '',
+    `L${round(bl)} ${round(h)}`,
+    bl > 0 ? `A${round(bl)} ${round(bl)} 0 0 1 0 ${round(h - bl)}` : '',
+    `L0 ${round(tl)}`,
+    tl > 0 ? `A${round(tl)} ${round(tl)} 0 0 1 ${round(tl)} 0` : '',
+    'Z'
+  ]
+    .filter(Boolean)
+    .join('')
+}
+
+export function arcPath(node: SceneNode): string {
+  if (!node.arcData) return ''
+  const { startingAngle, endingAngle, innerRadius } = node.arcData
+  const cx = node.width / 2
+  const cy = node.height / 2
+  const rx = node.width / 2
+  const ry = node.height / 2
+
+  const fullCircle = Math.abs(endingAngle - startingAngle) >= Math.PI * 2 - 0.001
+  if (fullCircle && innerRadius <= 0) {
+    return `M${round(cx - rx)} ${round(cy)}A${round(rx)} ${round(ry)} 0 1 1 ${round(cx + rx)} ${round(cy)}A${round(rx)} ${round(ry)} 0 1 1 ${round(cx - rx)} ${round(cy)}Z`
+  }
+
+  const x1 = round(cx + rx * Math.cos(startingAngle))
+  const y1 = round(cy + ry * Math.sin(startingAngle))
+  const x2 = round(cx + rx * Math.cos(endingAngle))
+  const y2 = round(cy + ry * Math.sin(endingAngle))
+  const largeArc = Math.abs(endingAngle - startingAngle) > Math.PI ? 1 : 0
+  const sweep = endingAngle > startingAngle ? 1 : 0
+
+  const parts = [`M${x1} ${y1}`, `A${round(rx)} ${round(ry)} 0 ${largeArc} ${sweep} ${x2} ${y2}`]
+
+  if (innerRadius > 0) {
+    const irx = rx * innerRadius
+    const iry = ry * innerRadius
+    const ix1 = round(cx + irx * Math.cos(endingAngle))
+    const iy1 = round(cy + iry * Math.sin(endingAngle))
+    const ix2 = round(cx + irx * Math.cos(startingAngle))
+    const iy2 = round(cy + iry * Math.sin(startingAngle))
+    parts.push(`L${ix1} ${iy1}`)
+    parts.push(`A${round(irx)} ${round(iry)} 0 ${largeArc} ${sweep === 1 ? 0 : 1} ${ix2} ${iy2}`)
+    parts.push('Z')
+  } else {
+    parts.push(`L${round(cx)} ${round(cy)}Z`)
+  }
+
+  return parts.join('')
+}

package/src/svg-node.ts

@@ -0,0 +1,62 @@
+export interface SVGNode {
+  tag: string
+  attrs: Record<string, string | number>
+  children: (SVGNode | string)[]
+}
+
+export function svg(
+  tag: string,
+  attrs: Record<string, string | number | undefined | null>,
+  ...children: (SVGNode | string | null | undefined | false)[]
+): SVGNode {
+  const cleaned: Record<string, string | number> = {}
+  for (const [k, v] of Object.entries(attrs)) {
+    if (v != null) cleaned[k] = v
+  }
+  return {
+    tag,
+    attrs: cleaned,
+    children: children.filter((c): c is SVGNode | string => c != null && c !== false)
+  }
+}
+
+function escapeAttr(value: string): string {
+  return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;')
+}
+
+function escapeText(value: string): string {
+  return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+function renderAttrs(attrs: Record<string, string | number>): string {
+  const parts: string[] = []
+  for (const [k, v] of Object.entries(attrs)) {
+    parts.push(`${k}="${escapeAttr(String(v))}"`)
+  }
+  return parts.length > 0 ? ' ' + parts.join(' ') : ''
+}
+
+export function renderSVGNode(node: SVGNode, indent = 0): string {
+  const pad = '  '.repeat(indent)
+  const attrsStr = renderAttrs(node.attrs)
+
+  if (node.children.length === 0) {
+    return `${pad}<${node.tag}${attrsStr}/>`
+  }
+
+  const hasOnlyText = node.children.length === 1 && typeof node.children[0] === 'string'
+  if (hasOnlyText) {
+    return `${pad}<${node.tag}${attrsStr}>${escapeText(node.children[0] as string)}</${node.tag}>`
+  }
+
+  const lines = [`${pad}<${node.tag}${attrsStr}>`]
+  for (const child of node.children) {
+    if (typeof child === 'string') {
+      lines.push(`${'  '.repeat(indent + 1)}${escapeText(child)}`)
+    } else {
+      lines.push(renderSVGNode(child, indent + 1))
+    }
+  }
+  lines.push(`${pad}</${node.tag}>`)
+  return lines.join('\n')
+}