Blender mode and SVG problem.
Effect
-
blend mode-color
-
Drop shadow
-
Layer-color dadge
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:
- Export SVG together with the background. This of course would mean that you can’t use dynamic backgrounds.
- Achieve the same effect without blend modes. You can use just a colored shadow to achieve something similar.
- 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.
1 Like
