In the tutorial, we demonstrate the power of SVG to customize the view containers:

(Script tags will be stripped)


# Add rounded corner

Adding rounded corner is simple. Assume you have a view named **view1**. To add rounded corners, in the **Source Tab**, goto the view1 and add the tag **rx="20"** to the rectangle below:



# Replacing the rectangle with a circle

SVG Expresssion

We use the advanced SVG expression feature of SCADE. This functionality has not been completely documented, but we will provide an advanced SVG tutorial soon. We use expressions to compute and override the values of an SVG control.

Each view is represented by a rectangle by default. Replace the rectangle with a circle and override the default SVG tag values with the scade prefix to position the circle and adjust the radius:

  • scade:r="size.h/2 - 10" overrides the** r value** with the expression size.h (current control height), divided by 2 and substract 10

  • set the** x position** scade:cx="size.w/2" of the circle

  • set the **y position** scade:cy="size.h/2"



Please find the video here

(Script tags will be stripped)