Interactive SVG Reference

viewBox

viewBox is an important attribute set on the <svg> element. It defines the coordinate system for the entire SVG. The value for viewBox is a set of 4 space-separated values: x-min, y-min, width and height. In the majority of the cases, x-min and y-min are both set to zero, meaning that the coordinate system starts at the top left corner of the SVG.

Every element within the SVG will relate to the coordinate system defined by the viewBox attribute.

viewBox can be use to crop out and/or zoom in/out of an SVG, as you can see when you tweak the values.

circle

The SVG <circle> element defines a circle. The attributes are r for the circle radius, cx for the horizontal center of the circle and cy for the vertical center of the circle.

ellipse

The SVG <ellipse> element defines an ellipse. The attributes are rx for the horizontal radius, ry for the vertical radius, cx for the horizontal center and cy for the vertical center.

rect

The SVG <rect> element defines a rectangle or square. The attributes are x for horizontal position of the upper left corner, y for the vertical position of the upper left corner, width for the rectangle width and height for the rectangle height.

Optionally rx defines the horizontal corner radius and ry defines the vertical corner radius. If only one of those two attributes are set, the other one takes the same value.

line

The SVG <line> element defines a line. The attributes are x1 & y1 for the horizontal and vertical position of the starting point and x2 & y2 for the horizontal and vertical position of the ending point of the line.

polyline

The SVG <polyline> element defines an open shape made up of a series of lines. The points attribute defines a series of x,y values for each point in the polyline.

polygon

The SVG <polygon> element defines a closed polygon. The points attribute defines a series of x,y values for each point in the polygon.

path

The SVG <path> element is a generic element to define any kind of shape. The d attribute takes a series of path commands that define the shape.

The content of the d attribute can get quite complex and that complexity is often left to a drawing application. You can also use a tool like this SVG path builder to help out better understand how path works.

The path usually starts with a m or M, which is the MoteTo command. This is how the first point is drawn, by moving to where the first point should be.

In the following example you can control the 3 control points of quadratic bezier curves defined with the Q command:

fill & stroke

The fill attribute sets a fill color and fill-opacity sets the opacity for that fill color. A value of none for the fill attribute will remove the fill, otherwise the default fill color is black.

The stroke attribute sets the stroke color, stroke-width sets the stroke width and stroke-opacity sets the opacity for that stroke color.

Other useful stroke attributes are stroke-linecap, stroke-linejoin, stroke-dasharray and stroke-dashoffset.

stroke-dasharray takes one or more space-separated values that define a dash and a gap. If only one value is provided, it will be used for both the dash and the gap. If more than two values are provided, a pattern of different dash and/or gap lengths will be created. stroke-dashoffset offsets the start of the dash array.

transform

The transform attribute is used to apply all kinds of transform operations on an element or group of elements. Additionally, the transform-origin attribute sets the origin coordinates for the transform operations.

The available transform operations are rotate, skew, scale, translate and matrix. Matrix is a bit more complex, but offers a lot of flexibility. Here we'll stick to the simple, human-readable, operations.

Note that results will usually be more what you expect when applying a translation before a rotation in a chain of transforms. This is because a transform affects the coordinate system of the element(s) it transforms. If, for example, a rotation is applied first, and then a translate, the translation will now be following the new coordinates given the rotation.

To explore SVG transforms more in depth, I invite you to read this series by Sara Soueidan.

g

The SVG <g> element defines a group. It doesn't have a visual effect on its own, but it can take in presentational attributes that are then applied to elements within it. Think of it a bit like a div element in HTML.

Notice in the example below how attributes on the element itself override the same attributes set on the g element.

defs

The SVG <defs> element defines various items that won't be displayed, but are setup for later use in the SVG or in another SVG on the page. defs is therefore where we put the definitions for things like gradients, masks and patterns.

Shapes can also be defined in a defs element and then used using the use element. Here's an example where we define a square using rect and then use it 4 times:

use

The SVG <use> element allows us to reuse SVG elements at multiple places. It's a very handy element to avoid duplicating your SVG markup.

You can apply transforms to the <use> element and the value for the x and y position will be relative to the element it originates from.

symbol

The SVG <symbol> element defines a graphic that can be repeated and reused using the <use> element. The symbol definition itself won't be visually displayed. Symbols can have their own viewBox attribute and therefore their own coordinate system.

When <use> refers to a symbol, it can have a width and height value, and so each repeated symbol can have its own size.

SVG symbols are a great way to create a collection of icons that can be re-used on a page. The whole collection of icon symbols can sit in one SVG definition, and the the use element is used to refer to them individually.

clipPath

The SVG <clipPath> element defines a region that will be clipped out of the visual representation. Elements inside the clipPath element will allow what's underneath to show through, otherwise the rest will be clipped.

mask

The SVG <mask> element defines a region that will be masked out of the visual representation. Elements inside the mask element will allow what's underneath to show through either fully or partially.

Anything under white pixels will be fully visible, anything under black pixels will be fully invisible and then anything under a gray color or a semi-transparent white or black will be partially visible.

The difference between a clip path and a mask is that a clip path either reveals or hides, while a mask can also partially reveal.

pattern

The SVG <pattern> element defines a repeatable pattern that can be used as the fill or stoke color for graphical SVG elements.

The pattern element can have its own viewBox so that it defines its own coordinate system.

The patternTransform attribute can be use to apply a transform operation on the pattern.

By default the width and height value on the pattern element is a percentage relative to the bounding box, but this can be changed with the patternUnits attribute set to a value of userSpaceOnUse.

linearGradient

The SVG <linearGradient> element defines a linear gradient with 2 or more color stops that can then be used as the fill or stroke color of shapes or text elements inside an SVG.

<linearGradient> can take a gradientTransform attribute to apply transformations on the gradient. A rotate transform will change the angle of the gradient.

Color stop elements inside a linear gradient take offset and stop-color attributes, and stop-opacity can also be specified.

radialGradient

The <radialGradient> element defines a radial gradient with 2 or more color stops. The gradient can be used as the fill or stroke color of any graphical element inside an SVG.

The r attribute can be used to specify the radius of the gradient. The cx and cy attributes can be used to specify a center for the radial gradient, the default being 50% for both cx and cy.

Color stops inside a linear gradient take offset and stop-color attributes, and stop-opacity can also be provided.

filter

A number of filter primitives are available to modify the visual output of SVG elements. These primitives are defined inside a filter element which itself goes inside the defs element.

The available filter primitives are feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDropShadow, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, feSpecularLighting, feTile and feTurbulence

The topic of SVG filters is a pretty big topic that falls outside the scope of this SVG reference. To learn more, I invite you to read this article by Oscar Jite-Orimiono on the LogRocket blog. This interactive tool is also really useful to help build SVG filters.

Here we'll stick to a simple example using the feGaussianBlur primitive, which, as its name implies, defines a gaussian blur filter.

In the example, the little trick with using width and height at 400% and then x and y at -200% on the filter elements is to enlarge the area available to the filter and prevent the blur from clipping when the blur amount is high.

The feGaussianBlur primitive itself takes a stdDeviation attribute that defines the blur radius. If only one value is used, it'll apply to both the horizontal and vertical blur.

The in attribute takes in the graphic to apply the primitive to, and SourceGraphic is a special keyword that refers to the original graphic using the filter. Filter primitives can be chained and the out attribute is used to give a name to the output of a primitive that can be used as the in attribute of another primitive down the chain.

marker

The SVG <marker> element defines a graphic to be used at the beginning or end of a path, line, polyline or polygon. It's used for decorations like arrowheads.

A marker is defined inside the defs element and later referred to using url(#marker-id).

Markers can have their own viewBox attribute, in which case the markerWidth and markerHeight attributes define the width and height of the marker viewport.

The markerUnits attribute specifies the coordinate system for the marker viewport. The values can be userSpaceOnUse or strokeWidth. It defaults to strokeWidth, meaning that the coordinate system will be based on the stroke width of the element using the marker.

The refX and refY attributes specify the reference point for the marker. In the example below the reference point is put in the middle of the marker's viewport.

The orient attribute specifies the orientation of the marker. The possible values are auto, auto-start-reverse or a specific angle value.

text

The SVG <text> is used to add text inside an SVG, which will remain selectable, copyable and readable by assistive technology devices.

SVG text can also be stroked just like other SVG shapes.

Useful attributes for the text element are font-size, font-family, font-weight, text-anchor and dominant-baseline.

tspan

The SVG <tspan> element is used to change some of the text display properties to parts of the text content found in a text element.