Enhancement: add the option to create 9-slice svg elements using CSS border-images
Affects | Status | Importance | Assigned to | Milestone | |
---|---|---|---|---|---|
Inkscape |
New
|
Wishlist
|
Unassigned |
Bug 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://
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://
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.
description: | updated |
tags: | added: svg |
Changed in inkscape: | |
importance: | Undecided → Wishlist |