royale-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From OmPrakash Muppirala <bigosma...@gmail.com>
Subject Re: My first experience with SVG
Date Tue, 06 Mar 2018 00:50:38 GMT
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 <aharui@adobe.com.invalid>
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, "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%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: <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%7C8c96fc57d
> 5b142b6cc4e08d5
> >82cb5e7a%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C63655
> 8732329720860&s
> >data=48ij0yZLzJ%2BiCFF9nwn3ctWWUU%2F1tLNypiOpJ4FOx8M%3D&reserved=0
>
>

Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message