optimize

Author: shuding

src/builder/rect.ts

@@ -256,6 +256,28 @@ export default async function rect(
   })
   defs += backdropDefinitions
 
+  // When the element is a single plain shape (one background fill, no border,
+  // box shadow, backdrop filter, mask or CSS filter), `opacity` is visually
+  // equivalent to `fill-opacity` since there is nothing to composite as an
+  // isolated group. Using `fill-opacity` avoids emitting a `<g opacity>`
+  // wrapper, which forces rasterizers such as librsvg and resvg to allocate
+  // and composite a temporary surface.
+  const useFillOpacity =
+    opacity !== 1 &&
+    !isImage &&
+    fills.length === 1 &&
+    !backdropShape &&
+    !backgroundShapes &&
+    !cssFilter &&
+    !maskId &&
+    !style.boxShadow &&
+    !(
+      style.borderTopWidth ||
+      style.borderRightWidth ||
+      style.borderBottomWidth ||
+      style.borderLeftWidth
+    )
+
   // Each background generates a new rectangle.
   // @TODO: Not sure if this is the best way to do it, maybe <pattern> with
   // multiple <image>s is better.
@@ -267,6 +289,7 @@ export default async function rect(
         width,
         height,
         fill,
+        'fill-opacity': useFillOpacity ? opacity : undefined,
         d: path ? path : undefined,
         transform: matrix ? matrix : undefined,
         'clip-path': style.transform ? undefined : currentClipPath,
@@ -538,7 +561,7 @@ export default async function rect(
     (shadow ? shadow[0] : '') +
     (imageBorderRadius ? imageBorderRadius[0] : '') +
     clip +
-    (opacity !== 1 ? `<g opacity="${opacity}">` : '') +
+    (opacity !== 1 && !useFillOpacity ? `<g opacity="${opacity}">` : '') +
     (style.transform && (currentClipPath || maskId)
       ? `<g${currentClipPath ? ` clip-path="${currentClipPath}"` : ''}${
           maskId ? ` mask="${maskId}"` : ''
@@ -547,7 +570,7 @@ export default async function rect(
     backdropShape +
     (backgroundShapes || shape) +
     (style.transform && (currentClipPath || maskId) ? '</g>' : '') +
-    (opacity !== 1 ? `</g>` : '') +
+    (opacity !== 1 && !useFillOpacity ? `</g>` : '') +
     (shadow ? shadow[1] : '') +
     extra
   )

src/text/index.ts

@@ -906,7 +906,15 @@ export default async function* buildTextNodes(
                 : parentStyle.color,
             d: mergedPath,
             transform: matrix ? matrix : undefined,
-            opacity: opacity !== 1 ? opacity : undefined,
+            // A single path is one fill operation, so `fill-opacity` is
+            // visually identical to `opacity` when there is no stroke or
+            // filter, and avoids the isolated-group compositing surface in
+            // rasterizers. With a filter (e.g. text-shadow), `fill-opacity`
+            // applies before filtering while `opacity` applies after, so we
+            // must keep `opacity` there.
+            [inheritedStyle.WebkitTextStrokeWidth || cssFilter || filter
+              ? 'opacity'
+              : 'fill-opacity']: opacity !== 1 ? opacity : undefined,
             style: cssFilter ? `filter:${cssFilter}` : undefined,
             'stroke-width': inheritedStyle.WebkitTextStrokeWidth
               ? `${inheritedStyle.WebkitTextStrokeWidth}px`

test/__image_snapshots__/fill-opacity-test-tsx-test-fill-opacity-test-tsx-opacity-to-fill-opacity-optimization-should-keep-group-opacity-when-the-element-has-a-border-1-snap.png

@@ -0,0 +1,120 @@
+import { it, describe, expect } from 'vitest'
+
+import { initFonts, toImage } from './utils.js'
+import satori from '../src/index.js'
+
+describe('Opacity to fill-opacity optimization', () => {
+  let fonts
+  initFonts((f) => (fonts = f))
+
+  it('should use fill-opacity for a plain shape without an isolated group', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          width: 50,
+          height: 50,
+          background: 'red',
+          opacity: 0.5,
+        }}
+      />,
+      { width: 100, height: 100, fonts }
+    )
+    expect(svg).toContain('fill-opacity="0.5"')
+    expect(svg).not.toContain('<g opacity=')
+    expect(toImage(svg, 100)).toMatchImageSnapshot()
+  })
+
+  it('should keep group opacity when the element has a border', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          width: 50,
+          height: 50,
+          background: 'red',
+          border: '2px solid blue',
+          opacity: 0.5,
+        }}
+      />,
+      { width: 100, height: 100, fonts }
+    )
+    expect(svg).toContain('<g opacity="0.5">')
+    expect(svg).not.toContain('fill-opacity')
+    expect(toImage(svg, 100)).toMatchImageSnapshot()
+  })
+
+  it('should keep group opacity when the element has a box shadow', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          width: 50,
+          height: 50,
+          background: 'red',
+          boxShadow: '0 0 4px black',
+          opacity: 0.5,
+        }}
+      />,
+      { width: 100, height: 100, fonts }
+    )
+    expect(svg).toContain('<g opacity="0.5">')
+    expect(toImage(svg, 100)).toMatchImageSnapshot()
+  })
+
+  it('should keep group opacity when the element has multiple backgrounds', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          width: 50,
+          height: 50,
+          backgroundColor: 'red',
+          backgroundImage: 'linear-gradient(to right, blue, green)',
+          opacity: 0.5,
+        }}
+      />,
+      { width: 100, height: 100, fonts }
+    )
+    expect(svg).toContain('<g opacity="0.5">')
+    expect(toImage(svg, 100)).toMatchImageSnapshot()
+  })
+
+  it('should use fill-opacity for text without stroke or filter', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          fontSize: 40,
+          color: 'black',
+          opacity: 0.5,
+        }}
+      >
+        Hello
+      </div>,
+      { width: 200, height: 100, fonts }
+    )
+    expect(svg).toContain('fill-opacity="0.5"')
+    expect(toImage(svg, 200)).toMatchImageSnapshot()
+  })
+
+  it('should render nested opacity multiplicatively', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          display: 'flex',
+          width: 100,
+          height: 100,
+          opacity: 0.5,
+        }}
+      >
+        <div
+          style={{
+            width: 50,
+            height: 50,
+            background: 'red',
+            opacity: 0.5,
+          }}
+        />
+      </div>,
+      { width: 100, height: 100, fonts }
+    )
+    expect(svg).toContain('fill-opacity="0.25"')
+    expect(toImage(svg, 100)).toMatchImageSnapshot()
+  })
+})