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%2Fxg5EiYeex2HwKqPuUGG3Us%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%7C8c96fc57d5b142b6cc4e08d5 >82cb5e7a%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636558732329720860&s >data=48ij0yZLzJ%2BiCFF9nwn3ctWWUU%2F1tLNypiOpJ4FOx8M%3D&reserved=0
