0

I created an object with inkscape and added an overlay object(blend mode) on top. The problem is that outside of inkscape(other editors etc.) i can only see the overlay and not the combination of the two objects. Any way to fix this? I suppose that the blend mode of the overlay becomes automatically normal.

This is an example. The correct color of the square is pink but in many editors or webpages it is rendered as red.

Improve this question
3
  • Hi. Welcome to GDSE. This is difficult to answer without access to the SVG, or the other editors you are using. Not all vector image editors support SVG to the same extent as Inkscape. Perhaps consider sharing the file at SVGshare.com and we can check if there's anything obviously wrong. – Billy Kerr Jul 14 '20 at 13:32
  • Hi, I updated the question with an example, please check it out. – christk Jul 14 '20 at 13:51
  • With SVG you inherit the problems of xonparibility programmers. You will have to accept the fact that not all renderers abd editors are on same maturity/feature level. Your options are to work a fallback or accept that you must use less features. And there is nothing you can do about this. – joojaa Jul 14 '20 at 14:18
0

As Joojaa mentioned in comments, each renderer or editor can interpret SVG filters differently. The best solution is to "flatten" the filter (if your filter makes blue turn into pink, fill your object with pink instead).

Improve this answer
0

I had a look at your SVG. When opened in Inkscape 1.0, I can't see any evidence of blending modes, although I can see it when I examine the XML. What version of Inkscape are you using?

SVG blending modes used to be a bit iffy with patchy support in browsers, but modern browsers now seem to support SVG layers with Blending modes. Perhaps consider moving the shape to be blended onto its own layer, then set the blend mode of the layer. I tested this and it seems to work using Inkscape 1.0 and viewing the SVG in Chrome, Firefox, and MS Edge. Here's an example

Obviously this doesn't mean that the SVG will necessarily render properly in other vector image editors which might not support current SVG standards to the same extent as Inkscape or modern web browsers. For example, the SVG I linked to doesn't render properly in Adobe Illustrator 2018. But Illustrator is notorious for its poor SVG support.

Improve this answer
2
  • I tried using a layer as an overlay but the result is the same. Furthermore, colors are being rendered differently in chrome and firefox... The best option I guess is to forget this feature for now as it behaves differently in every browser... The inkscape version I use is also 1.0 – christk Jul 15 '20 at 11:15
  • @christk - The colours should not be rendered differently in different browsers. Here's a screenshot of the SVG I made viewed in Firefox, Chrome, and MS Edge. I checked the colours in the overlay area by sampling the colours in Photoshop, and they are exactly the same on all 3 browsers. – Billy Kerr Jul 15 '20 at 13:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.