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.

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <rect x="200" y="200" width="400" height="400" fill="#EACF44"></rect>
</svg>

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.

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <circle r="245" cx="400" cy="400" fill="#7FDB70" stroke="#41B82E" stroke-width="10"/>
</svg>

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.

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <ellipse rx="245" ry="100" cx="400" cy="400" fill="#DB7092" stroke="#B82E5A" stroke-width="10"/>
</svg>

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.

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <rect x="200" y="200" width="400" height="400" fill="rebeccapurple"></rect>
</svg>

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.

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <line x1="50" y1="300" x2="375" y2="50" stroke="#70AEDB" stroke-width="25"/>
</svg>

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.

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <polyline points="50,112 500,300 50,400" fill="none" stroke="#9970DB" stroke-width="20"/>
</svg>

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.

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <polygon points="50,112 500,300 50,400" fill="#70DB8E" stroke="#2EB855" stroke-width="20"/>
</svg>

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:

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 400 Q 100 0 250 400 Q 400 800 550 400 Q 700 0 750 400" fill="none" stroke="#CCDB70" stroke-width="23"/>
</svg>

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.

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <circle stroke="#2EAEB8" stroke-width="22" fill-opacity="1"
    cx="100" cy="100" r="45"/>
  <rect stroke="#2EAEB8" stroke-width="22" fill="#70D5DB" fill-opacity="1" stroke-dasharray="0" stroke-dashoffset="0" stroke-linecap="butt" stroke-linejoin="round" x="200" y="200" width="200" height="200"></rect>
  <polyline fill="none" points="550,412 600,700 50,400 80,750"
    stroke-opacity="1"
    stroke="#2EAEB8"
    stroke-width="22"
    stroke-linecap="butt"
    stroke-linejoin="round"
    stroke-dasharray="0"
    stroke-dashoffset="0"
  />
</svg>

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.

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <rect
    transform="translate(0 0) rotate(45) skewX(0) skewY(0) scale(1)"
    transform-origin="400 400"
    x="200"
    y="200"
    width="400"
    height="400"
    fill="#444BEA"
  ></rect>
</svg>

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.

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <g
    fill="#ED5EAB"
    stroke="#CF1779"
    stroke-width="11"
    transform="scale(1)"
    transform-origin="400"
  >
    <circle r="20" cx="710" cy="70" />
    <circle fill="#D1ED5E" stroke="#AACF17" r="33" cx="300" cy="255" />
    <circle stroke-width="44" r="125" cx="175" cy="455" />
    <circle r="75" cx="500" cy="315" />
    <circle r="90" cx="600" cy="615" />
  </g>
</svg>

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:

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <rect
      id="some-square"
      x="350"
      y="350"
      rx="20"
      fill="hsl(256, 80%, 65%)"
      stroke="hsl(256, 80%, 45%)"
      stroke-width="11"
      width="100"
      height="100"
    ></rect>
  </defs>

  <use x="-100" y="-100" href="#some-square" />
  <use x="100" y="100" href="#some-square" />
  <use x="-200" y="-200" href="#some-square" />
  <use x="200" y="200" href="#some-square" />
</svg>

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.

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <g id="my-face">
    <circle cx="204.5" cy="588.5" r="125" fill="#FFA34D" />
    <circle cx="174.5" cy="538.5" r="16.5" fill="#B35600" />
    <circle cx="238.5" cy="538.5" r="16.5" fill="#B35600" />
    <ellipse cx="205" cy="639" rx="32" ry="13" fill="#B35600" />
  </g>

  <use href="#my-face" x="300" y="-300" transform="skewY(15)" />
</svg>

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.

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <symbol id="face-symbol" width="250" height="250" viewBox="0 0 250 250">
    <circle cx="124.5" cy="125.5" r="125.5" fill="#FFA34D" />
    <circle cx="94.5" cy="75.5" r="16.5" fill="#B35600" />
    <circle cx="158.5" cy="75.5" r="16.5" fill="#B35600" />
    <ellipse cx="125" cy="176" rx="32" ry="13" fill="#B35600" />
  </symbol>

  <use href="#face-symbol" x="40" y="500" />
  <use width="100" height="100" x="400" y="350" href="#face-symbol"/>
</svg>

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.

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="my-clip-path">
    <circle cx="200" cy="200" r="200" />
    <circle cx="600" cy="200" r="100" />
    <circle cx="600" cy="600" r="150" />
    <circle cx="200" cy="600" r="120" />
  </clipPath>

  <rect
    clip-path="url(#my-clip-path)" x="200" y="200"
    width="400" height="400"
    fill="#FF4DC2" stroke="#B30077" stroke-width="11"
  ></rect>
</svg>

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.

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <mask id="my-mask">
    <rect fill="white" width="800" height="800"></rect>
    <circle fill="black" cx="600" cy="200" r="100" />
    <circle fill="#5f5f6e" cx="200" cy="200" r="200" />
    <circle fill="black" fill-opacity="0.5" cx="600" cy="600" r="150" />
    <circle fill="black" cx="200" cy="600" r="120" />
  </mask>

  <rect
    mask="url(#my-mask)" x="200" y="200"
    width="400" height="400"
    fill="#FF4DC2" stroke="#B30077" stroke-width="11"
  ></rect>
</svg>

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.

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern
      id="my-pattern"
      width="0.25"
      height="0.25"
      viewBox="0 0 40 40"
      patternTransform="translate(0 100)"
    >
      <rect width="100%" height="100%" fill="hsl(150, 60%, 74%)" />
      <circle cx="20" cy="20" r="15" fill="hsl(150, 60%, 24%)" fill-opacity=".5"/>
      <circle cx="20" cy="20" r="9" fill="hsl(150, 60%, 24%)" fill-opacity=".75" />
      <circle cx="20" cy="20" r="3" fill="hsl(150, 60%, 14%)" />
    </pattern>
  </defs>

  <circle fill="url(#my-pattern)" r="300" cx="400" cy="400" />
</svg>

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.

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient
      id="my-linear-gradient"
      gradientTransform="rotate(145 .5 .5)"
    >
      <stop offset="0" stop-color="hsl(297, 45%, 50%)" />
      <stop offset="1" stop-color="hsl(297, 45%, 80%)" />
    </linearGradient>
  </defs>
  <circle fill="url(#my-linear-gradient)" r="300" cx="400" cy="400" />
</svg>

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.

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="my-radial-gradient" r="0.75" cx="0.5" cy="0.5">
      <stop offset="0" stop-color="hsl(197, 45%, 97%)" />
      <stop offset="1" stop-color="hsl(197, 45%, 50%)" />
    </radialGradient>
  </defs>

  <circle fill="url(#my-radial-gradient)" r="300" cx="400" cy="400" />
</svg>

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.

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="blur-filter" width="400%" height="400%" x="-200%" y="-200%">
      <feGaussianBlur stdDeviation="8 2" in="SourceGraphic"/>
    </filter>
  </defs>
  <g filter="url(#blur-filter)">
    <circle cx="396.95" cy="392.353" r="150" fill="#FF624D" />
    <rect x="155" y="90" width="100" height="100" fill="#4DFF74"></rect>
  </g>
</svg>

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.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
  <defs>
    <marker id="marker-start" viewBox="0 0 5 5"
      refX="2.5"
      refY="2.5"
      markerWidth="5"
      markerHeight="5"
    >
      <circle r="1.5" cx="2.5" cy="2.5" fill="#4DC9FF" />
    </marker>
    <marker id="marker-end" viewBox="0 0 5 5"
      refX="2.5"
      refY="2.5"
      markerWidth="5"
      markerHeight="5"
      orient="60"
    >
      <polygon points="0,5 1.67,2.5 0,0 5,2.5" fill="#4DC9FF"></polygon>
    </marker>
  </defs>
  <path fill="none" stroke="#FF774D" stroke-width="15" d="M250 250q200 100 300 300"
    marker-start="url(#marker-start)"
    marker-end="url(#marker-end)"
    stroke-width="15"
  />
</svg>

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.

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <text
    font-size="90"
    text-anchor="middle"
    dominant-baseline="middle"
    font-family="monospace"
    font-weight="bold"
    x="400"
    y="400"
    transform="rotate(-45)"
    transform-origin="400 400"
    fill="none"
    stroke="#FF574D"
    stroke-width="4"
  >Well hello there!</text>
</svg>

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.

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <text x="400" y="400" font-size="80"
    font-family="monospace"
    text-anchor="middle"
    dominant-baseline="middle"
    fill="#FF574D"
    transform="rotate(-45)"
    transform-origin="400 400"
  >
    Well
    <tspan fill="#AAE600" font-size="125">hi</tspan>
    there!
  </text>
</svg>