> For the complete documentation index, see [llms.txt](https://scenegroup.gitbook.io/cavalry/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://scenegroup.gitbook.io/cavalry/nodes/shapes/svg-shape.md).

# SVG

Create shapes from .svg files

### UI

[Common Attributes](/cavalry/nodes/shapes/common-attributes.md) +

**File** - drag in a .svg file from the [Asset Window](/cavalry/user-interface/menus/window-menu/asset-window.md)

**SVG Materials** - uncheck this attribute to ignore the SVG's materials. Enable **Fill** under the Fill tab to replace the Fill Color.

**SVG Strokes** - uncheck this attribute to ignore the SVG's stroke. Enable **Stroke** under the Fill tab to replace the Stroke Color.

### Working with SVG data.

Dragging an **SVG** file from the [Assets Window](/cavalry/user-interface/menus/window-menu/asset-window.md) or the filesystem into the [Viewport](/cavalry/user-interface/menus/window-menu/viewport.md) will invoke a pop up dialogue with two options:

* **Asset Layer** - create an **SVG** node and connect the `.svg` asset to the **File** attribute. If the `.svg` asset does not already exist in the Assets Window it will be added.
* **Separate Layers** - separate the `.svg` asset into individual layers, convert each one into an [Editable Shape](/cavalry/nodes/shapes/editable-shape.md) and set the **Fill** and **Stroke** to match.

It is also possible to copy/ paste SVG code from other vector apps like Adobe Illustrator, Affinity Designer and Figma.

* **Adobe Illustrator** - **Edit > Copy** (`cmd/ ctrl + c`) 
* **Affinity Designer** - ensure **Copy Items as SVG** is checked in **Preferences > General** and then use **Edit > Copy** (`cmd/ ctrl + c`) 
* **Figma** - right click on a shape and then select **Copy/Paste > Copy as SVG**.