> Markdown version of [Exporting](https://vaadin.com/docs/latest/components/charts/exporting). Section index: [llms.txt](https://vaadin.com/docs/latest/components/llms.txt)

# <a id="charts.svggenerator"></a>Exporting Charts as SVG

Charts can be exported as SVG by using the `SVGGenerator` class. This allows you to generate an SVG string of any chart, using a `Configuration` object with the chart’s data.

## <a id="installing"></a>Installing

Add the `vaadin-charts-flow-svg-generator` dependency to your project’s `pom.xml` as follows:

```xml
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-charts-flow-svg-generator</artifactId>
</dependency>
```

> **Note: Node.js Required**
>
> Node.js must be installed for the generator to work. See the configuration instructions in [Installing Node.js](https://vaadin.com/docs/latest/flow/configuration/development-mode/node-js.md).

## <a id="using-the-generator"></a>Using the Generator

Create an instance of `SVGGenerator` and call the `generate()` method, passing the chart’s `Configuration` as an argument. The method returns a string with the SVG data of the chart.

> **Warning: Close the Generator**
>
> Remember to **close the generator when you’re done using it**. It’s recommended to use a try-with-resources block, so the generator is automatically closed.

```java
Configuration configuration = new Configuration();
// ...
try (SVGGenerator generator = new SVGGenerator()) {
    String svg = generator.generate(configuration);
} catch (IOException | InterruptedException ex) {
    // handle exceptions accordingly
}
```

## <a id="customizing-svg-generation"></a>Customizing SVG Generation

You can customize some attributes of the resulting SVG.

The customizable options include the following:

- Width

- Height

- Theme

- Language

- Showing timeline

- Executing JavaScript code (formatter functions)

Any customizations are handled with the `ExportOptions` class.

> **Note: CSS Styling Not Supported**
>
> CSS styling isn’t supported when exporting a chart as SVG.

```java
Configuration configuration = new Configuration();
// ...
ExportOptions options = new ExportOptions();
options.setWidth(800);
options.setHeight(600);
try (SVGGenerator generator = new SVGGenerator()) {
    String svg = generator.generate(configuration, options);
} catch (IOException | InterruptedException ex) {
    // handle exceptions accordingly
}
```

### <a id="executing-javascript-functions"></a>Executing JavaScript Functions

You can execute functions from `Configuration` objects, for example, formatter functions. Executing functions must be explicitly enabled by setting the `executeFunctions` flag to `true`.

> **Caution: Only Run Trusted Code**
>
> Enabling this option allows JavaScript code to run on your server. Make sure to only allow safe and trusted code.

```java
Configuration configuration = new Configuration();
configuration.getyAxis().getLabels().setFormatter("function () { return this.value +' mm'; }");
// ...
ExportOptions options = new ExportOptions();
options.setExecuteFunctions(true);
try (SVGGenerator generator = new SVGGenerator()) {
    String svg = generator.generate(configuration, options);
} catch (IOException | InterruptedException ex) {
    // handle exceptions accordingly
}
```

## <a id="preview-svg-for-debugging"></a>Preview SVG (For Debugging)

You can add the generated SVG to a component to see the resulting image.

> **Caution: For Debugging Purposes Only**
>
> Use the [Chart](https://vaadin.com/docs/latest/components/charts/basic-use.md) component to render charts. This approach is only intended to help you debug your application.

```java
Div div = new Div();
Configuration configuration = new Configuration();
// ...
try (SVGGenerator generator = new SVGGenerator()) {
    String svg = generator.generate(configuration);
    div.getElement().setProperty("innerHTML", svg);
} catch (IOException | InterruptedException ex) {
    // handle exceptions accordingly
}
add(div);
```