SVG

fill

Paints the interior of a shape or the glyphs of SVG text. A <paint> is none, a colour, context-fill or context-stroke, or a url() reference to a gradient or pattern with an optional fallback colour.

.icon { fill: currentColor; }

fill-opacity

The opacity of the fill alone, from 0 to 1 or as a percentage. The stroke is not affected.

fill-rule

Decides which parts of a self-intersecting or nested path count as inside. nonzero fills every region the path winds around; evenodd alternates, so a shape drawn inside another becomes a hole.

stroke

Paints the outline of a shape or of SVG text. It takes the same <paint> values as fill. The stroke is centred on the geometry, so half its width falls outside the shape.

stroke-color

Sets the stroke to a colour. Unlike stroke, it takes only a colour, not a gradient or pattern reference. Only Safari ships it, so use stroke for anything that must work everywhere.

stroke-width

The thickness of the stroke. A plain number is in SVG user units, the same as a px length at the default scale.

The stroke scales with the SVG. To keep it the same on-screen width however the graphic is scaled, add vector-effect: non-scaling-stroke.

stroke-opacity

The opacity of the stroke alone, from 0 to 1 or as a percentage. Where a translucent stroke overlaps the fill, the fill shows through.

stroke-dasharray

Turns the stroke into dashes. The values alternate dash length and gap length; an odd number of values is repeated to make an even list, so 5 means 5 on, 5 off.

stroke-dashoffset

Shifts where the dash pattern starts along the path. Animating it moves the dashes along the line.

path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

stroke-linecap

The shape at the open ends of a stroke and of each dash. butt stops flat at the end point; round and square extend past it by half the stroke width.

stroke-linejoin

The shape of the stroke where two segments meet at a corner: miter for a sharp point, round for a rounded corner, or bevel to cut the corner off.

stroke-miterlimit

How long a miter join may get, as a multiple of the stroke width, before it is drawn as a bevel instead. It stops very sharp corners from producing long spikes.

marker

Shorthand that sets marker-start, marker-mid and marker-end to the same value. A <marker-ref> is a url() pointing at an SVG <marker> element.

marker-start, marker-mid, marker-end

The marker drawn at the first vertex, at every vertex in between, or at the last vertex of a path, line, polyline or polygon. Arrowheads are the usual use.

.arrow { marker-end: url(#arrowhead); }

paint-order

The order in which the fill, stroke and markers are painted. By default the fill goes first and the stroke on top; paint-order: stroke paints the stroke first, so only its outer half shows around the fill. Keywords you leave out follow in their default order.

text { stroke: white; stroke-width: 4; paint-order: stroke; }

d

The path data of a <path> element. In CSS the value is written with the path() function, holding the same command string as the d attribute.

path:hover { d: path("M 0 10 L 20 0 L 40 10"); }

cx, cy

The x and y coordinates of the centre of a circle or ellipse.

r

The radius of a circle.

rx, ry

The horizontal and vertical radii of an ellipse, or of the rounded corners of a rectangle. On a <rect>, auto takes the value of the other radius, so setting only rx gives circular corners.

x, y

The position of the top-left corner of a rectangle, image, nested <svg> or <foreignObject>.

stop-color

The colour of a <stop> in an SVG <linearGradient> or <radialGradient>. Setting it from CSS lets one gradient definition follow a theme.

stop-opacity

The opacity of a gradient <stop>, multiplied with any alpha in its stop-color.

flood-color

The colour an <feFlood> filter primitive fills its region with, and the shadow colour of <feDropShadow>.

flood-opacity

The opacity of the flood-color in <feFlood> and <feDropShadow>.

lighting-color

The colour of the light source in the <feDiffuseLighting> and <feSpecularLighting> filter primitives.

color-interpolation

The colour space SVG works in when it interpolates colours for gradients and animations and when it composites. sRGB is the default; linearRGB works in linear light.

color-interpolation-filters

The colour space SVG filter primitives do their arithmetic in. The default is linearRGB, so blurs and colour matrices can give slightly different results from the same maths done in sRGB; set sRGB to match.

shape-rendering

A hint about what to favour when drawing shapes. crispEdges turns off anti-aliasing so horizontal and vertical lines land sharply on pixels; geometricPrecision favours accuracy; optimizeSpeed favours speed.

text-rendering

A hint about what to favour when drawing text: speed, legibility or geometric precision. Browsers also apply it to HTML text.

vector-effect

Opts an element out of parts of its transform. non-scaling-stroke keeps the stroke the same width on screen however the SVG is scaled, which is what you want for diagrams and icons drawn with hairlines.

text-anchor

Aligns SVG text relative to its x position: the text starts there, is centred on it (middle) or ends there. start and end follow the text direction.

clip-rule

The fill rule used for shapes inside a <clipPath>, deciding which parts of a self-intersecting shape clip. It works like fill-rule.

mask-type

Set on an SVG <mask> element: whether the mask uses the brightness (luminance) or the transparency (alpha) of its content. A mask-mode of match-source on the masked element follows this value.