You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Carlos Rovira <ca...@apache.org> on 2018/03/03 18:47:12 UTC
My first experience with SVG
Hi,
I was this days playing with SVG to skin a button. My target was to try to
get a complete theme that could be skinned only with SVG.
After playing with Button, I don't see an easy way to make a button works
ok with SVG. I think the way to do this it with "border-image" property in
order to have some kind of 9-slice scaling, but this property seems not to
work ok in all browser (let me know if I'm wrong) [1]
So for Button I ended using CSS3 properties. In the case of buttons, I must
to say that this seems to target almost 95% of what people expect. And
using software like Sketch I think that get to the final CSS 3 code is in
some way "quick".
For square graphics like radios or checkboxes maybe SVG will fit more
easily. I'll let you know as I get to that.
btw, although I'm uploading some styles, don't take the current work as
final. It should change a lot as I get more components and rework all as I
get more experience I the complete set. In the end, I have to make a
refactor to "Jewel", and the current theme is called blue but I uploaded a
orange button ;), I'm getting some experience on what can I do and what not
:)
For example this is a first render of the current button, just for fun :)
[1] https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image
--
Carlos Rovira
http://about.me/carlosrovira
Re: My first experience with SVG
Posted by Harbs <ha...@gmail.com>.
I’ve used 2 strategies so far in Royale:
1. Subclasses ImageButton and se the src property to an SVG image. This in really only good for buttons which have an image *inside* the button.
2. Subclass Group and set :hover, :active, etc. using background-image to set the background of the div to the image which could be SVG.
Harbs
> On Mar 3, 2018, at 8:47 PM, Carlos Rovira <ca...@apache.org> wrote:
>
>
> Hi,
>
> I was this days playing with SVG to skin a button. My target was to try to get a complete theme that could be skinned only with SVG.
>
> After playing with Button, I don't see an easy way to make a button works ok with SVG. I think the way to do this it with "border-image" property in order to have some kind of 9-slice scaling, but this property seems not to work ok in all browser (let me know if I'm wrong) [1]
>
> So for Button I ended using CSS3 properties. In the case of buttons, I must to say that this seems to target almost 95% of what people expect. And using software like Sketch I think that get to the final CSS 3 code is in some way "quick".
>
> For square graphics like radios or checkboxes maybe SVG will fit more easily. I'll let you know as I get to that.
>
> btw, although I'm uploading some styles, don't take the current work as final. It should change a lot as I get more components and rework all as I get more experience I the complete set. In the end, I have to make a refactor to "Jewel", and the current theme is called blue but I uploaded a orange button ;), I'm getting some experience on what can I do and what not :)
>
> For example this is a first render of the current button, just for fun :)
>
>
>
>
> [1] https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image <https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira <http://about.me/carlosrovira>
>
Re: My first experience with SVG
Posted by Carlos Rovira <ca...@apache.org>.
Thanks Om!
I was checking your examples and If I understand ok, you where trying to
make some skin translation to XSLT, but don't understand the final focus.
Hope you can tell me about your target with this experiments.
btw, what tool you use to create the SVGs in that folder?
For what I see, your approach has many code involved with FXG. What I want
to get tries to be more "designer" friendly than "coder" friendly. I assume
coders can make lots of things in the framework with CSS3 and/or SVG code
exported from some design in a tool such Sketch. But for the basic theme, I
want to have something very "straight forward" that a designer can give to
the coder and then with many few needs could work in Royale.
I think a coding way would be great to give more possibilities, but for now
I'll concentrate in the other way and always others (like you) can
contribute something like this, since I think in the end we will need a way
to have declarative ways to make graphics in royale.
thanks for let me know about your experiments
Carlos
2018-03-06 1:50 GMT+01:00 OmPrakash Muppirala <bi...@gmail.com>:
> 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 <ah...@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 <ah...@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 <ah...@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" <ha...@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
> > >><ca...@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<ma...@royale.apache.org>>
> > >> >> >>>> Date: Saturday, March 3, 2018 at 10:47 AM
> > >> >> >>>> To: "dev@royale.apache.org<ma...@royale.apache.org>" <
> > >> >> >>>> dev@royale.apache.org<ma...@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
> >
> >
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: My first experience with SVG
Posted by OmPrakash Muppirala <bi...@gmail.com>.
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 <ah...@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 <ah...@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 <ah...@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" <ha...@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
> >><ca...@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 <ah...@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: <ca...@gmail.com>>
> >>on
> >> >> >>>> behalf of Carlos Rovira <carlosrovira@apache.org<mailto:
> >> >> >>>> carlosrovira@apache.org>>
> >> >> >>>> Reply-To: "dev@royale.apache.org<ma...@royale.apache.org>"
> >><
> >> >> >>>> dev@royale.apache.org<ma...@royale.apache.org>>
> >> >> >>>> Date: Saturday, March 3, 2018 at 10:47 AM
> >> >> >>>> To: "dev@royale.apache.org<ma...@royale.apache.org>" <
> >> >> >>>> dev@royale.apache.org<ma...@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
>
>
Re: My first experience with SVG
Posted by Alex Harui <ah...@adobe.com.INVALID>.
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 <ah...@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 <ah...@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" <ha...@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
>><ca...@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 <ca...@apache.org>:
>> >> >>
>> >> >>> Hi Alex,
>> >> >>>
>> >> >>> 2018-03-04 8:10 GMT+01:00 Alex Harui <ah...@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: <ca...@gmail.com>>
>>on
>> >> >>>> behalf of Carlos Rovira <carlosrovira@apache.org<mailto:
>> >> >>>> carlosrovira@apache.org>>
>> >> >>>> Reply-To: "dev@royale.apache.org<ma...@royale.apache.org>"
>><
>> >> >>>> dev@royale.apache.org<ma...@royale.apache.org>>
>> >> >>>> Date: Saturday, March 3, 2018 at 10:47 AM
>> >> >>>> To: "dev@royale.apache.org<ma...@royale.apache.org>" <
>> >> >>>> dev@royale.apache.org<ma...@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
Re: My first experience with SVG
Posted by Carlos Rovira <ca...@apache.org>.
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 <ah...@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 <ah...@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" <ha...@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 <ca...@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 <ca...@apache.org>:
> >> >>
> >> >>> Hi Alex,
> >> >>>
> >> >>> 2018-03-04 8:10 GMT+01:00 Alex Harui <ah...@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: <ca...@gmail.com>> on
> >> >>>> behalf of Carlos Rovira <carlosrovira@apache.org<mailto:
> >> >>>> carlosrovira@apache.org>>
> >> >>>> Reply-To: "dev@royale.apache.org<ma...@royale.apache.org>" <
> >> >>>> dev@royale.apache.org<ma...@royale.apache.org>>
> >> >>>> Date: Saturday, March 3, 2018 at 10:47 AM
> >> >>>> To: "dev@royale.apache.org<ma...@royale.apache.org>" <
> >> >>>> dev@royale.apache.org<ma...@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
http://about.me/carlosrovira
Re: My first experience with SVG
Posted by Alex Harui <ah...@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 <ah...@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" <ha...@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 <ca...@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 <ca...@apache.org>:
>> >>
>> >>> Hi Alex,
>> >>>
>> >>> 2018-03-04 8:10 GMT+01:00 Alex Harui <ah...@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: <ca...@gmail.com>> on
>> >>>> behalf of Carlos Rovira <carlosrovira@apache.org<mailto:
>> >>>> carlosrovira@apache.org>>
>> >>>> Reply-To: "dev@royale.apache.org<ma...@royale.apache.org>" <
>> >>>> dev@royale.apache.org<ma...@royale.apache.org>>
>> >>>> Date: Saturday, March 3, 2018 at 10:47 AM
>> >>>> To: "dev@royale.apache.org<ma...@royale.apache.org>" <
>> >>>> dev@royale.apache.org<ma...@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
Re: My first experience with SVG
Posted by Carlos Rovira <ca...@apache.org>.
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 <ah...@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" <ha...@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 <ca...@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 <ca...@apache.org>:
> >>
> >>> Hi Alex,
> >>>
> >>> 2018-03-04 8:10 GMT+01:00 Alex Harui <ah...@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: <ca...@gmail.com>> on
> >>>> behalf of Carlos Rovira <carlosrovira@apache.org<mailto:
> >>>> carlosrovira@apache.org>>
> >>>> Reply-To: "dev@royale.apache.org<ma...@royale.apache.org>" <
> >>>> dev@royale.apache.org<ma...@royale.apache.org>>
> >>>> Date: Saturday, March 3, 2018 at 10:47 AM
> >>>> To: "dev@royale.apache.org<ma...@royale.apache.org>" <
> >>>> dev@royale.apache.org<ma...@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
http://about.me/carlosrovira
Re: My first experience with SVG
Posted by Alex Harui <ah...@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" <ha...@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%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 <ca...@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%7C23a6680843ba4800c48908d581c1adfb%7Cfa7b1
>>b5a7b34438794aed2c178decee1%7C0%7C0%7C636557591208847751&sdata=lPfA%2BFzy
>>RY4CdP9%2BibvJCL0dhKwe2lx8qTlS3tTpooA%3D&reserved=0
>>
>> 2018-03-04 9:35 GMT+01:00 Carlos Rovira <ca...@apache.org>:
>>
>>> Hi Alex,
>>>
>>> 2018-03-04 8:10 GMT+01:00 Alex Harui <ah...@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%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: <ca...@gmail.com>> on
>>>> behalf of Carlos Rovira <carlosrovira@apache.org<mailto:
>>>> carlosrovira@apache.org>>
>>>> Reply-To: "dev@royale.apache.org<ma...@royale.apache.org>" <
>>>> dev@royale.apache.org<ma...@royale.apache.org>>
>>>> Date: Saturday, March 3, 2018 at 10:47 AM
>>>> To: "dev@royale.apache.org<ma...@royale.apache.org>" <
>>>> dev@royale.apache.org<ma...@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%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
>
Re: My first experience with SVG
Posted by Harbs <ha...@gmail.com>.
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://w3.eleqtriq.com/2014/03/the-holy-grail-of-image-scaling/ <https://w3.eleqtriq.com/2014/03/the-holy-grail-of-image-scaling/>
https://aerotwist.com/blog/slicing-svg-9-ways/ <https://aerotwist.com/blog/slicing-svg-9-ways/>
> On Mar 4, 2018, at 1:00 PM, Carlos Rovira <ca...@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://w3.eleqtriq.com/wp-content/static/demos/2014/4-slice/pattern.html
>
> 2018-03-04 9:35 GMT+01:00 Carlos Rovira <ca...@apache.org>:
>
>> Hi Alex,
>>
>> 2018-03-04 8:10 GMT+01:00 Alex Harui <ah...@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://stackoverflow.com/ques
>>> 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: <ca...@gmail.com>> on
>>> behalf of Carlos Rovira <carlosrovira@apache.org<mailto:
>>> carlosrovira@apache.org>>
>>> Reply-To: "dev@royale.apache.org<ma...@royale.apache.org>" <
>>> dev@royale.apache.org<ma...@royale.apache.org>>
>>> Date: Saturday, March 3, 2018 at 10:47 AM
>>> To: "dev@royale.apache.org<ma...@royale.apache.org>" <
>>> dev@royale.apache.org<ma...@royale.apache.org>>
>>> Subject: My first experience with SVG
>>>
>>> --
>>> Carlos Rovira
>>> http://about.me/carlosrovira
>>>
>>>
>>>
>>
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
Re: My first experience with SVG
Posted by Carlos Rovira <ca...@apache.org>.
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://w3.eleqtriq.com/wp-content/static/demos/2014/4-slice/pattern.html
2018-03-04 9:35 GMT+01:00 Carlos Rovira <ca...@apache.org>:
> Hi Alex,
>
> 2018-03-04 8:10 GMT+01:00 Alex Harui <ah...@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://stackoverflow.com/ques
>> 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: <ca...@gmail.com>> on
>> behalf of Carlos Rovira <carlosrovira@apache.org<mailto:
>> carlosrovira@apache.org>>
>> Reply-To: "dev@royale.apache.org<ma...@royale.apache.org>" <
>> dev@royale.apache.org<ma...@royale.apache.org>>
>> Date: Saturday, March 3, 2018 at 10:47 AM
>> To: "dev@royale.apache.org<ma...@royale.apache.org>" <
>> dev@royale.apache.org<ma...@royale.apache.org>>
>> Subject: My first experience with SVG
>>
>> --
>> Carlos Rovira
>> http://about.me/carlosrovira
>>
>>
>>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: My first experience with SVG
Posted by Carlos Rovira <ca...@apache.org>.
Hi Alex,
2018-03-04 8:10 GMT+01:00 Alex Harui <ah...@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://stackoverflow.com/
> questions/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: <ca...@gmail.com>> on behalf
> of Carlos Rovira <ca...@apache.org>>
> Reply-To: "dev@royale.apache.org<ma...@royale.apache.org>" <
> dev@royale.apache.org<ma...@royale.apache.org>>
> Date: Saturday, March 3, 2018 at 10:47 AM
> To: "dev@royale.apache.org<ma...@royale.apache.org>" <
> dev@royale.apache.org<ma...@royale.apache.org>>
> Subject: My first experience with SVG
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>
>
Re: My first experience with SVG
Posted by Alex Harui <ah...@adobe.com.INVALID>.
Hi Carlos, can you explain more of what the problem is? In theory, vectors should not need 9-slice.
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?
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://stackoverflow.com/questions/21915059/setting-background-image-to-dynamic-svg-data
-Alex
From: <ca...@gmail.com>> on behalf of Carlos Rovira <ca...@apache.org>>
Reply-To: "dev@royale.apache.org<ma...@royale.apache.org>" <de...@royale.apache.org>>
Date: Saturday, March 3, 2018 at 10:47 AM
To: "dev@royale.apache.org<ma...@royale.apache.org>" <de...@royale.apache.org>>
Subject: My first experience with SVG
Hi,
I was this days playing with SVG to skin a button. My target was to try to get a complete theme that could be skinned only with SVG.
After playing with Button, I don't see an easy way to make a button works ok with SVG. I think the way to do this it with "border-image" property in order to have some kind of 9-slice scaling, but this property seems not to work ok in all browser (let me know if I'm wrong) [1]
So for Button I ended using CSS3 properties. In the case of buttons, I must to say that this seems to target almost 95% of what people expect. And using software like Sketch I think that get to the final CSS 3 code is in some way "quick".
For square graphics like radios or checkboxes maybe SVG will fit more easily. I'll let you know as I get to that.
btw, although I'm uploading some styles, don't take the current work as final. It should change a lot as I get more components and rework all as I get more experience I the complete set. In the end, I have to make a refactor to "Jewel", and the current theme is called blue but I uploaded a orange button ;), I'm getting some experience on what can I do and what not :)
For example this is a first render of the current button, just for fun :)
[cid:ii_jebpytl21_161ed3037f2df1e7]
[1] https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image<https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3schools.com%2Fcssref%2Ftryit.asp%3Ffilename%3Dtrycss3_border-image&data=02%7C01%7Caharui%40adobe.com%7C584828c2c02740e9a8a908d581373c29%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636556996587271144&sdata=j1vgcTtZW60CBHZReB%2BHGl257NyhiijZUFSO5OtXyRk%3D&reserved=0>
--
Carlos Rovira
http://about.me/carlosrovira<https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C584828c2c02740e9a8a908d581373c29%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636556996587271144&sdata=2IbEo0eQeniTTy9xHtfvX5nOnZJXxyzC%2BRfc%2B1XD00Q%3D&reserved=0>