# SVG Decoder (/libs/image_support/svg)



The lv\_svg extension provides makes it possible to use SVG images in your LVGL UI using the
[Scalable Vector Graphics (SVG) Tiny 1.2 Specification](https://www.w3.org/TR/SVGTiny12/).

For a detailed introduction, see:  [https://www.w3.org/TR/SVGTiny12/](https://www.w3.org/TR/SVGTiny12/)

Usage [#usage]

Enable <ApiLink name="LV_USE_SVG" /> in `lv_conf.h` by setting its value to `1`.

See the examples below.

If you need support for SVG animation attribute parsing,
you can set <ApiLink name="LV_USE_SVG_ANIMATION" /> in `lv_conf.h` to `1`.

As Image Source [#as-image-source]

`lv_image` directly supports SVG images.  For example:

```c title=" " lineNumbers=1
lv_image_set_src(widget, "S:path/to/example.svg");
```

Direct Rendering [#direct-rendering]

It is also possible to draw SVG vector graphics in draw events:

```c title=" " lineNumbers=1
lv_svg_node_t * svg_doc;
const char* svg_data = "<svg><rect x=\"0\" y=\"0\" width=\"100\" height=\"100\"/></svg>";

/* Create an SVG DOM tree */
svg_doc = lv_svg_load_data(svg_data, svg_len);
...

/* Draw SVG image */
lv_draw_svg(layer, svg_doc);
...

/* Release the DOM tree */
lv_svg_node_delete(svg_doc);
```

Examples [#examples]

Load and render SVG data [#load-and-render-svg-data]

<LvglExample name="lv_example_svg_1" path="libs/svg/lv_example_svg_1" />

Load and render SVG data from a file [#load-and-render-svg-data-from-a-file]

<LvglExample name="lv_example_svg_2" path="libs/svg/lv_example_svg_2" />

Load and render SVG data in a draw event [#load-and-render-svg-data-in-a-draw-event]

<LvglExample name="lv_example_svg_3" path="libs/svg/lv_example_svg_3" />

API [#api]