# SVG Component

If your project contains many vector components, it might occupy significant space and could lead to usage limitations on the page, as well as visual issues. If a vector shape layer looks distorted in Bravo Vision or if a layer has two or more effects applied, add this tag to any element, group, or frame to enable Bravo to render it as it appears in Figma.

{% hint style="info" %}
**What is an SVG?**\
\
**SVG (Scalable Vector Graphics)** is an XML-based vector image format used for two-dimensional graphics. It allows for the creation of high-quality graphics that can scale to any size without losing quality. SVG files are widely supported across web browsers and can be used for various purposes, including illustrations, icons, and animations.
{% endhint %}

## 👉 **The Tag** <a href="#the-tag" id="the-tag"></a>

**📍 Where to add the tag:** Inside a container frame in any shape layer (3rd level)

```
[component:svg]
```

![](/files/6GjUMkRXgsAlfKmodXu8)

{% hint style="info" %}
The <mark style="color:red;">`[component:svg]`</mark> tag functions by treating all elements under it as a single and unique element, hence **it cannot be bounded**. \
\
This approach aligns Bravo more closely with Figma. Additionally, it results in performance optimization, particularly on mobile platforms, as only a single element requires rendering rather than multiple entities.
{% endhint %}

{% hint style="info" %}
The <mark style="color:red;">`[component:svg]`</mark>SVGs/vectors  are "fit" to container by default, as they are normally used for icons. Add the <mark style="color:red;">`[shape:fill]`</mark>tag and the SVG will be "fill" to container, which is useful for backgrounds.&#x20;
{% endhint %}


---

# 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.bravostudio.app/bravo-tags/components/svg-component.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.