---
title: Snippet
---

A Snippet is a reusable bit of markup for your pattern. Snippets are added to the
SVG `defs` section, and rendered with the SVG `use` tag.

## Signature

```js
Snippet new Snippet(String def, Point anchor);
```

The snippet constructor takes two arguments:

- `def` : The `xlink:href` id that links to the relevant entry in the SVG `defs` section. This is also the common name of the snippet (`logo`, `notch`, `button`, etc.)
- `anchor` : A [`Point`](/reference/api/point) on which to anchor the snippet

## Properties

A Snippet object comes with the following properties:

- `def` : The `xlink:href` id that links to the relevant entry in the SVG `defs` section
- `anchor` : A [`Point`](/reference/api/point) on which to anchor the snippet
- `attributes` : An [`Attributes`](/reference/api/attributes) instance holding the snippet's attributes

:::note RELATED
See [Using Attributes](/howtos/code/attributes)
for information about custom Attributes that can be used with Snippets.
:::

## Example

<Example caption="Example of the Snippet constructor">
```js
({ Point, Snippet, snippets, Path, paths, part }) => {

  snippets.logo = new Snippet('logo', new Point(0,0))

  // Prevent clipping
  paths.diag = new Path()
    .move(new Point(-25,-40))
    .move(new Point(25,15))

  return part
}
```
</Example>

## Methods

A Snippet object exposes the following methods:

<ReadMore />