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: <[email protected]<mailto:[email protected]>> on behalf of 
Carlos Rovira <[email protected]<mailto:[email protected]>>
Reply-To: "[email protected]<mailto:[email protected]>" 
<[email protected]<mailto:[email protected]>>
Date: Saturday, March 3, 2018 at 10:47 AM
To: "[email protected]<mailto:[email protected]>" 
<[email protected]<mailto:[email protected]>>
Subject: My first experience with SVG


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>

Reply via email to