Page 1 of 1

Setting CSS layer blend modes

Posted: Wed Jan 02, 2019 9:20 am
by hellocatfood
I'm trying to get inkscape blend modes recognised in Firefox and Chrome but like many I've noticed that the way that Inkscape does it (via filters) isn't recognised in browsers.

After some research I've found that blend modes can be set via css https://developer.mozilla.org/en-US/doc ... blend-mode

Amazingly these can be read by Inkscape as well as in a browser! Aside from opening the xml editor is there any way to set the blend modes within inkscape?

Re: Setting CSS layer blend modes

Posted: Wed Jan 02, 2019 9:44 am
by Lazur
Hmm didn't remember that topic.

The filter editor can be used to create a custom filter and making it accessible in the file;
the objects panel (Objects/Objects...) and the layer panel can be used for adding simple blend filters to objects. Needs some testing if they work with layers.

On that note, there is an extension for the job in the gallery here. (Haven't tested it either myself. My experience is better to avoid custom blending -or using the background image as a filter input- as much as possible. They are melting the pc.)

Re: Setting CSS layer blend modes

Posted: Wed Jan 02, 2019 10:00 am
by hellocatfood
Lazur wrote:Hmm didn't remember that topic.

That topic is from another inkscape website.

Lazur wrote:The filter editor can be used to create a custom filter and making it accessible in the file;
the objects panel (Objects/Objects...) and the layer panel can be used for adding simple blend filters to objects. Needs some testing if they work with layers.


Inkscape filters can't be read by browsers. If you take a look at the source of an svg you can see that the layer blend modes are wrapped around <filter> and <feBlend> tags. When the layer blend modes are set via css they're within the object's <style> tag.

I've attached two example files. Try opening them in inkscape and in browsers.

What I'm after is a way to set the layer blend mode via css but within inkscape (without using the xml editor). It'd be great if it was by the current method for setting layer

Re: Setting CSS layer blend modes

Posted: Wed Jan 02, 2019 10:47 am
by v1nce
What are you trying to achieve ?
Unless you're trying to do compositing/blending (=merging a set of svg with html ) on the clientside I don't see what is the problem.
Taken as a whole a svg with its filters should display fine. Otherwise it is a bug in the browser.
Caniuse says that support for mix-blendmode (css) is 86% against 95% for filters in svg.

Re: Setting CSS layer blend modes

Posted: Wed Jan 02, 2019 11:46 pm
by hellocatfood
I'm using a service called Cheap Bots Done Quick to post an image of an SVG to Twitter https://cheapbotsdonequick.com/ I know there's other ways to do this but for this specific purpose I need to use this service.

I didn't know about Can I use... thanks for bringing it to my attention!

I have tried both of the SVGs I posted in both Firefox and Chrome (beta and stable versions) and still the only one that shows the layer blending modes is the css version. The stats for CSS and Filter blend modes show that both browsers should support it.

It might be something I have to take to the inkscape developers.

Re: Setting CSS layer blend modes

Posted: Fri Jan 04, 2019 3:39 pm
by brynn
I don't clearly understand what you're asking. But I see Extensions menu > Web > Slicer. There are 3 related extensions there (and "slicer" doesn't seem to be the best description), which I think together write the HTML/CSS for you. I'm not sure how they would handle the blend modes though.

Re: Setting CSS layer blend modes

Posted: Thu Jan 10, 2019 3:21 am
by hellocatfood
brynn wrote:I don't clearly understand what you're asking. But I see Extensions menu > Web > Slicer. There are 3 related extensions there (and "slicer" doesn't seem to be the best description), which I think together write the HTML/CSS for you. I'm not sure how they would handle the blend modes though.

The slicer plugin outputs images. I want to set the blend modes within the svg itself.

hmmm, I'm not quite sure how else or how best to describe what I'm after.

I want a method within inkscape to add a blend mode to an object or layer via css. The different blend modes are described here: https://developer.mozilla.org/en-US/doc ... blend-mode

Re: Setting CSS layer blend modes

Posted: Fri Jan 11, 2019 6:24 am
by Moini
Wait for 1.0 - that's going to have a CSS styles dialog. Or use the XML editor in current Inkscape.

Re: Setting CSS layer blend modes

Posted: Fri Jan 11, 2019 7:47 am
by hellocatfood
Moini wrote:Wait for 1.0 - that's going to have a CSS styles dialog. Or use the XML editor in current Inkscape.


Brilliant! Thanks for the information. I guess for now I'll have to use the XML editor :-)