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%7C23a6680843ba4800c48908d581c1adfb%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%7C23a6680843ba4800c48908d581c1adfb%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%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% >7C636557591208847751&sdata=6b99cWlKvYos3%2BFa8GEGP40B1ILX2iv8i3HHsXyKTgI%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%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0 >%7C636557591208847751&sdata=6b99cWlKvYos3%2BFa8GEGP40B1ILX2iv8i3HHsXyKTgI% >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%7C23a6680843ba4800c48908d581c1adfb%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%7Cfa7b1b5a7b34438794aed2c178decee1%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%7Cfa7b1b5a7b34438794aed2c178decee1%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 >
