> For the complete documentation index, see [llms.txt](https://docs.webstudio.is/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webstudio.is/university/foundations/copy-paste/svg.md).

# SVG

You can paste SVG code directly onto the canvas. Webstudio converts compatible SVG markup into native SVG components, so use this when you want the vector markup to be editable in the Navigator.

## How to paste SVG

1. Copy SVG markup, starting with an `<svg>` element.
2. Paste it onto the canvas in Webstudio.
3. Select the generated SVG components to adjust styles and settings.

## Paste SVG code vs. upload an SVG file

Paste SVG code when you want access to each SVG node in the Navigator, such as paths, groups, shapes, and text.

If you only need to display the SVG as an image, drag the SVG file into the [Assets panel](/university/foundations/assets.md#uploading-assets) and use it with the [Image component](/university/core-components/image.md).

## Related

* [HTML Embed](/university/core-components/html-embed.md) – Embed custom HTML when you do not need native editable SVG components
* [Image](/university/core-components/image.md) – Display uploaded SVG files as image assets
* [Assets](/university/foundations/assets.md#supported-file-types) – See supported asset file types


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.webstudio.is/university/foundations/copy-paste/svg.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.