| Properties and values (fills) |
Now that we have defined how various elements are organized within the SVG file, we can go into how they are further defined with specific properties and values.
fill
example:
<path style="fill:white"> values: none, current-color, <color>
The "fill" property determines whether an element has a fill or not, and if so, what color. "Current-color" will return the color value specified in a parent document, such as the XML file the SVG resides in.
fillrule
example:
<path style="fillrule:nonzero"> values: evenodd, nonzero, inherit
The "fillrule" property determines whether a path that intersects itself or a compound path (like a donut) will fill only non-adjacent areas, or all areas. Below are two samples with "evenodd" and "nonzero" fillrules.
"Inherit" means that the value of this element should be the same as the value of the element (or group) enclosing it.
fill-opacity
example:
<path style="fill-opacity:0.25"> values: any value between 0 and 1
The "fill-opacity" property determines whether an element is solid or transparent (value of 1 is completely opaque, and 0 is completely transparent). There are also the additional opacity properties of "stroke-opacity" and "opacity". While "fill-opacity" refers to the element's fill, "stroke-opacity" refers to its stroke, and "opacity" refers to the opacity of the element as a whole.