Skip to main content

Description:
When exporting nodes with image fills using the Figma plugin API (exportAsync({ format: "SVG" }) ), the resulting SVG often contains a <pattern> that has no children, while the <image> element ends up separately in <defs>.

The exported shape is filled with fill="url(#pattern…)", but because the <pattern> is empty and doesn’t reference the <image>, nothing is rendered in most SVG viewers (Safari, Chrome, etc.).

Steps to reproduce:

  1. Create a Polygon / Vector node.

  2. Apply an image fill.

  3. Export via plugin with: await node.exportAsync({ format: "SVG" })

  4. Inspect the SVG:

    • Shape uses fill="url(#pattern0…)"

    • <pattern> is empty (<pattern …></pattern>)

    • <image> with the base64 JPEG is present in <defs>, but never referenced.

  5. Open the SVG in a browser → the shape appears invisible.

Expected result:

  • Exported shape is visible

Actual result:

  • The <pattern> is empty, causing shapes to render invisible.

  • This breaks exported SVG

Request:
Please update the SVG exporter so that image fills always produce a valid <pattern> (with an <image> child), or otherwise avoid emitting empty patterns that cause the shapes to disappear.

Hey ​@Fra123, thanks for flagging this! 

I’ve passed this onto our team to investigate and work on a fix.