Carlos, A while ago, I was doing some experiments with skinning button elements with SVG. Luckily I saved it to our git repo :-) Please take look at these three approaches: https://github.com/apache/royale-asjs/tree/develop/fxg2svg/tests
Hope this helps in some way. Thanks, Om On Mon, Mar 5, 2018 at 11:07 AM, Alex Harui <[email protected]> wrote: > OK, if border-image works on the browsers we care about that's fine with > me. If it wasn't working, then we could have our own extensions that make > it work. > > -Alex > > On 3/5/18, 10:57 AM, "[email protected] on behalf of Carlos Rovira" > <[email protected] on behalf of [email protected]> wrote: > > >Hi Alex, > > > >I'm getting different sizes ok. The problem I want to pursue is to get for > >designers a direct way to author some graph and then use it directly in > >the > >Royale App. For us the main need here is 9 slice scaling, since normaly UI > >controls (buttons, text inputs, scrollbars,...) use to be "rectangular" > >areas that resize. But in order to this rect areas to keep visual > >consistent is that corners remain constant. > >So, I think we can't do anything from our side, to solve this > > > >My latest research is: > > > >This code is what works better for me: > > > >border-image-source: url(assets/JewelButton2.svg) ; > > border-image-slice: 4; > > border-image-width: 4; > > > > background-image: linear-gradient(#3BB0FF, #1E36FA); > > background-size: cover; > > background-repeat: no-repeat; > > background-clip: padding-box; > > > >(Note: for SWF this line > >background-image: linear-gradient(#3BB0FF, #1E36FA); > >is making the SWF doesn't compile, only JS does > >There's the following error: > > > >Error: CSS codegen problem. Reason: 'Unexpected function call property > >value: linear-gradient(#3BB0FF, #1E36FA)' > >) > > > >So "border-image" is working ok finaly (I thought it's not, maybe to some > >other problem at that time) > >Notice as well that I need to put all properties in "separate" mode, since > >I can't find the way to get the same result in combat CSS mode, > >don't know why > > > >In this way, we can get lots of looks for a control (have irregular border > >shapes, different corners por each one, have bevels, and more > >But for me is not perfect, since the area inside will need a gradient > >(like > >in the code) or a separate image. I tried to use an image but couldn't get > >to work properly, sometimes the image was showing the corners behind the > >border. This could be a problem with CSS compiler results. > > > >The solution I posted with a SVG using sub-svgs may be possible, but it's > >cumbersome to develop and that's not the target. > > > >The most easy would be CSS3, but this is more limited to what SVG give us. > > > >So, in resume: > > > >* SVGs that can't be get directly from an authoring tool (or with few > >changes in the final code exported) seems to be of no interest for us > >since > >we, as a framework, want ways to make things that could be some kind of > >foundation. In this case would be author a SVG and put in assets folder > >and > >touch minimal things in CSS rules to make it work. > >* for now I'll stick with my SVG border solution and linear gradient > >inside. > >* I'd like to make this work in SWF or at least compile since without my > >style, both versions (JS-SWF) looks very similar. > >* Seems there's various things to solve in CSS compilation, and maybe with > >those solved we can get scenarios that right now are failing > > > > > > > > > > > >2018-03-05 17:41 GMT+01:00 Alex Harui <[email protected]>: > > > >> OK, let me try asking it this way: > >> > >> What does the SVG look like for a 100x100 button vs a 200x200 button vs > >>a > >> NxM button? > >> > >> The key thing for me is that, in Royale, we are always creating dynamic > >> pages instead of static pages. And that gives us more options to solve > >> problems that aren't otherwise easily solved. To reduce the amount of > >> code we have to write and support we want to use the browser's native > >> functionality as much as possible, but on the other hand, if it can be > >> done in a PAYG manner, having folks opt-in to running code that solves > >> problems in the best way is a feature advantage for Royale. > >> > >> So, if we can identify what needs to change to be responsive with custom > >> markup, we have the option of generating the right SVG on-demand at > >> runtime. Static pages do not have that option. Can we identify what > >> needs to change to be responsive? > >> > >> Thanks, > >> -Alex > >> > >> On 3/5/18, 6:00 AM, "[email protected] on behalf of Carlos > Rovira" > >> <[email protected] on behalf of [email protected]> wrote: > >> > >> >Hi Alex, > >> > > >> >Don't know if I understand correctly your suggestion but don't think > >>so. > >> >it > >> >seems that one of the recommendations to get SVG to be responsive is > >>just > >> >remove width and height in the own SVG file. I see that solves many > >> >problems. > >> > > >> >2018-03-05 0:34 GMT+01:00 Alex Harui <[email protected]>: > >> > > >> >> Let me pose the question this way: If we allowed or extended SVG to > >> >>have > >> >> percentWidth and percentHeight would that solve the problem? > >> >> > >> >> -Alex > >> >> > >> >> On 3/4/18, 3:18 AM, "Harbs" <[email protected]> wrote: > >> >> > >> >> >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://na01.safelinks.protection.outlook.com/?url= > >> >> https%3A%2F%2Fw3.eleqtr > >> >> >iq.com%2F2014%2F03%2Fthe-holy-grail-of-image-scaling% > >> >> 2F&data=02%7C01%7Caha > >> >> >rui%40adobe.com%7C23a6680843ba4800c48908d581c1 > >> >> adfb%7Cfa7b1b5a7b34438794aed > >> >> >2c178decee1%7C0%7C0%7C636557591208847751&sdata= > >> >> oQNDM%2FHhpRtpctJ96zqh3mwXE > >> >> >p5Fg%2F8aGNQlgucCS78%3D&reserved=0 > >> >> ><https://na01.safelinks.protection.outlook.com/?url= > >> >> https%3A%2F%2Fw3.eleqt > >> >> >riq.com%2F2014%2F03%2Fthe-holy-grail-of-image-scaling% > >> >> 2F&data=02%7C01%7Cah > >> >> >arui%40adobe.com%7C23a6680843ba4800c48908d581c1 > >> >> adfb%7Cfa7b1b5a7b34438794ae > >> >> >d2c178decee1%7C0%7C0%7C636557591208847751&sdata= > >> >> oQNDM%2FHhpRtpctJ96zqh3mwX > >> >> >Ep5Fg%2F8aGNQlgucCS78%3D&reserved=0> > >> >> >https://na01.safelinks.protection.outlook.com/?url= > >> >> https%3A%2F%2Faerotwist > >> >> > >>>.com%2Fblog%2Fslicing-svg-9-ways%2F&data=02%7C01%7Caharui%40adobe.com > >> >> %7C23 > >> >> >a6680843ba4800c48908d581c1adfb%7Cfa7b1b5a7b34438794aed2c178de > >> >> cee1%7C0%7C0% > >> >> >7C636557591208847751&sdata=6b99cWlKvYos3% > >> 2BFa8GEGP40B1ILX2iv8i3HHsXyKTg > >> >> I%3 > >> >> >D&reserved=0 > >> >> ><https://na01.safelinks.protection.outlook.com/?url= > >> >> https%3A%2F%2Faerotwis > >> >> > >>>t.com%2Fblog%2Fslicing-svg-9-ways%2F&data=02%7C01%7Caharui%40adobe.com > >> >> %7C2 > >> >> >3a6680843ba4800c48908d581c1adfb%7Cfa7b1b5a7b34438794aed2c178de > >> >> cee1%7C0%7C0 > >> >> > >> >>>%7C636557591208847751&sdata=6b99cWlKvYos3% > >> 2BFa8GEGP40B1ILX2iv8i3HHsXyKTg > >> >> I% > >> >> >3D&reserved=0> > >> >> > > >> >> >> 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://na01.safelinks.protection.outlook.com/?url= > >> >> https%3A%2F%2Fw3.eleqt > >> >> >>riq.com%2Fwp-content%2Fstatic%2Fdemos%2F2014%2F4- > >> >> slice%2Fpattern.html&dat > >> >> >>a=02%7C01%7Caharui%40adobe.com%7C23a6680843ba4800c48908d581c1 > >> >> adfb%7Cfa7b1 > >> >> >>b5a7b34438794aed2c178decee1%7C0%7C0%7C636557591208847751& > >> >> sdata=lPfA%2BFzy > >> >> >>RY4CdP9%2BibvJCL0dhKwe2lx8qTlS3tTpooA%3D&reserved=0 > >> >> >> > >> >> >> 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://na01.safelinks.protection.outlook.com/?url= > >> >> https%3A%2F%2Fstacko > >> >> >>>>verflow.com%2Fques&data=02%7C01%7Caharui%40adobe.com% > >> >> 7C23a6680843ba4800 > >> >> >>>>c48908d581c1adfb%7Cfa7b1b5a7b34438794aed2c178de > >> >> cee1%7C0%7C0%7C636557591 > >> >> >>>>208847751&sdata=VK3jcII7eQmy0OSLXLqT%2Fxg5EiYeex2HwKqPuU > GG3Us%3D& > >> >> reserv > >> >> >>>>ed=0 > >> >> >>>> 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 > >> >> >>>> > >> >> >>>>https://na01.safelinks.protection.outlook.com/?url= > >> >> http%3A%2F%2Fabout.m > >> >> >>>>e%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com% > >> >> 7C23a6680843ba4800c4 > >> >> >>>>8908d581c1adfb%7Cfa7b1b5a7b34438794aed2c178de > >> >> cee1%7C0%7C0%7C63655759120 > >> >> >>>>8847751&sdata=BujZc7FE%2B1xWLPQlhOnL9zb2Q2ny% > >> >> 2FRlHcOREjQoDaUA%3D&reserv > >> >> >>>>ed=0 > >> >> >>>> > >> >> >>>> > >> >> >>>> > >> >> >>> > >> >> >> > >> >> >> > >> >> >> -- > >> >> >> Carlos Rovira > >> >> >> > >> >> >>https://na01.safelinks.protection.outlook.com/?url= > >> >> http%3A%2F%2Fabout.me% > >> >> >>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com% > >> >> 7C23a6680843ba4800c48908 > >> >> >>d581c1adfb%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> >> 7C63655759120884775 > >> >> > >>>>1&sdata=BujZc7FE%2B1xWLPQlhOnL9zb2Q2ny%2FRlHcOREjQoDaUA%3D&reserved=0 > >> >> > > >> >> > >> >> > >> > > >> > > >> >-- > >> >Carlos Rovira > >> >https://na01.safelinks.protection.outlook.com/?url= > >> http%3A%2F%2Fabout.me%2 > >> >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com% > >> 7Ca967cca3feaf4beb9efb08d5 > >> >82a19155%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> 7C636558552804074523&s > >> >data=Xko8WWW9DwJy5TjCuMfwlnps9iluBBpSTZ1k2TtUNdU%3D&reserved=0 > >> > >> > > > > > >-- > >Carlos Rovira > >https://na01.safelinks.protection.outlook.com/?url=http%3A% > 2F%2Fabout.me%2 > >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C8c96fc57d > 5b142b6cc4e08d5 > >82cb5e7a%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C63655 > 8732329720860&s > >data=48ij0yZLzJ%2BiCFF9nwn3ctWWUU%2F1tLNypiOpJ4FOx8M%3D&reserved=0 > >
