The example is pretty cool. I’m getting the vertical line in both Chrome and Safari when it’s scaled above a certain size. It’s probably a limitation in the SVG.
Firefox has the background showing up in only the top half. Again it’s probably a bug in the SVG that’s not completely compatible with Firefox. FWIW, here’s two articles on nine-slicing SVG: https://w3.eleqtriq.com/2014/03/the-holy-grail-of-image-scaling/ <https://w3.eleqtriq.com/2014/03/the-holy-grail-of-image-scaling/> https://aerotwist.com/blog/slicing-svg-9-ways/ <https://aerotwist.com/blog/slicing-svg-9-ways/> > On Mar 4, 2018, at 1:00 PM, Carlos Rovira <[email protected]> wrote: > > Hi, > > just found two new things: > > 1.- In SVG 1.2 there 's vector-effect="non-scaling-stroke" > I tried this with my current SVG button and the results are better, but not > accurate, don't know if caused by bugs in implementation, or maybe since > that's all what I can expect. > > 2.- this example [1] that seems to. work pretty well and could be the way > to go. The example is how to implement 9-slice-scaling in SVG. This could > be valid since we can post a method for designers to author this kind of > graphic to achieve same results. > In Chrome works awesome. But in Safari I see a vertical artifact in the > point of resizing and In Firefox, the render is not ok from middle to > bottom. But maybe is something related to the particular SVG. > > I'll let you know how this ends. If it works, it could be very promising :) > > [1] > https://w3.eleqtriq.com/wp-content/static/demos/2014/4-slice/pattern.html > > 2018-03-04 9:35 GMT+01:00 Carlos Rovira <[email protected]>: > >> Hi Alex, >> >> 2018-03-04 8:10 GMT+01:00 Alex Harui <[email protected]>: >> >>> Hi Carlos, can you explain more of what the problem is? In theory, >>> vectors should not need 9-slice. >>> >>> >> Vectors scale great, this can be seen in our website since royale logos >> are all SVGs and I love how it looks when scale since does not lose any >> definition on the way, but that's not 9slice scaling, where we want corners >> not resize and side resize only in one axis (x or y), and the center resize >> in both direction (x and y) >> >> >>> Would another alternative to SVG Skins be ActionScript Skins, or >>> MXMLGraphics Skins? If the issue is that a 1-pixel SVG border for a >>> 100x100 skin becomes 2 pixels thick when in a button that is 200x200, then >>> AS code or MXMLG code could draw the border on-demand. I just looked >>> quickly: does SVG not allow percentage sizing? I think MXMLG does? >>> >>> I think we this we want to achieve easy authoring by designers: Designers >> make their work on design software and export to svg then we put that file >> on our theme and with some instruction we wire it (border-image: >> url(mysvgart.svg);) and maybe some other instruction >> >> With FXG or MXML graphics I think we are talking about code, and in that >> situation I think we don't get to much over CSS3, since the later is the >> standard and get lots of things with very simple instructions. If I want to >> put some art, I still can put some SVG icon or something over the CSS >> definitions. >> >> >>> Or maybe some other custom classes that do support percentages and then >>> draw the right SVG at run-time? Looks like we can specify SVG for a >>> background-image at runtime. See https://stackoverflow.com/ques >>> tions/21915059/setting-background-image-to-dynamic-svg-data >> >> >> If we could have an AS3 class that given some SVG image could render it >> with 9-slice-scaling, that would be cool, but its this possible? >> I think the standard solution is border-image, since it seems to be the >> standard for 9slices scaling, I think is better to wait until that will >> safe to use, or using a polyfill. >> >> While I'm writing this I'm thinking that the problem can be our >> compilation of CSS does not support border-image correctly. I'll check >> that. I'll let you know if that's the problem, >> >> >> >> >>> >>> >>> -Alex >>> >>> From: <[email protected]<mailto:[email protected]>> on >>> behalf of Carlos Rovira <[email protected]<mailto: >>> [email protected]>> >>> Reply-To: "[email protected]<mailto:[email protected]>" < >>> [email protected]<mailto:[email protected]>> >>> Date: Saturday, March 3, 2018 at 10:47 AM >>> To: "[email protected]<mailto:[email protected]>" < >>> [email protected]<mailto:[email protected]>> >>> Subject: My first experience with SVG >>> >>> -- >>> Carlos Rovira >>> http://about.me/carlosrovira >>> >>> >>> >> > > > -- > Carlos Rovira > http://about.me/carlosrovira
