I have been using Inkscape for webdesign and creating a box frame involved cutting the design in 8 pngs (top, top-left, ...) for all directions plus the inner color. This way complicated frame shapes couldn't be achieved, but the overall result was good for web.
Now using svg images becomes more popular and to make the box frame resolution independent, one would cut the svg design to 8 svgs(!). That would not be great, because svg renderers may not be pixel perfect and there could be glitches between the images. Nicest solution would be to have it all in one svg containing some additional metadata. This will probably not be possible on current web browsers, but...
I am creating some software, that would need skinning and the skins will probably be very artistic. I am not tied to web, as the program will be standalone.
What I want to achieve is being able to automatically modify svg from:

to:

One solution is to add metadata to each path node, associating it with up/down, left/right.
It would be easy normally, as svg is xml and I can add metadata to any object, but path nodes are just text instead of xml tags.
Another solution would be to associate nodes with corners based on their position, but that would be limiting and may be hard to predict.

Vector graphics is clearly future and I cannot believe I couldn't find any info on this subject. Please share your thoughts on this. How could fully-svg design enable resizing to fit the contents?