gotcha

Author Topic: Inkscape layer blend mode tests  (Read 3779 times)

June 29, 2016, 10:02:34 AM
Read 3779 times

brynn

  • Administrator

  • Offline
  • ******

  • 3,897
  • Gender
    Female

    Female
    • Inkscape Community
Just came across an SVG image which wasn't showing in Firefox.  Found one layer set to Darken blend modes and the other layer set to Lighten.  That fixed the problem, which I find surprising.  Thus my curiosity leads me to experiment   :-D

Ok starting with this original SVG.  The star is in Layer 2.  Celtic knot is in Layer 1: 
ck45-test-layer-blend.svg
*ck45-test-layer-blend.svg
(7.27 kB - downloaded 538 times)


Now with Layer 1 switched to Lighten: 
ck45-test-layer-blend.svg
*ck45-test-layer-blend.svg
(7.56 kB - downloaded 539 times)

In case this is only happening in Firefox, only the star (layer 2) is visible for me.

And now that layer switched back to normal, and Layer 2 with Darken: 
ck45-test-layer-blend.svg
*ck45-test-layer-blend.svg
(7.56 kB - downloaded 524 times)

In case this is only happening in Firefox, only the celtic knkot (layer 1) is visible for me.

And finally, both (Layer 1 Lighten, Layer 2 Darken): 
ck45-test-layer-blend.svg
*ck45-test-layer-blend.svg
(7.84 kB - downloaded 556 times)

In case this is only happening in Firefox, this image isn't showing at all.
  • Inkscape version 0.92.3
  • Windows 7 Pro, 64-bit
Inkscape Tutorials (and manuals)                      Inkscape Community Gallery                        Inkscape for Cutting Design                     



"Be ashamed to die until you have won some victory for humanity" - Horace Mann                       

June 29, 2016, 10:10:25 AM
Reply #1

brynn

  • Administrator

  • Offline
  • ******

  • 3,897
  • Gender
    Female

    Female
    • Inkscape Community
Wow!  It looks like using any kind of Blend Mode somehow blocks that layer from showing up!  I don't know how or why it does that, but hopefully someone can explain  :)

Next test with other blend modes, out of curiosity.
  • Inkscape version 0.92.3
  • Windows 7 Pro, 64-bit
Inkscape Tutorials (and manuals)                      Inkscape Community Gallery                        Inkscape for Cutting Design                     



"Be ashamed to die until you have won some victory for humanity" - Horace Mann                       

June 29, 2016, 10:18:23 AM
Reply #2

brynn

  • Administrator

  • Offline
  • ******

  • 3,897
  • Gender
    Female

    Female
    • Inkscape Community
Layer 1 in Multiply, Layer 2 is Normal:
ck45-test-layer-blend.svg
*ck45-test-layer-blend.svg
(7.56 kB - downloaded 538 times)

Only star showing in Firefox

Layer 1 is Normal, Layer 2 is Screen:
ck45-test-layer-blend.svg
*ck45-test-layer-blend.svg
(7.56 kB - downloaded 545 times)

  • Inkscape version 0.92.3
  • Windows 7 Pro, 64-bit
Inkscape Tutorials (and manuals)                      Inkscape Community Gallery                        Inkscape for Cutting Design                     



"Be ashamed to die until you have won some victory for humanity" - Horace Mann                       

June 29, 2016, 10:22:38 AM
Reply #3

brynn

  • Administrator

  • Offline
  • ******

  • 3,897
  • Gender
    Female

    Female
    • Inkscape Community
Ok, now going to find IE....

Edit
Looks like the layer blend modes are too much for IE.  It displays SVG images on other pages, where no blend modes are used.  But on this page, it doesn't want to work.  It displays the top page, but it freezes when I try to scroll down.

So anyway, it will be interesting to learn how other browsers handle it!
  • Inkscape version 0.92.3
  • Windows 7 Pro, 64-bit
Inkscape Tutorials (and manuals)                      Inkscape Community Gallery                        Inkscape for Cutting Design                     



"Be ashamed to die until you have won some victory for humanity" - Horace Mann                       

June 29, 2016, 12:03:58 PM
Reply #4

Lazur

  • IC Mentor

  • Offline
  • ******
  • Inkscape Filters Wizard

  • 1,139
  • Gender
    Male

    Male
Layers are groups, blending modes are filters.
If there is some transformation involved -like you resized the page once- the filters got transformed with it
which browsers do not support.
It may be easier to add the same blend filters to objects without layering for a test.

June 29, 2016, 12:21:38 PM
Reply #5

brynn

  • Administrator

  • Offline
  • ******

  • 3,897
  • Gender
    Female

    Female
    • Inkscape Community
Ok, thanks Lazur  :)

What is it that some browsers don't support -- the filters?  or the filtered content that's being resized?

In my tests above, I wasn't actually trying to achieve a certain effect.  Some objects need to be overlapping to be able to see the effect of the blend modes. (keyword "blend" - needs 2 or more things to blend)  But in the topic which got me curious, there were a lot of overlapping objects.  However, removing the blend modes didn't change the appearance of the drawing, as far as I could tell, at all.

Here's the link to that topic:  http://forum.inkscapecommunity.com/index.php?topic=374.0


  • Inkscape version 0.92.3
  • Windows 7 Pro, 64-bit
Inkscape Tutorials (and manuals)                      Inkscape Community Gallery                        Inkscape for Cutting Design                     



"Be ashamed to die until you have won some victory for humanity" - Horace Mann                       

June 29, 2016, 12:41:08 PM
Reply #6

Lazur

  • IC Mentor

  • Offline
  • ******
  • Inkscape Filters Wizard

  • 1,139
  • Gender
    Male

    Male
For example the blurred drop shadow on the right in this image.
It was a known bug resulting pixelation in 0.48 if the blurred object was rotated.

Resizing page to content doesn't have such a visual effect but still it is not supported by browsers to transform filters.

June 29, 2016, 12:58:09 PM
Reply #7

brynn

  • Administrator

  • Offline
  • ******

  • 3,897
  • Gender
    Female

    Female
    • Inkscape Community
Mmmmm....  Since filters are raster content, it seems odd that browsers can't support.  I try to remember   :-D
  • Inkscape version 0.92.3
  • Windows 7 Pro, 64-bit
Inkscape Tutorials (and manuals)                      Inkscape Community Gallery                        Inkscape for Cutting Design                     



"Be ashamed to die until you have won some victory for humanity" - Horace Mann                       

June 29, 2016, 01:07:51 PM
Reply #8

Lazur

  • IC Mentor

  • Offline
  • ******
  • Inkscape Filters Wizard

  • 1,139
  • Gender
    Male

    Male
Filters are generated live just as any other vector element, affected by zooming in browsers.
The filtered area or part of it is rendered onto the screen's pixel grid.
If you involve a transformation on top of the filter chain the two grid mismatch.
Seems an easier way out to not rener that instead of something that is not looking correct. 

June 29, 2016, 02:17:53 PM
Reply #9

brynn

  • Administrator

  • Offline
  • ******

  • 3,897
  • Gender
    Female

    Female
    • Inkscape Community
  • Inkscape version 0.92.3
  • Windows 7 Pro, 64-bit
Inkscape Tutorials (and manuals)                      Inkscape Community Gallery                        Inkscape for Cutting Design                     



"Be ashamed to die until you have won some victory for humanity" - Horace Mann