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 http://about.me/carlosrovira
