[svgwg] Issue: On the urgent need to add a native 9-slice scaling mode to the SVG standard marked as Proposal

dstorey has just labeled an issue for https://github.com/w3c/svgwg as "Proposal":

== On the urgent need to add a native 9-slice scaling mode to the SVG standard ==
As you may already know, the SVG format is now used widely in mobile applications both on Android and on iOS. Due to the device independent quality of SVG, and to the unnumerable varieties of screen dpi, ratios and resolutions in mobile devices, developers are now sistematically dropping bitmaps assets and replacing them with SVG assets. This is happening not only in UIs components, but also in any visual asset. But at the moment SVG is lacking some fundamental features, that should be implemented as soon as possible, because of the growing importance and need of these in app development.

The most important one is 9-slice scaling mode (also known as 9-tiles, 9-patches or 3x3 border tiles). This feature is currently available only on the web, and it requires the developer to use an external CSS sheet where a border-tile scaling matrix is defined for the svg image. 
But SVG is not a format used only on the web anymore. It has become the de facto standard for vector graphics, and It is used on mobile even more extensively than on the web. Consequently it cannot delegate anymore such functionalities to a web standard like CSS. It is imperative that SVG could be used effectively also outside of the web browsers world. 

For reference, the following links are examples of mobile developers struggling with the lack of a standard 9-slice feature in the SVG format, showing how far they are going and the troubles they have trying develop some ugly hack to do it:

http://blog.twintechs.com/explorations-in-cross-platform-assets-xamarin-forms

https://github.com/praeclarum/NGraphics/issues/29

A true standard 9-slice option should be a view attribute of any SVG image (or even element or groups) and it should be something that artists can use to draw resizable UI components directly in applications like Inkscape or Illustrator and to export them in SVG in a standard and independent format, consistent in his rendering on all devices and platforms. 

If this standard is not defined by the SVG group, there will be a growing multitude of different implementations, all requiring a lot of custom code and the assets would be impossible to create in a graphic app because there is no standard. The process of cutting a vector object and scaling it is something that can be implemented in a variety of different ways. Cutting the bezier in the intersection with the slicing grid lines, for example, or adding a node instead. Or, like some vector software does for 2D mesh deformations, applying a affine transform matrix composed by 9 different transform matrixes. Or creating a mesh grid of curves and cutting it by boolean operations. Or preserving the underlying geometry and just applying a mask to nine views of the same object (but this would mean to loose the advantage of the scaling and deformation of shapes that SVG has on the bitmap assets).

This is an issue that should be defined best in the SVG format specifications, to ensure consistency in the resulting image on all devices and across all software applications both when creating and displaying the SVG image file.


See https://github.com/w3c/svgwg/issues/51

Received on Friday, 4 May 2018 05:43:28 UTC