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

[Emasoft]

Export from Photoshop in SVG is currently very difficult because of many limitations of the SVG format. Please add support for the following:

• Layers with Z-index
• Layers Blending Filters for layers composition (i.e reproducing all Photoshop blending filters)
• Layers Blending should include embedded/linked bitmaps of each layer (as in Photoshop)
• Layer "in focus/out of focus" effect based on animated Z-Index and gaussian blur filter
• Layers animation with SMIL for smooth sub-pixel scrolling and looped parallax scrolling
• Use of the proposed pageSet for multipage documents
• Multiple animation frames (frameSet) for frame-by-frame animation
• Keyframes in animation frames (frameSet) for animation states (i.e. button push, button release, etc) and common cycles type (once, loop, ping-pong, reverse, mirror, flip-flop.. etc)
• SMIL animated interpolation and shape morphing between the Keyframes of the frameSet (for automatic inbetweening").
• Easing functions for frames inbetweening and SMIL morphing between keyframes (i.e. easeInOutSin, easeOutElastic, easeDampedOscillation, easeInOutBunch, etc.)
• Improve the SMIL interpolation algorithm with a better non-overlapping morphing algorithm (currently the SMIL interpolation does an ugly job, producing a messed self-intersecting animation). If you interpolate the curves only, it will give rise to unwanted intersections and produce an unintuitive tween, especially for closed shapes. A correct approach is to find a correspondence between the interiors of the shapes and interpolate that. If you consider the two shapes as piecewise linear, you can triangulate both and find a correspondence b/w the triangles and eventually interpolate the triangles. You can add points at close intervals on the curve to make it 'almost' piecewise linear. Then you do the same with the destination curve, until both origin and destination have the same number of points. Then any standard triangulation algorithm can be applied to the enhanced set of points. For best results you can use “Constrained Delaunay Triangulation”, or “Sorted Ear Clipping” (details can be found here: http://www.cosy.sbg.ac.at/~held/projects/triang/triang.html and here: http://www.geom.uiuc.edu/~samuelp/del_project.html ). The latter is faster and easier to implement. Once you have the triangulated curve, then you need to choose the best possible triangle (the one whose angles are not differing much) at each step to interpolate between the points. A good paper on the subject is this: “Intersection-Free Morphing of Planar Graphs” ( http://ftp.cs.arizona.edu/~kobourov/gmorph.pdf ). Another paper, more advanced algorithm because it can morph even self-overlapping curves, is this one: “Tweening Boundary Curves of Non-simple Immersions of a Disk” ( http://www.ics.uci.edu/~gopi/SamplePubs/Tweening.pdf ). Here are some videos of the latter morphing algorithm at work: http://youtu.be/EHBdTD5EA6M http://youtu.be/0DDC3fbwtIw This is needed to allow SMIL to produce the right in between frames between the given Keyframes.
• Option to embed the used fonts inside the SVG file to allow portability (as PDF does). Currently is very hard to exchange SVG documents between different artists because of the lack of this option. All common fonts formats (truetype, TTC, OpenTypeFormat, adobe CFF, WOFF, AAT, Quickdraw GX, etc.) should be supported. Converting to SVG Fonts is not an option because they lack kerning and other complementary informations.
• Option to define image slicing and 9-tiles scaling grid parameters inside the SVG file, without having to use an external CSS style sheet to apply the "border-image" property. This is very important for exporting SVG for web development or mobile UI development, where responsive and adaptive graphical elements are now the standard.

Thank you.

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