| 2014-07-10 10:01:23 |
EmanueleSabetta |
description |
OS: Apple OS X 10.9.4
Inkscape version: v0.48.2
PROBLEM: The 9-slice scaling grid has been around in desktop graphics software for some years already and is well known to users of Flash and Illustrator. It's a brilliant technique for scaling images by dividing them into sections that have a fixed size (the corners) and sections that are flexible (the edges and the center). In fact this method is so powerful that 9-slice elements are standard classes in most development platforms (Android, Flash, Flex, etc). A similar technique (9-tiles or 9-grid) is used in HTML pages and native 9 sliced images are exported by graphic software like Photoshop.
The only platform missing 9-slice elements is Inkscape SVG. This means that to create a 9-slice svg element we currently need to use convoluted techniques that are quite complicated to implement, like this popular one devised by Dirk Weber:
http://w3.eleqtriq.com/2014/03/the-holy-grail-of-image-scaling/
Because of this deficiency you cannot even make a resizeable SVG button or box border (very common web page elements) without resorting to tricks and manual modifications to the SVG file.
SOLUTION: CSS has border-image which allows 9-sliced images that can also be used together with SVG images. Especially for use case of scalable buttons and box borders this seems to be the ideal solution:
http://www.w3.org/TR/css3-background/#border-images
Using border-image Inkscape should feature those options:
- The option to create a new "9-slice element" from any existing object or group of objects. The option automatically use boolean operation to slice the object in 9 pieces and assigning to the 9 pieces the corresponding CSS classes with the border-images tags. It will be a special group element, and the 9 elements should be selectable for individual editing of properties (fill color and patterns, strokes, masking, filter effects, etc.).
- The option to load 9-slice PNG images (like those defined in the Android SDK) and use the 9 bitmap tiles as image elements of a new or an existing 9-slice svg element.
- The option to correctly import SVG files with CSS border-image styled elements, and recognizing in Inkscape as 9-slices svg elements.
- Add a new tab to the object properties box or a new dialog box (like the gradient dialog box) to edit and modify all the CSS border-image parameters of the 9-slice svg element.
- Add the option to substitute a single tile of the 9 tiles composing the 9-slice without affecting the others 8 with a different object or group of objects.
- Add to the Align Panel Box a new tool to automatically dispose elements in a 9 grid, with the options to remove gaps and resize the elements to fit or fill the 9 grid rectangles preserving or not the original height-width ratio.
- Allow to set the z order of the 9 tiles indipendently. An user must be able to put a corner tile above the side tile for example, or the borders tiles above the center tile.
- The Option to save the CSS stylesheet inside the SVG file or as an external CSS file.
- Add the option to automatically re-flow and wrap the text inside the center tile (instead of scaling it) when the user resizes the 9-slice svg element. |
OS: Apple OS X 10.9.4
Inkscape version: v0.48.2
PROBLEM: The 9-slice scaling grid has been around in desktop graphics software for some years already and is well known to users of Flash and Illustrator. It's a brilliant technique for scaling images by dividing them into sections that have a fixed size (the corners) and sections that are flexible (the edges and the center). In fact this method is so powerful that 9-slice elements are standard classes in most development platforms (Android, Flash, Flex, etc). A similar technique (9-tiles or 9-grid) is used in HTML pages and native 9 sliced images are exported by graphic software like Photoshop.
The only platform missing 9-slice elements is Inkscape SVG. This means that to create a 9-slice svg element we currently need to use convoluted techniques that are quite complicated to implement, like this popular one devised by Dirk Weber:
http://w3.eleqtriq.com/2014/03/the-holy-grail-of-image-scaling/
Because of this deficiency you cannot even make a resizeable SVG button or box border (very common web page elements) without resorting to tricks and manual modifications to the SVG file.
SOLUTION: CSS has border-image which allows 9-sliced images that can also be used together with SVG images. Especially for use case of scalable buttons and box borders this seems to be the ideal solution:
http://www.w3.org/TR/css3-background/#border-images
Using border-image Inkscape should feature those options:
- The option to create a new "9-slice element" from any existing object or group of objects. The option automatically use boolean operation to slice the object in 9 pieces and assigning to the 9 pieces the corresponding CSS classes with the border-images tags. It will be a special group element, and the 9 elements should be selectable for individual editing of properties (fill color and patterns, strokes, masking, filter effects, etc.).
- The option to load 9-slice PNG images (like those defined in the Android SDK) and use the 9 bitmap tiles as image elements of a new or an existing 9-slice svg element.
- The option to correctly import SVG files with CSS border-image styled elements, and recognizing in Inkscape as 9-slices svg elements.
- Add a new tab to the object properties box or a new dialog box (like the gradient dialog box) to edit and modify all the CSS border-image parameters of the 9-slice svg element.
- Add the option to substitute a single tile of the 9 tiles composing the 9-slice without affecting the others 8 with a different object or group of objects.
- Add to the Align Panel Box a new tool to automatically dispose elements in a 9 grid, with the options to remove gaps and resize the elements to fit or fill the 9 grid rectangles preserving or not the original height-width ratio. This option should be available even before the 9-slice object is created, for any selected groups of 9 elements. The user should be able to use this option on it before giving the command to create a 9-slice element from it.
- Allow to set the z order of the 9 tiles indipendently. An user must be able to put a corner tile above the side tile for example, or the borders tiles above the center tile.
- The Option to save the CSS stylesheet inside the SVG file or as an external CSS file.
- Add the option to automatically re-flow and wrap the text inside the center tile (instead of scaling it) when the user resizes the 9-slice svg element. |
|
