Add layers with Z-index and blending filters for layers composition and animation. about svgwg

[nikosandronikos]

This is a very large issue and should be broken into smaller more easily addressable chunks.
But I'll comment on some points where I can (note: I'm not a heavy photoshop user)

1. SVG 2 supports z-index
2. This should be possible with mix-blend-mode and z-index on a element
3. Not being a big PhotoShop user I'm not totally sure what you're asking for here
4. Is there anything stopping this being achieved with JS, blending and filters? Seems like something that should be implemented in a library/script rather than SVG.

Changes to the SMIL animation of SVG are unlikely. Your best bet is to look at Web Animations to see if your needs are met there. At some point in the future, an Animation Elements spec will be written that will define a declarative syntax for supporting Web Animations in SVG. This will be based on the existing SMIL animations. If the Web Animations model supports what you need, the next step is to make sure Animation Elements supports it too.

[Emasoft]

Thank you for your answer, Nikos.
My comments on your points:

1 - Good! But is it dynamic (animatable)?

2 - mix-blend mode is not able to reproduce all blending effects of Photoshop layers because it is limited to the color composition. There are more essential layer blending effects that when saving in SVG format would be lost. I'm referring to the following in particular:

Drop Shadow
Adds a shadow that falls behind the contents on the layer.

Inner Shadow
Adds a shadow that falls just inside the edges of the layer’s content, giving the layer a recessed appearance.

Outer Glow and Inner Glow
Add glows that emanate from the outside or inside edges of the layer’s content.

Bevel and Emboss
Add various combinations of highlights and shadows to a layer.

Satin
Applies interior shading that creates a satiny finish.

Gradient and Pattern Overlay Mask
Blend the layer’s content using a patterned or gradient overlay mask.

Stroke
Outlines the object on the current layer using color, a gradient, or a pattern.

Alpha Channel Mask Image
Blend the layer’s content using a custom alpha channel mask image.

Those filters are already present in the SVG specifications, but only as graphic elements filters. All we need is to be able to also apply those to edges of the layer’s content as blending options. In this way it would be possible to preserve layers effects when saving in SVG from Photoshop and other painting applications.

3 - What I'm asking is to apply the layer blending and composition effects also to all the bitmap graphic elements in each layer ( element with embedded raster image data). This is because in Photoshop is now possible to mix both vector and bitmap graphic elements.

4 - The "focus blur" of a layer should depend on the z-index in a constant and deterministic way when this property is enabled. I should be able to load and view any SVG file and find all layers (mountains in the background, towers and trees in between, people in foreground, etc.) reproduced with the "right focus blur" applied on each layer. This in a way and with focus parameters independent from the viewer software or javascript code I'm using to display it. It needs to be fixed in the specs to be consistent and portable. I don't want to edit a layer and put it in a z position to be in focus in an application, saving, and then when I import it in another application discover that same layer out of focus, for example.

5 - about web animations: I don't think web animations (or any other web standard) should be considered when developing the SVG format. This because it is now clear that SVG has become the de facto standard for vector graphics in a variety of fields: mobile apps UI (are all migrating to vector graphics now, dropping PNG for vector drawables, because of the device and dpi independent nature of vector), videogames (2D games on both portable and home consoles are almost all made with vector graphics this days and often originally created in the SVG format and converted to an internal format), cartoons and youtube animations ( a lot of video applications for animations editing used by popular youtube channels import SVG now for both backgrounds and animation frames), professional cartoon animations studios (there are many professional software art tools for creating animations but they have an hard time when it cames to exchange data and files. And because of this SVG is now increasingly used as an universal export format for vector graphics and a bridge between all those tools). The web should not be the focus for SVG. And to make SVG an independent and self sufficient vector file format it should not rely on external javascript libraries or applications specifications. It should provide it's own animation format, and this is what it already does with the absolutely excellent SMIL (the only time synch animation format able to be perfectly reproduced everywhere without loosing animation and audio syncronization).
SMIL should become even more an integral part of the SVG specs, providing the solution to all vector animation software apps out there, all in need of a reliable and universal export format for vector animation. Icons and buttons animations in mobile and tablet apps are now often created with vector frames from SVG files. But because of the lack of a multi-frame feature in the current SVG specifications (frameSet), artists should work with hundreds of single small SVG files, each one encoding a single frame, and without any synch or timeline playback control at all. A graphician should export from his animation app a single SVG with all the playback timings, synchs and keyframes already in place, and not being forced to re-edit and reproduce all the animation synchs in code, manually, using the mobile sdk API, and in a non visual way. Currently SVG with a little modifications (the frameSet element) can already provide all that, because SMIL is already able to compete with many proprietary closed animation file formats. Also even the web development is looking for a way to easily include animated vector images without having to animate them with javascript. Webanimations are not useful for all graphic elements included as Image tags in the html page, because for security reasons the image tag cannot run scripts or javascript. SMIL is the only safe and efficient way to have a vector animation file working in a web page as an Image element. And it is also much better for web developers and artists, because they can finally edit and create visually their animations, and exporting them not as buggy and often incompatible web pages with javascript and many svg mixed, but as a single SVG file. Easier to preview, to playback, to edit in any vector animation app. No vector or animation artists that I know are proficient in javascript, so it is very high the need to provide them with a way to export an SVG with the animation already included as SMIL instead of having to pay a javascript programmer to manually code the animation in a script frame by frame using the Web Animation api.
The need for the animations features I asked above is huge, and every day different libraries are written in the hope of fixing those missing parts of the SVG format (the last effort was the greensock javascript SVG morphing library, created to overcome the limits of the SMIL curve interpolation functions), but in the end they fail, no one of those libraries take hold, because their functionality are not included in the SVG format itself in a universal, platform independent way, and because they require a programmer to do a graphicians job, with awful results.

[Emasoft]

Do I need to break this in many separate issues? I'll do it as soon as I get some time, I promise.

[nikosandronikos]

Please do. Breaking this up will make it much easier to respond.