This is a read-only archive of the inkscapeforum.com site. You can search for info here or post new questions and comments at 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?
Setting CSS layer blend modes
-
hellocatfood
- Posts: 193
- Joined: Fri Aug 29, 2008 8:49 pm
- Contact:
Re: Setting CSS layer blend modes
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.)
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.)
-
hellocatfood
- Posts: 193
- Joined: Fri Aug 29, 2008 8:49 pm
- Contact:
Re: Setting CSS layer blend modes
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 142 times
-
- example_inkscapefilter.svg
- (4.59 KiB) Downloaded 147 times
Re: Setting CSS layer blend modes
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.
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.
-
hellocatfood
- Posts: 193
- Joined: Fri Aug 29, 2008 8:49 pm
- Contact:
Re: Setting CSS layer blend modes
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 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
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.
Basics - Help menu > Tutorials
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
-
hellocatfood
- Posts: 193
- Joined: Fri Aug 29, 2008 8:49 pm
- Contact:
Re: Setting CSS layer blend modes
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
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)
Inkscape FAQ - Learning Resources - Website with tutorials (German and English)
-
hellocatfood
- Posts: 193
- Joined: Fri Aug 29, 2008 8:49 pm
- Contact:
Re: Setting CSS layer blend modes
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
