Graphic component
  • 08 Nov 2023
  • 3 Minutes to read
  • Contributors
  • Dark

Graphic component

  • Dark

Article summary

The graphic component allows you to create dynamic visualizations in the Scalable Vector Graphics (SVG) format and export them as JPG or PNG images.


widththe width of your graphic
heightthe height of your graphic
archivecontrols if and how the graphic will be exported
urlthe URL to the exported graphic (depends on archive)
valuegets the generated SVG of the graphic
visualsa map of the component's composed visuals
dynamicVisualsa map of the component's dynamic visuals

Width and Height

Defines the width and height of your graphic. You can give it a fixed size or make it dependent on a rule or even an Input.

Archive and Url

Archive determines whether the graphic should be saved to a file and which format and other settings to use.

To accomplish this you must provide a graphic archive value, for example:


This will save the graphic as an SVG image. The name of the GraphicComponent will be used as file name.

The Url property returns the URL of the saved image. If the Archive rule is empty or set to GraphicArchive.None, the Url will return an empty Text "".


Returns the raw SVG generated by the graphic component.

It is not recommended to modify the raw SVG directly, but if you have to hand it to an external system (like a shopping cart) you can convert it to Text with the toText() function to be able to put it in a XML or JSON document:


Visuals and dynamic visuals

These two properties are maps that contain all the composed visuals / dynamic visuals of the graphic component. 

You can use them for example to obtain a visual by name (see the map documentation for further details):

// get the visual with the name "myVisual", or Empty if it doesn't exist

The GraphicArchive type

To use the Archive property of a graphic component you must provide a GraphicArchive value. This section introduces you to the various archive settings that are currently available.


No image will be generated and saved. It is recommended to use this setting when you don't need an exported image to reduce resource consumption.



An SVG image will be saved. If the SVG format works for your use case, you should consider using this option.
Pure SVG images can be enlarged without loss of quality and exporting in this format is also faster.


Png(width, height)

A PNG image with the specified width and height will be saved.
If you can't use SVG and need transparency in your image, you should use this option.

// saves a 400 pixel wide and 400 pixel high PNG image
GraphicArchive.Png(400, 400)

Jpg(width, height, quality)

A JPG image with the specified width, height and quality will be saved.
The quality setting accepts a number between 1 and 100. The higher it is, the better your image will look – but it will also take up more space and thus take longer to load.
The width and height also play a role in the image's size and appearance (if you use raster images in your graphic component, they may look blurry if they are enlarged).

// saves a 600 pixel wide and 300 pixel high JPG image at 60% quality
GraphicArchive.Jpg(600, 300, 60)
The larger a JPG or PNG image is, the longer it will take to generate!
Larger images also take longer to download or send and take up more space. You should make your image just large enough to be suitable for your use case. For JPG images, the quality also affects the file size.


When you create a graphic archive in any of the ways shown above or work with the Archive property of a graphic component, you can access its properties:

typegets the type of the GraphicArchive


Gets the type of the graphic archive. You can use this information for example to figure out which kind of graphic archive is being used by a graphic component.
You must compare this value with a graphic archive type, which has the properties None, Svg, Png and Jpg as you would expect.

// do something when a PNG image is used
if DefaultView.Archive.Type = GraphicArchiveType.PNG then 

Was this article helpful?