Skip to main content
Gavin_Atkinson
Gavin_Atkinson
January 20, 2023
Solved

What does the "backgroundImageFix" element in exported filter effects do?

What it says on the tin. Been curious about why this is injected into SVG exports.

    This topic has been closed for replies.
    Lauren_Budorick
    Lauren_BudorickSolution
    Figmate
    December 12, 2023

    Hey Gavin!

    Some of the things we do in our SVG exporter are meant to address discrepancies between different SVG renderers. Try opening this Codepen (where I exported a drop shadow from Figma and then commented out the BackgroundImageFix + blend) in both Chrome + Firefox (works fine) and then in Safari (where, at the time of this writing, that node isn’t drawn at all). (A comment in the Figma codebase implies that when this was first written 6 years ago, Firefox also had the same bug.)

    View in thread

    4 replies

    gavinatkinson
    gavinatkinson
    July 12, 2023

    Just wanted to bump this!

    Gavin_Atkinson
    Gavin_AtkinsonAuthor
    December 8, 2023

    I am once again asking for a genius on the Figma team to provide insight to me, a lowly user.

    Lauren_Budorick
    Figmate
    Lauren_BudorickSolution
    Figmate
    December 12, 2023

    Hey Gavin!

    Some of the things we do in our SVG exporter are meant to address discrepancies between different SVG renderers. Try opening this Codepen (where I exported a drop shadow from Figma and then commented out the BackgroundImageFix + blend) in both Chrome + Firefox (works fine) and then in Safari (where, at the time of this writing, that node isn’t drawn at all). (A comment in the Figma codebase implies that when this was first written 6 years ago, Firefox also had the same bug.)

      Gavin_Atkinson
      Gavin_AtkinsonAuthor
      December 12, 2023

      Hey Lauren!

      Thank you so much for your message and the example - sad that svg has so much cross-browser inconsistency in 2023 but here we are. Also, I’m a huge fan of the import upgrades you and your team made last year!

        Terms & ConditionsAccessibility statement