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.



--
View this message in context: http://runtime-revolution.278305.n4.nabble.com/How-do-I-specify-a-non-filled-SVG-path-tp4703783p4703810.html
Sent from the Revolution - User mailing list archive at Nabble.com.