apike.ca
apike.ca

Presentation Attributes

By mbystedt on Feb 24, 2014, 7:28:59 PM

SVG divides common sets of attributes graphic elements can have into groups. The groups listed here are simplified from the real groups. All presentation attributes have defaults and are never required. The names of attributes are case-sensitive. (Not all attribute groups are listed here)

Color

Attribute
Values
Initial
Inherits
Animate
Comments
color
%Color
depends
Yes
Yes
Using this attribute causes all other attributes ('fill', 'stroke', 'stop-color', 'flood-color' and 'lighting-color') which are set to the value "currentColor" to be indirectly set to this value.
color-interpolation
(auto | sRGB | linearRGB | inherit)
sRGB
Yes
Yes
Sets the color space in which gradient interpolations, color animations and alpha compositing are performed.
color-rendering
(auto | optimizeSpeed | optimizeQuality | inherit)
auto
Yes
Yes
Provides a hint to the SVG viewer how accurate the color interpolation and compositing should be.

See: Color Keyword Reference

CSS and XML

Attribute
Values
Initial
Inherits
Animate
Comments
id
CDATA
null
No
No
The 'id' used to refer this graphic element using an URI.
style
CDATA
null
Yes
N/A
Used to set other presentation attributes using inline CSS.
class
CDATA
null
Yes
N/A
Set the CSS class this graphic element belongs to.

All graphic and container elements have these attributes. CSS support in SVG viewers is optional. See: CSS

FillStroke

Attributes for the filling (placing color inside the object) and stroking (drawing the lines around the object) of vector objects.

Attribute
Values
Initial
Inherits
Animate
Comments
fill
%Paint
black
Yes
Yes
Interior Color
fill-opacity
(0.0-1.0)
1
Yes
Yes
Interior Color's % transparent. Values outside range clamped. See: Opacity
fill-rule
(nonzero | evenodd | inherit)
nonzero
Yes
Yes
nonzero - object fully filled.
evenodd - alternates across line boundaries. See: Clip and Fill Rules
stroke
%Paint
none
Yes
Yes
Color of the object's outline.
stroke-width
(length | inherit)
1
Yes
Yes
Width of the object's outline.
stroke-opacity
(0.0-1.0)
1
Yes
Yes
Outline Color's % transparent. Values outside range clamped. See: Opacity
stroke-dasharray
(none | dasharray | inherit)
none
Yes
Yes
Makes the stroke dashed. "dasharray" is a list of (nonnegative) lengths separated by commas which alternates the stroke on and off.
stroke-dashoffset
(length | inherit)
0
Yes
Yes
Offset the dashes by a set length
stroke-linecap
(butt | round | square | inherit)
butt
Yes
Yes
How lines are capped. Square extends the line a stroke width.
stroke-linejoin
(miter | round | bevel | inherit)
miter
Yes
Yes
How lines are joined.
stroke-miterlimit
(miterlimit | inherit)
4
Yes
Yes
Effects miter line joins. Limit must be greater than one.

See: Filling and Stroking Shapes, Line caps and joins

Graphics

All graphic elements share these attributes. This set contains various composition and rendering attributes.

Attribute
Values
Initial
Inherits
Animate
Comments
clip-path
(uri | none | inherit)
none
No
Yes
URI reference to a clipPath.
clip-rule
(nonzero | evenodd | inherit)
nonzero
Yes
Yes
Only applies to graphics inside a clipPath. Ignored otherwise.

How the settings nonzero and evenodd work is explained on the clip and fill rule page. See: Clipping

Attribute
Values
Initial
Inherits
Animate
Comments
mask
(uri | none | inherit)
none
No
Yes
URI to the mask.
opacity
(0.0 - 1.0 | inherit)
1
No
Yes
Object/group % transparent.

Masks allow the filtering out of an graphic element. See: Masking

Opacity can be considered a special case of a mask which covers the whole object evenly. See: Opacity

Attribute
Values
Initial
Inherits
Animate
Comments
cursor
See below
auto
Yes
Yes
Sets the cursor shown over this graphics element
display
See below
inline
No
Yes
Controls what of this graphic element is displayed
filter
(uri | none | inherit)
none
No
Yes
URI to the filter for this element. See: Filters
pointer-events
See below
visiblePainted
Yes
Yes
Specifies the circumstances when an graphics element can cause a pointer event.

Cursor: ([ [uri ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help)

Display: (inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit)

pointer-events: (visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none | inherit)

Attribute
Values
Initial
Inherits
Animate
Comments
image-rendering
(auto | optimizeSpeed | optimizeQuality | inherit)
auto
Yes
Yes
Sets the quality of the image rendering.
shape-rendering
(auto | optimizeSpeed | crispEdges | geometricPrecision | inherit)
auto
Yes
Yes
Sets the quality of the shape rendering.
text-rendering
(auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit)
auto
Yes
Yes
Sets the quality of the text rendering.
visibility
(visible | hidden | collapse | inherit)
visible
Yes
Yes
Sets if the element is rendered or not.

Text with a hidden visibility takes up space in layout calculations.

Markers

Attribute
Values
Initial
Inherits
Animate
Comments
marker-start
(none | inherit | url )
inherit
Yes
Yes
Draws a marker element at the start of a line or path.
marker-mid
(none | inherit | url )
inherit
Yes
Yes
Draws a marker element at the middle of a line or path.
marker-end
(none | inherit | url )
inherit
Yes
Yes
Draws a marker element at the end of a line or path.

See: SVG Markers