Setting CSS layer blend modes

Post questions on how to use or achieve an effect in Inkscape.
User avatar
hellocatfood
Posts: 187
Joined: Fri Aug 29, 2008 8:49 pm
Contact:

Setting CSS layer blend modes

Postby hellocatfood » Wed Jan 02, 2019 9:20 am

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?
I'm on The Web | Flickr | tumblr

Lazur
Posts: 4670
Joined: Tue Jun 14, 2016 10:38 am

Re: Setting CSS layer blend modes

Postby Lazur » Wed Jan 02, 2019 9:44 am

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.)

User avatar
hellocatfood
Posts: 187
Joined: Fri Aug 29, 2008 8:49 pm
Contact:

Re: Setting CSS layer blend modes

Postby hellocatfood » Wed Jan 02, 2019 10:00 am

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
Attachments
example_css.svg
(3.8 KiB) Downloaded 35 times
example_inkscapefilter.svg
(4.59 KiB) Downloaded 40 times
I'm on The Web | Flickr | tumblr

v1nce
Posts: 692
Joined: Wed Jan 13, 2010 4:36 am

Re: Setting CSS layer blend modes

Postby v1nce » Wed Jan 02, 2019 10:47 am

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.

User avatar
hellocatfood
Posts: 187
Joined: Fri Aug 29, 2008 8:49 pm
Contact:

Re: Setting CSS layer blend modes

Postby hellocatfood » Wed Jan 02, 2019 11:46 pm

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.
I'm on The Web | Flickr | tumblr

User avatar
brynn
Posts: 10201
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Setting CSS layer blend modes

Postby brynn » Fri Jan 04, 2019 3:39 pm

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.

User avatar
hellocatfood
Posts: 187
Joined: Fri Aug 29, 2008 8:49 pm
Contact:

Re: Setting CSS layer blend modes

Postby hellocatfood » Thu Jan 10, 2019 3:21 am

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
I'm on The Web | Flickr | tumblr

Moini
Posts: 3097
Joined: Mon Oct 05, 2015 10:44 am

Re: Setting CSS layer blend modes

Postby Moini » Fri Jan 11, 2019 6:24 am

Wait for 1.0 - that's going to have a CSS styles dialog. Or use the XML editor in current Inkscape.
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

User avatar
hellocatfood
Posts: 187
Joined: Fri Aug 29, 2008 8:49 pm
Contact:

Re: Setting CSS layer blend modes

Postby hellocatfood » Fri Jan 11, 2019 7:47 am

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 :-)
I'm on The Web | Flickr | tumblr


Return to “Help with using Inkscape”

Who is online

Users browsing this forum: No registered users and 5 guests