SVG Common Attributes

Rendering/Styling Attributes

color

The color attribute is used to provide a potential indirect value, currentcolor, for the fill, stroke, stop-color, flood-color, and lighting-color attributes.

Note: As a presentation attribute, color can be used as a CSS property.

As a presentation attribute, it can be applied to any element, but as noted above, it has no direct effect on SVG elements.

dx and dy

The dx/dy attributes indicate a shift along the X-axis/Y-axis on the position of an element or its content.

You can use this attribute with the following SVG elements: <feDropShadow>, <feOffset>, <glyphRef>, <text>, <tref>, and <tspan>

fill

The fill attribute has two different meanings. For shapes and text it's a presentation attribute that defines the color (or any SVG paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation.

You can use this attribute with the basic shapes and with the text elements (<text>, <textPath>, <tref>, and <tspan>)

fill-opacity

The fill-opacity attribute defines the opacity of the paint server (color, gradient, pattern, etc.) applied to a shape.

Note: As a presentation attribute fill-opacity can be used as a CSS property.

Just as with fill, you can use this attribute with the basic shapes and with the text elements (<text>, <textPath>, <tref>, and <tspan>)

fill-rule

The fill-rule defines the algorithm to use to determine the inside part of a shape.

Note: As a presentation attribute, fill-rule can be used as a CSS property.

You can use this attribute with the following SVG elements: <path>, <polygon>, <polyline>, <text>, <textPath>, <tref>, and <tspan>

The fill-rule attribute provides two options for how the inside (that is, the area to be filled) of a shape is determined:

nonzero

The value nonzero determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction, and then examining the places where a segment of the shape crosses the ray. Starting with a count of zero, add one each time a path segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from right to left. After counting the crossings, if the result is zero then the point is outside the path. Otherwise, it is inside.

evenodd

The value evenodd determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside.

opacity

The opacity attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overlaid. Its value must be within the range 0.0 (fully transparent) to 1.0 (fully opaque)

Unlike fill-opacity, stroke-opacity, and stop-opacity, which are applied to individual operations and are rendered when the element is rendered, opacity is applied to whole objects or groups, and is more like a post-processing operation on the rendered image of the object or group. Therefore, when you have both opacity and the other opacity attributes in the same area, they will be overlaid on top of each other and cause the opacity to be multiplied.

Example

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%">
      <stop offset="0%" style="stop-color:skyblue;" />
      <stop offset="100%" style="stop-color:seagreen;" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
  <circle cx="50" cy="50" r="40" fill="black" />
  <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" />
</svg>

transform

Defines rotations, translations, scaling etc.

stroke

The stroke attribute defines the color used to paint the outline of the shape. It defaults to value none.

It may also have value context-stroke, which causes it to inherit its value.

stroke-dasharray

It defines the pattern of dashes and gaps used to paint the outline of the shape. It takes on value none or a dasharray. dasharray is a list of comma and/or white space separated lengths and percentages that specify the lengths of alternating dashes and gaps.

If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, 5,3,2 is equivalent to 5,3,2,5,3,2.

stroke-dashoffset

It defines an offset on the rendering of the associated dash array. Its default value is 0

stroke-linecap

This attribute defines the shape to be used at the end of open subpaths when they are stroked. It takes on values butt | round | square.

The butt value indicates that the stroke for each subpath does not extend beyond its two endpoints. On a zero length subpath, the path will not be rendered at all.

The round value indicates that at the end of each subpath the stroke will be extended by a half circle with a diameter equal to the stroke width. On a zero length subpath, the stroke consists of a full circle centered at the subpath's point.

The square value indicates that at the end of each subpath the stroke will be extended by a rectangle with a width equal to half the width of the stroke and a height equal to the width of the stroke. On a zero length subpath, the stroke consists of a square with its width equal to the stroke width, centered at the subpath's point.

stroke-linejoin

The stroke-linejoin attribute is a presentation attribute defining the shape to be used at the corners of paths when they are stroked. It takes on values arcs | bevel | miter | miter-clip | round. Its default value is miter.

stroke-miterlimit

It defines a limit on the ratio of the miter length to the stroke-width used to draw a miter join. When the limit is exceeded, the join is converted from a miter to a bevel. It defaults to 4.

stroke-opacity

It defines the opacity of the paint server (color, gradient, pattern, etc.) applied to the stroke of a shape.

Note: SVG2 introduces percentage values for stroke-opacity, however, it is not widely supported yet. Consequentally, it is best to set opacity in the range [0-1].

stroke-width

The width of the stroke to be applied to the shape. Defaults to 1px.

Note: A percentage value is always computed as a percentage of the normalized viewBox diagonal length.

transform-origin

The transform-origin SVG attribute sets the origin for an item's transformations. This attribute can be applied to any SVG element.

vector-effect

It specifies the vector effect to use when drawing an object. Vector effects are applied before any of the other compositing operations, i.e. filters, masks and clips.

viewBox

The viewBox attribute defines the position and dimension, in user space, of an SVG viewport.

The value of the viewBox attribute is a list of four numbers separated by whitespace and/or a comma: min-x, min-y, width, and height. min-x and min-y represent the smallest X and Y coordinates that the viewBox may have (the origin coordinates of the viewBox) and the width and height specify the viewBox size. The resulting viewBox is a rectangle in user space mapped to the bounds of the viewport of an SVG element (not the browser viewport). When an SVG contains a viewBox attribute (often in combination with a preserveAspectRatio attribute), a transform stretches or resizes the SVG viewport to fit a particular container element.

visibility

The visibility attribute lets you control the visibility of graphical elements. With a value of hidden or collapse the current graphics element is invisible.

width

The width attribute defines the horizontal length of an element in the user coordinate system.

word-spacing

The word-spacing attribute specifies spacing behavior between words.

If a <length> is provided without a unit identifier (e.g. an unqualified number such as 128), the browser processes the <length> as a width value in the current user coordinate system.

If a <length> is provided with one of the unit identifiers (e.g. .25em or 1%), then the browser converts the <length> into a corresponding value in the current user coordinate system.