What is the `defs` tag in SVG?

In SVG, the defs tag (short for "definitions") is used to define reusable graphic elements in advance. The elements inside this tag are not displayed directly on the screen, but can be referenced multiple times later using tags like use.

Example 1: Using use to reuse a shape

<svg width="200" height="100">
  <defs>
    <circle id="myCircle" cx="30" cy="30" r="30" fill="skyblue" />
  </defs>
  <use href="#myCircle" x="0" y="0" />
  <use href="#myCircle" x="80" y="0" />
</svg>

The same circle is defined once and rendered twice at different positions using <use>.

Example 2: Applying styles defined in <defs>

<svg width="200" height="100">
  <defs>
    <filter id="blur1">
      <feGaussianBlur stdDeviation="5" />
    </filter>
  </defs>
  <circle cx="50" cy="50" r="30" fill="skyblue" filter="url(#blur1)" />
</svg>

A blur filter is defined and applied to the circle using the filter attribute.