What’s the problem?

1 image is from the FIGMA and the second image is already in the svg site of this block.

As you can see it does not work.

Why did you change the topic? This is a bug. In FIGMA this file is different but outside it is different

Blend mode within SVG is not carried over to outside of the SVG. In Figma you see it blending with the background color, which is blue, but on the website this background color is not related to the SVG so it’s not blending with it. In the SVG, background is transparent. So it’s blending with the transparent color, and any color blending with transparent color will be transparent. This is how the HTML/SVG works, it’s not a Figma issue. There is no way Figma could fix this. You have three options here:

1. Export SVG together with the background. This of course would mean that you can’t use dynamic backgrounds.


2. Achieve the same effect without blend modes. You can use just a colored shadow to achieve something similar.


3. Use custom CSS code on the website to apply blend mode to the SVG elements. Unlike normal SVG filters, CSS can interact with HTML and will carry over your blend modes. You can’t, however, export SVG from any tool with this custom CSS since CSS is not SVG and can only be used on the web whereas SVG is a general vector format that can be used anywhere. Also this likely is only supported in modern browsers, I don’t know much about CSS filters.

I changed the category on your post for multiple reasons:

• It is not a Figma bug.


• It is not a bug at all. This is how the web works. This issue is not even related to Figma for the most part.


• This category is for Plugins API bugs, not general Figma bugs. This question is not related to Plugins API in any way.


• This forum is not a place for reporting general Figma bugs. Bugs should be reported to Figma Support via the support request form or support@figma.com.

We have solved the problem! I will leave this to anyone who may be useful in the future.

I did it! Blend come in the same css and I used two “path” for the shadow and the object … it was possible

It is impossible to reproduce the same colors using blending within exported SVG file or in Inkscape (defacto standart app for SVG). Because the Figma blending gives different colors and Inkscape blending gives other colors.

Even if you set the exactly blending modes and opacity and etc. Even if you set force sRGB in Chrome flags.

Here is you can see the screenshot.

Left - source frame in Figma, Right - that frame exported and opened in the next tab in Chrome.

(Also, the SVG group in Inkscape breaks blending with underlayng objects because there is no Pass trough mode, only Normal).

I found that exported frame as SVG looks the same in Inkscape and in the Chrome Browser but the source frame looks different in Figma.

Alas, as far as SVG is concerned, Figma lives in its own parallel world of blending.

Thus, PNG is the only way to export accurate colors.