fix: svg dimensions not properly resolving in runtime instances

Fixes #497

Author: harlan-zw

pnpm-lock.yaml

@@ -104,7 +104,7 @@ catalog:
   vitest: ^4.1.0
   vue: ^3.5.30
   vue-router: ^5.0.3
-  vue-tsc: ^3.2.5
+  vue-tsc: ^3.2.6
   wrangler: ^4.74.0
   yoga-wasm-web: ^0.3.3
 catalogs:

pnpm-workspace.yaml

@@ -78,6 +78,48 @@ const SVG_CAMEL_ATTRS: Record<string, string> = {
 
 export const SVG_CAMEL_ATTR_VALUES = new Set(Object.values(SVG_CAMEL_ATTRS))
 
+const RE_PERCENT = /^\d+%$/
+
+/**
+ * Resolve an SVG element's width or height from multiple sources:
+ * 1. Numeric HTML attribute (e.g. width="24")
+ * 2. Style property (e.g. style.width = 48 or "48px")
+ * 3. viewBox (3rd/4th value for width/height)
+ *
+ * Percentage attributes are skipped (returned as undefined) so callers
+ * can fall back to ancestor or renderer-specific resolution.
+ */
+export function resolveSvgDimension(
+  props: Record<string, any>,
+  style: Record<string, any> | undefined,
+  key: 'width' | 'height',
+): number | undefined {
+  // 1. HTML attribute (skip percentages)
+  const attr = props[key]
+  if (attr != null && !RE_PERCENT.test(String(attr))) {
+    const n = Number(attr)
+    if (!Number.isNaN(n))
+      return n
+  }
+  // 2. Style property
+  const sv = style?.[key]
+  if (sv != null) {
+    const n = typeof sv === 'number' ? sv : Number.parseInt(String(sv))
+    if (!Number.isNaN(n))
+      return n
+  }
+  // 3. viewBox fallback
+  const vb = props.viewBox || props.viewbox
+  if (typeof vb === 'string') {
+    const parts = vb.split(/[\s,]+/)
+    if (parts.length === 4) {
+      const n = Number(parts[key === 'width' ? 2 : 3])
+      if (!Number.isNaN(n))
+        return n
+    }
+  }
+}
+
 export function parseStyleAttr(style: string | null | undefined): Record<string, any> | undefined {
   if (!style)
     return undefined

src/runtime/server/og-image/core/vnodes.ts

@@ -1,14 +1,14 @@
 import type { FontConfig, OgImageRenderEventContext, VNode } from '../../../types'
 import resolvedFonts from '#og-image/fonts'
 import { walkTree } from '../core/plugins'
-import { createVNodes as coreCreateVNodes } from '../core/vnodes'
+import { createVNodes as coreCreateVNodes, resolveSvgDimension } from '../core/vnodes'
 import classes from './plugins/classes'
 import emojis from './plugins/emojis'
 import flex from './plugins/flex'
 import nuxtIcon from './plugins/nuxt-icon'
 
 // Re-export shared utilities for external consumers
-export { htmlToVNode, SVG_CAMEL_ATTR_VALUES, warnUnsupportedSvgElements } from '../core/vnodes'
+export { htmlToVNode, resolveSvgDimension, SVG_CAMEL_ATTR_VALUES, warnUnsupportedSvgElements } from '../core/vnodes'
 
 // Get default font family from resolved fonts
 function getDefaultFontFamily(): string {
@@ -20,12 +20,12 @@ function getDefaultFontFamily(): string {
 }
 
 const RE_PX = /^(\d+(?:\.\d+)?)px$/
-const RE_PERCENT = /^\d+%$/
 
 /**
  * Satori embeds inline <svg> as data URI <image> elements, resolving width/height
  * attributes to pixel values. Percentage values (width="100%") become NaN.
- * This walk finds the nearest ancestor with explicit pixel dimensions and resolves.
+ * This walk uses the shared resolveSvgDimension (attrs → style → viewBox),
+ * then falls back to the nearest ancestor with explicit pixel dimensions.
  */
 function findAncestorPxDim(ancestors: VNode[], prop: 'width' | 'height'): number | undefined {
   for (let i = ancestors.length - 1; i >= 0; i--) {
@@ -38,17 +38,20 @@ function findAncestorPxDim(ancestors: VNode[], prop: 'width' | 'height'): number
   }
 }
 
+const RE_PERCENT = /^\d+%$/
+
 function resolveSvgPercentDimensions(node: VNode, ancestors: VNode[] = []) {
   if (node.type === 'svg') {
-    if (RE_PERCENT.test(node.props?.width || '')) {
-      const px = findAncestorPxDim(ancestors, 'width')
-      if (px)
-        node.props.width = px
-    }
-    if (RE_PERCENT.test(node.props?.height || '')) {
-      const px = findAncestorPxDim(ancestors, 'height')
-      if (px)
-        node.props.height = px
+    for (const dim of ['width', 'height'] as const) {
+      const val = String(node.props?.[dim] || '')
+      const isPercent = RE_PERCENT.test(val)
+      if (isPercent) {
+        // Percentage → prefer ancestor container px, fall back to viewBox
+        const resolved = findAncestorPxDim(ancestors, dim) ?? resolveSvgDimension(node.props, node.props?.style, dim)
+        if (resolved)
+          node.props[dim] = resolved
+      }
+      // Don't resolve relative units (em/rem) — satori handles these natively
     }
   }
   if (Array.isArray(node.props?.children)) {

src/runtime/server/og-image/satori/vnodes.ts

@@ -1,6 +1,12 @@
 import type { ContainerNode, ImageNode, Node, TextNode } from '@takumi-rs/core'
 import type { OgImageRenderEventContext, VNode } from '../../../types'
-import { createVNodes, SVG_CAMEL_ATTR_VALUES } from '../core/vnodes'
+import { createVNodes, resolveSvgDimension, SVG_CAMEL_ATTR_VALUES } from '../core/vnodes'
+
+const RE_RELATIVE_UNIT = /^([\d.]+)(em|rem)$/
+const RE_TW_TEXT_ARBITRARY = /(?:^|\s)text-\[(\d+(?:\.\d+)?)(px|rem|em)\]/
+const RE_FONT_SIZE_PX = /^(\d+(?:\.\d+)?)(px)?$/
+
+const DEFAULT_FONT_SIZE = 16
 
 const RE_UPPERCASE = /[A-Z]/g
 const RE_DQUOTE = /"/g
@@ -10,7 +16,7 @@ const RE_GT = />/g
 
 export async function createTakumiNodes(ctx: OgImageRenderEventContext): Promise<Node> {
   const vnodeTree = await createVNodes(ctx)
-  return await vnodeToTakumiNode(vnodeTree)
+  return await vnodeToTakumiNode(vnodeTree, DEFAULT_FONT_SIZE)
 }
 
 // Extract numeric width/height from HTML attributes
@@ -22,7 +28,41 @@ function pickNumericDimension(props: Record<string, any>, key: 'width' | 'height
   return Number.isNaN(n) ? undefined : n
 }
 
-async function vnodeToTakumiNode(vnode: VNode): Promise<Node> {
+/**
+ * Resolve an em/rem value to pixels given the inherited font size.
+ */
+function resolveRelativeUnit(value: string | number | undefined, inheritedFontSize: number): number | undefined {
+  if (value == null)
+    return undefined
+  const match = String(value).match(RE_RELATIVE_UNIT)
+  if (!match)
+    return undefined
+  const n = Number.parseFloat(match[1]!)
+  return match[2] === 'rem' ? n * DEFAULT_FONT_SIZE : n * inheritedFontSize
+}
+
+/**
+ * Extract font size in px from a vnode's style or tailwind classes.
+ */
+function extractFontSize(props: Record<string, any>, style: Record<string, any> | undefined): number | undefined {
+  // 1. Inline style fontSize
+  if (style?.fontSize != null) {
+    const m = String(style.fontSize).match(RE_FONT_SIZE_PX)
+    if (m)
+      return Number.parseFloat(m[1]!)
+  }
+  // 2. Tailwind arbitrary text-[Npx] from class or tw
+  const twStr = props.tw || props.class || ''
+  const twMatch = twStr.match(RE_TW_TEXT_ARBITRARY)
+  if (twMatch) {
+    const val = Number.parseFloat(twMatch[1]!)
+    if (twMatch[2] === 'px')
+      return val
+  }
+  return undefined
+}
+
+async function vnodeToTakumiNode(vnode: VNode, inheritedFontSize: number): Promise<Node> {
   const { style, children, class: cls, tw, src, ...rest } = vnode.props
 
   const baseMetadata = {
@@ -32,12 +72,25 @@ async function vnodeToTakumiNode(vnode: VNode): Promise<Node> {
 
   // SVG elements → convert to SVG string
   if (vnode.type === 'svg') {
+    // Only resolve em/rem to pixels when we have an explicit font size from a parent
+    // (e.g. text-[80px]). When using the default 16px, leave dimensions unset so
+    // takumi can handle the SVG's native 1em sizing and keep inline layout.
+    const hasExplicitFontSize = inheritedFontSize !== DEFAULT_FONT_SIZE
+    const isRelativeW = RE_RELATIVE_UNIT.test(String(rest.width ?? ''))
+    const isRelativeH = RE_RELATIVE_UNIT.test(String(rest.height ?? ''))
     return {
       ...baseMetadata,
       type: 'image',
       src: vnodeToHtmlString(vnode),
-      width: pickNumericDimension(rest, 'width'),
-      height: pickNumericDimension(rest, 'height'),
+      // When em/rem + explicit parent font size → resolve to px.
+      // When em/rem + default font size → leave undefined (takumi handles natively).
+      // Otherwise → use standard resolution chain (numeric attrs → style → viewBox).
+      width: isRelativeW
+        ? (hasExplicitFontSize ? resolveRelativeUnit(rest.width, inheritedFontSize) : undefined)
+        : resolveSvgDimension(rest, style, 'width'),
+      height: isRelativeH
+        ? (hasExplicitFontSize ? resolveRelativeUnit(rest.height, inheritedFontSize) : undefined)
+        : resolveSvgDimension(rest, style, 'height'),
     } satisfies ImageNode
   }
 
@@ -51,6 +104,10 @@ async function vnodeToTakumiNode(vnode: VNode): Promise<Node> {
     } satisfies ImageNode
   }
 
+  // Compute inherited font size for children
+  const nodeFontSize = extractFontSize(vnode.props, style)
+  const childFontSize = nodeFontSize ?? inheritedFontSize
+
   // For non-image nodes, merge any explicit width/height into style
   const containerStyle = { ...style }
   const w = pickNumericDimension(rest, 'width')
@@ -87,7 +144,7 @@ async function vnodeToTakumiNode(vnode: VNode): Promise<Node> {
     const takumiChildren: Node[] = []
     for (const child of children) {
       if (child && typeof child === 'object')
-        takumiChildren.push(await vnodeToTakumiNode(child))
+        takumiChildren.push(await vnodeToTakumiNode(child, childFontSize))
       else if (typeof child === 'string' && child.trim())
         takumiChildren.push({ type: 'text', text: child.trim() })
     }

src/runtime/server/og-image/takumi/nodes.ts

@@ -11,7 +11,7 @@ withDefaults(defineProps<{
 </script>
 
 <template>
-  <div class="w-full h-full flex flex-col bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800 p-12">
+  <div class="w-full h-full flex flex-col p-12" style="background: linear-gradient(to bottom right, #312e81, #581c87, #9d174d);">
     <!-- Header -->
     <div class="flex justify-between items-start mb-8">
       <div class="flex items-center gap-4">

test/e2e/__image_snapshots__/comparison-complex-satori.png

@@ -0,0 +1,14 @@
+<script setup>
+import { defineOgImage } from '#imports'
+
+defineOgImage('BlogPost.takumi', {
+  title: 'Hi! 👋',
+})
+</script>
+
+<template>
+  <div>
+    <h1>BlogPost Emoji Test</h1>
+    <p>Tests emoji rendering in BlogPost template title prop via takumi</p>
+  </div>
+</template>