# SVG Block

The SVG block allows you to add icons,  SVG images and inline SVG code snippets in an instant.

## Add

* Select required block.
* Click the "+" icon at the bottom of the Quick Inserter.
* Search for the SVG block.
* Click to add to page.

<figure><img src="/files/3uD1viTkenknP4H8E7sy" alt=""><figcaption></figcaption></figure>

## Icon

The Icon property allows you to add an  unwrapped SVG Icon to your page. This is useful for one-off SVG icons.

* Select SVG block.
* In the Primary tab, set Type to Icon.

<figure><img src="/files/1YAlX66JFXutX0tJnCqF" alt=""><figcaption></figcaption></figure>

### Select Icon

* Click "Icon" to open the Icon library or search for required icon.

<figure><img src="/files/2Ab7F6Id3EHAQ8eX8ape" alt=""><figcaption></figcaption></figure>

### Customise&#x20;

The Customise property allows you to modify your Icon as required including size, height, width, stroke as well as fill, stroke and text colours.

* Customise as required.

<figure><img src="/files/vG2CScMmRzpN6ybXMwzM" alt=""><figcaption></figcaption></figure>

## Image

The Image property allows you to add an SVG image to your page.&#x20;

{% hint style="info" %}
Imported images present a security risk. Although Cwicly sanitises them as well as possible, make sure you trust the source you import them from.
{% endhint %}

### Add

* Select SVG block.
* In the Primary tab, set Type to Image.

<figure><img src="/files/JNtbgTWrI3jsxUoqu4vl" alt=""><figcaption></figcaption></figure>

### SVG Uploads&#x20;

The SVG Uploads property enables you to upload SVG images to the media library.&#x20;

Cwicly sanitises SVGs but make sure you trust the source of the SVG before uploading it.

* Navigate to the Cwicly tab in the Dashboard.
* Open the Role Editor.
* In Miscellaneous, toggle SVG on to enable.

<figure><img src="/files/G5PaEPjkYTU7guDFd1dH" alt=""><figcaption></figcaption></figure>

### Set Source

The Source property allows you to set the source of the image, Static or Dynamic.

* Set source as required.

<figure><img src="/files/hlwWAbwToFrFfkXhUlFm" alt=""><figcaption></figcaption></figure>

### Customise

The Customise property allows you to modify your Image as required including size, height, width, stroke as well as fill, stroke and text colours.

* Customise as required.

<figure><img src="/files/Kkfm69OFlqkD8x4p7057" alt=""><figcaption></figcaption></figure>

## Inline

The Inline property allows you to add an SVG code snippet to your page.&#x20;

{% hint style="info" %}
Imported SVG snippets present a security risk. Although Cwicly sanitises them as well as possible, make sure you trust the source you import them from.
{% endhint %}

### Add

* Select SVG block.
* In the Primary tab, set Type to Inline.

<figure><img src="/files/LSYAz0CJLCB0Tu9MfIpl" alt=""><figcaption></figcaption></figure>

### Inline SVG&#x20;

Allows you to add inline SVGs.&#x20;

{% hint style="info" %}
Cwicly sanitises SVGs but make sure you trust the source of the SVG before adding it to your content.
{% endhint %}

* Navigate to the Cwicly tab in the Dashboard.
* Open the Role Editor.
* In Miscellaneous, toggle Inline SVG to enable.

<figure><img src="/files/arFsCptALtu9qS3SzVUO" alt=""><figcaption></figcaption></figure>

### SVG

The SVG property allows you to paste an SVG code snippet.

* Find the SVG field.
* Paste required SVG snippet.

<figure><img src="/files/cQfwqWbUIRpD2A9z9vLT" alt=""><figcaption></figcaption></figure>

### Customise

The Customise property allows you to modify your SVG snippet as required including size, height, width, stroke as well as fill, stroke and text colours.

* Customise as required.

<figure><img src="/files/z8opykzFNeGj5gRnCXQJ" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cwicly.com/blocks/svg-block.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.