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.

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.

👉 The Tag

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

[component:svg]

The [component:svg] 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.

The [component:svg]SVGs/vectors are "fit" to container by default, as they are normally used for icons. Add the [shape:fill]tag and the SVG will be "fill" to container, which is useful for backgrounds.