Skip to content

Draw an SVG's embedded bitmaps at pixel size and keep centred spaced labels readable - #102

Merged
marcosqlbi merged 1 commit into
mainfrom
fix/svg-bitmap-dpi-and-anchored-letter-spacing
Sep 5, 2026
Merged

Draw an SVG's embedded bitmaps at pixel size and keep centred spaced labels readable#102
marcosqlbi merged 1 commit into
mainfrom
fix/svg-bitmap-dpi-and-anchored-letter-spacing

Conversation

@marcosqlbi

Copy link
Copy Markdown
Collaborator

Why

Importing an infographic SVG showed two rendering defects. Logos the file embeds as bitmaps came out at the wrong size: a GitHub Copilot mark saved at 216 DPI drew at less than half the width of its box, and the OpenAI and Power BI marks saved at 72 DPI a third too large. And the lane labels above the arrows, TOOL CALLS, MODEL OPS, THE INTERFACE, collapsed into an unreadable pile of letters. Chrome draws the same file as the author meant.

Cause

Both are SharpVectors 1.8.5 behaviours, checked against its source.

Bitmap size. WpfImageRendering fits an embedded bitmap into its <image> using the decoded picture's WPF Width and Height. Those are device-independent units, so they scale with the DPI the PNG or JPEG declares: a 1024-pixel PNG at 72 DPI measures 1365 units, a 2200-pixel PNG at 216 DPI measures 978. Browsers measure pixels. The ratios seen on the board are exactly 96/72 and 96/216, and stripping the DPI metadata from a copy of the file made the renderer agree with Chrome.

Collapsed labels. WpfHorzTextRenderer draws text that has letter-spacing one glyph at a time and gives every glyph the text's own TextAlignment. With text-anchor="middle" each glyph is centred on the pen and the pen advances only half a glyph; with end it does not advance at all. Text anchored at its start goes through the same path correctly.

Fix

  • SvgImageCodec installs a WpfEmbeddedImageVisitor that decodes base64 data URIs itself and returns the same pixels at 96 DPI, so one unit is one pixel. Everything else, and anything that fails to decode, falls through to the renderer's own reader, still under ExternalResourcesAccessModes.Ignore.
  • SvgMarkup.Rewrite (which now also carries the clip hoist from Draw an SVG's clipped picture where the author put it #99, in a single parse) removes letter-spacing from <text> and <tspan> whose effective text-anchor, own, inherited, or written in style, is middle or end. The label is then measured and placed as one string, where the author put it and set slightly tighter than they asked. Spacing the renderer already ignores, such as a value with a unit, and spacing on start-anchored text is left alone.

The stored asset is untouched; only what is handed to the renderer changes. Decision 21 and the 1.3.0 release notes record both.

Verification

Release build clean, smoke tests pass with new cases for the letter-spacing rule and the renamed entry point. The rebuilt application opened a .wimport with the reported file: logos match Chrome's sizes and the lane labels read correctly and centred over their arrows. All nine SVGs in the same figure set render through the new codec with no regression, including the clipped-screenshot case from #99.

🤖 Generated with Claude Code

…labels readable

Two SharpVectors defects showed up importing an infographic: logos embedded as
72-DPI and 216-DPI bitmaps came out a third larger or less than half the size of
their <image> box, and letter-spaced labels with text-anchor="middle" piled up in
half their width.

The renderer fits a bitmap by its WPF Width and Height, which follow the file's
DPI; an image visitor now decodes base64 data URIs and hands back the same pixels
at 96 DPI. Spaced text is drawn glyph by glyph with the text's own alignment, so
SvgMarkup.Rewrite drops letter-spacing from text not anchored at its start.

Co-Authored-By: Claude Fable 5.1 <[email protected]>
@marcosqlbi
marcosqlbi merged commit 7ae8383 into main Sep 5, 2026
5 checks passed
@marcosqlbi
marcosqlbi deleted the fix/svg-bitmap-dpi-and-anchored-letter-spacing branch September 5, 2026 21:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant