royale-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Alex Harui <aha...@adobe.com.INVALID>
Subject Re: My first experience with SVG
Date Mon, 05 Mar 2018 19:07:41 GMT
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, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> 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 <aharui@adobe.com.invalid>:
>
>> 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, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
>> <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> 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 <aharui@adobe.com.invalid>:
>> >
>> >> 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" <harbs.lists@gmail.com> 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
>><carlosrovira@apache.org>
>> >> >>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 <carlosrovira@apache.org>:
>> >> >>
>> >> >>> Hi Alex,
>> >> >>>
>> >> >>> 2018-03-04 8:10 GMT+01:00 Alex Harui <aharui@adobe.com.invalid>:
>> >> >>>
>> >> >>>> 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: <carlos.rovira@gmail.com<mailto:carlos.rovira@gmail.com>>
>>on
>> >> >>>> behalf of Carlos Rovira <carlosrovira@apache.org<mailto:
>> >> >>>> carlosrovira@apache.org>>
>> >> >>>> Reply-To: "dev@royale.apache.org<mailto:dev@royale.apache.org>"
>><
>> >> >>>> dev@royale.apache.org<mailto:dev@royale.apache.org>>
>> >> >>>> Date: Saturday, March 3, 2018 at 10:47 AM
>> >> >>>> To: "dev@royale.apache.org<mailto:dev@royale.apache.org>"
<
>> >> >>>> dev@royale.apache.org<mailto:dev@royale.apache.org>>
>> >> >>>> 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

Mime
View raw message