How do I specify a non-filled SVG path

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

How do I specify a non-filled SVG path

jameshale
I have been playing with the SVG widget in LC8RC1 and want to have a filled and unfilled version of a path.
I know this can be down as LC comes with examples. ("bookmark" and "bookmark empty")

What I want to do is create some of my own however whatever hollow path I draw the widget always shows the path filled in even though other graphics apps show the empty shape.

I have tried making the shape from two paths that are not joined but the widget insists on closing the path and filling it in.

The fill-rule setting doesn't seem to have an effect.

Suggestions?

Is there some special way they need to be drawn?
Reply | Threaded
Open this post in threaded view
|

Re: How do I specify a non-filled SVG path

jameshale
OK I worked it out.

One needs to draw two paths, an outer and an inner.
Then open the SVG file in a text editor and remove everything except the actual path instructions.
This includes removing "fill" and "stroke" attributes too.
The paste the remaining path into the "icon path" of the widget.

If using a script:

put "M144,203.6 C144,203.6 143.8,83.6 143....... 144,203.6 z" into svgpath
--this could be very long so copy and pasting in the IDE is better.
--then
 "set the iconpath of widget "widgetName" to  svgpath

The "fill Rule" will determine if the inner path is a cut out of the outer or not.
In my testing "even odd" gave me an outline image, whereas "non-zero" filled it all in.

For instance I wanted a bookmark bigger than the one supplied by fontawsome so I drew one.

if you want to see the effect of the fill rule here is the path data so you can try it out yourself.
You should be able to clearly see the two paths in the data. Hint, each one ends in a "z" (close path instruction)

M144,203.6 C144,203.6 143.8,83.6 143.8,83.6 C143.8,83.6 144.2,70.4 147.6,66 C150.998,61.603 155.8,59.6 155.8,59.6 C155.8,59.6 180,59.8 180,59.8 C180,59.8 176.276,62.556 172.6,67.2 C168.8,72 168.4,84.2 168.4,84.2 C168.4,84.2 167.8,203.8 167.8,203.8 C167.8,203.8 155.8,179.8 155.8,179.8 C155.8,179.8 144.2,203.6 144,203.6 z
M145.125,198.875 C145.125,198.875 144.875,83.875 144.875,83.875 C144.875,83.875 145.1,71.025 148.5,66.625 C151.898,62.228 156.25,60.25 156.25,60.25 C156.25,60.25 177.5,60.625 177.5,60.625 C177.5,60.625 170.411,67.203 169.375,71.125 C167.625,77.75 167.2,84 167.2,84 C167.2,84 166.875,199.75 166.875,199.75 C166.875,199.75 155.75,177.5 155.75,177.5 C155.75,177.5 145.325,198.875 145.125,198.875 z


James

RH
Reply | Threaded
Open this post in threaded view
|

Re: How do I specify a non-filled SVG path

RH
Thank you James for sharing your experience! Helps a lot.
Roland
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Roland Huettmann - Babanin GmbH - Switzerland www.babanin.com / roh@babanin.com
Reply | Threaded
Open this post in threaded view
|

Re: How do I specify a non-filled SVG path

jameshale
My previous post used in effect two seperate paths.
One advantage to using this method it that by changing the "fill rule" you effectively get two icons for the price of one, a filled one and an outline one. This was indeed what I was after.

However I was curious as to other examples I had seen where the fill rule had no effect.
It turns out these hollowed out icons compounded their paths.

While looking at one such icon in my graphics app I noticed it seemed to have two paths, an outer rectangle and an inner one. However it was not two rectangles grouped (as in my first attempts).
Although constructed that way there was the option of compounding their paths once you had the image you wanted.

Here is the path of the same bookmark icon I presented before except this was made a compound path before exporting.

M249.6,689.8 C249.6,689.8 249.4,569.8 249.4,569.8 C249.4,569.8 249.8,556.6 253.2,552.2 C256.598,547.803 261.4,545.8 261.4,545.8 C261.4,545.8 285.6,546 285.6,546 C285.6,546 281.876,548.756 278.2,553.4 C274.4,558.2 274,570.4 274,570.4 C274,570.4 273.4,690 273.4,690 C273.4,690 261.4,666 261.4,666 C261.4,666 249.8,689.8 249.6,689.8 z M250.725,685.075 C250.925,685.075 261.35,663.7 261.35,663.7 C261.35,663.7 272.475,685.95 272.475,685.95 C272.475,685.95 272.8,570.2 272.8,570.2 C272.8,570.2 273.225,563.95 274.975,557.325 C276.011,553.403 283.1,546.825 283.1,546.825 C283.1,546.825 261.85,546.45 261.85,546.45 C261.85,546.45 257.498,548.428 254.1,552.825 C250.7,557.225 250.475,570.075 250.475,570.075 C250.475,570.075 250.725,685.075 250.725,685.075 z

Compounding does not seem to lessen the path data required, just impacts on the usefulness of the fill rule.

Personally I prefer using the seperate paths approach (at least in my current app) as it affords the flexibility of filled in or outline simply by change in a widget property. Outline icons provide a subtle way to show a non active look.
Coupled with the ability to turn the hilite on or off gives you 4 possible states for the icon without the need to change the path data.
Very impressed.