Upgrade to v2

v2 tightens Takumi's rendering to match the web platform more closely. This page covers the breaking changes; for everything else see the releases.

What has changed?

currentColor in SVG images is no longer tinted by the host color

Through v1, an SVG supplied as an image (Node::image, background-image: url(...), or mask-image) had its currentColor rewritten to the host element's color before rendering. v2 removes this.

An SVG referenced as an image is an isolated document, so it does not inherit color from the host — the same rule browsers, satori, and @vercel/og follow. Its currentColor now resolves to the SVG's own default (black) instead of the surrounding text color. This also makes the raster and vector (SVG) backends agree, and lets the raster backend reuse its cached parse instead of reparsing the SVG on every render.

currentColor for Takumi's own properties (text color, border-color, box-shadow, outline, text-decoration-color) is unchanged. Only the contents of SVG images are affected.

If you relied on the old behavior to tint an icon, set the color in the SVG markup before passing it in:

const tinted = icon.replace(/currentColor/g, "#3b82f6"); 

position defaults to static

Through v1, position defaulted to relative, so every element established a containing block for absolutely-positioned descendants and honored top/right/bottom/left insets. v2 defaults to static to match the CSS specification, so an element only becomes a positioned containing block when you opt in.

If you relied on the default to anchor an absolutely-positioned child or to apply insets, set position: relative explicitly.

<div
  style={{
    display: "flex",
    position: "relative", 
  }}
>
  <div style={{ position: "absolute", top: 0, left: 0 }}>Badge</div>
</div>

border-width and outline-width default to medium

Omitting the width in border / outline now resolves to the CSS initial value medium (3px) instead of 0, and the thin, medium, and thick keywords are accepted. border: solid red and outline: solid render a 3px line where they previously rendered nothing. The used width is still 0 when the line's style is none or hidden.

<div style={{ border: "solid red" }}>3px border in v2, invisible in v1</div>

Negative scale factors reflect

scale: -1 and transform: scaleX(-1) / scaleY(-1) / scale(-1) now reflect the element instead of collapsing it to zero size.

line-clamp is now a shorthand

line-clamp is now a shorthand for the max-lines, block-ellipsis, and continue longhands (CSS Overflow 4), rather than a single collapsed property. Inheritance follows the spec: block-ellipsis inherits, while max-lines and continue do not — so a clamped ancestor no longer forces its line limit onto descendants. -webkit-line-clamp still works and expands to the same longhands.

Rust

ImageSource::render_for_layout Drops the current_color Argument

With SVG currentColor no longer resolved against the host, render_for_layout no longer needs the color.

image.render_for_layout(width, height, image_rendering, time_ms, current_color)?; 
image.render_for_layout(width, height, image_rendering, time_ms)?; 

More in Changelog!

For a more comprehensive list of changes, please refer to the changelog in releases.