Skip to content

fix(arrows): skip rendering empty label in SVG export#8137

Merged
AniKrisn merged 1 commit intomainfrom
ani/arrow-export-svg-bug
Mar 9, 2026
Merged

fix(arrows): skip rendering empty label in SVG export#8137
AniKrisn merged 1 commit intomainfrom
ani/arrow-export-svg-bug

Conversation

@AniKrisn
Copy link
Copy Markdown
Contributor

@AniKrisn AniKrisn commented Mar 3, 2026

Closes #7055. When exporting arrows without text labels via getSvgElement(), the <foreignObject> element receives negative width/height values (e.g. -8.5), causing browser console errors.

The root cause is in ArrowShapeUtil.toSvg(): it unconditionally renders a RichTextSVG for the arrow label and applies .expandBy(-ARROW_LABEL_PADDING * scale) to shrink the bounds by padding. For empty labels, getArrowLabelPosition() returns a zero-sized box, so subtracting 4.25 * 2 = 8.5 produces negative dimensions.

The fix skips rendering RichTextSVG entirely when the label is empty, matching the existing guard in the canvas rendering path.

Change type

  • bugfix

Test plan

  1. Create an arrow with no text label
  2. Export as SVG (File > Export as SVG)
  3. Check the browser console — no more <foreignObject> attribute width: A negative value is not valid errors
  4. Create an arrow with a text label and export — label renders correctly

Release notes

  • Fix arrow SVG export producing invalid negative <foreignObject> dimensions when arrows have no text label

Note

Low Risk
Low risk: a small conditional render change limited to SVG export output, with no impact on arrow geometry or editing behavior beyond avoiding invalid <foreignObject> dimensions.

Overview
Fixes arrow SVG export emitting invalid <foreignObject> sizes when an arrow has no text label.

ArrowShapeUtil.toSvg() now conditionally renders RichTextSVG only when richText is non-empty, avoiding negative label bounds after padding is applied.

Written by Cursor Bugbot for commit 58fb598. This will update automatically on new commits. Configure here.

@huppy-bot huppy-bot bot added the bugfix Bug fix label Mar 3, 2026
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 3, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
examples Ready Ready Preview Mar 9, 2026 3:06pm
5 Skipped Deployments
Project Deployment Actions Updated (UTC)
analytics Ignored Ignored Preview Mar 9, 2026 3:06pm
chat-template Ignored Ignored Preview Mar 9, 2026 3:06pm
tldraw-docs Ignored Ignored Preview Mar 9, 2026 3:06pm
tldraw-shader Ignored Ignored Preview Mar 9, 2026 3:06pm
workflow-template Ignored Ignored Preview Mar 9, 2026 3:06pm

Request Review

Copy link
Copy Markdown
Contributor

@kaneel kaneel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice explanations as to why it's a problem!
But the best answer – to me – as to why not rendering the text is that… it's empty!

So LGTM 🎉

@steveruizok
Copy link
Copy Markdown
Collaborator

nice one

When exporting arrows without text labels, the label bounding box has
zero dimensions. Subtracting ARROW_LABEL_PADDING from this produces
negative width/height values that get passed to <foreignObject>,
causing browser errors. Skip rendering RichTextSVG entirely when the
label is empty, matching the existing guard in the canvas rendering path.

Closes #7055
@AniKrisn AniKrisn force-pushed the ani/arrow-export-svg-bug branch from 1b146ca to 58fb598 Compare March 9, 2026 15:03
@AniKrisn AniKrisn added this pull request to the merge queue Mar 9, 2026
Merged via the queue into main with commit 7e73ebf Mar 9, 2026
18 checks passed
@AniKrisn AniKrisn deleted the ani/arrow-export-svg-bug branch March 9, 2026 15:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bugfix Bug fix

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Exporting SVG with foreignObject causes error in tldraw 4.1.2

4 participants