Graphic component

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

Properties

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:

GraphicArchive.Svg  

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 "".

Value

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:

DefaultView.Value.toText()

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
Defaultview.Visuals.Get("myVisual")

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.

None

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.

GraphicArchive.None

Svg

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.

GraphicArchive.Svg

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)

Properties

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:

Type

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