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)
See also: Text and Font Attributes
Attribute | Values | Initial | Inherits | Animate | Comments |
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. |
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.
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 | black | Yes | Yes | Interior Color | |
fill-opacity | (0.0-1.0) | 1 | Yes | Yes | Interior Color's % transparent. Values outside range clamped. |
fill-rule | (nonzero | evenodd | inherit) | nonzero | Yes | Yes | nonzero - object fully filled. evenodd - alternates across line boundaries. (see basic SVG shapes) |
stroke | 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. |
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. |
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 in the basic SVG shapes section. <Jump to: 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. <Jump to: Masking>
Opacity can be considered a special case of a mask which covers the whole object evenly. <Jump to: 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. |
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.
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 the tutorial on markers for more information.
See also: Text and Font Attributes