Home > @i2analyze/notebook-sdk > commands > IInlineSvg > svg

commands.IInlineSvg.svg property

Gets the SVG document fragment that defines the icon.

Signature:

readonly svg: string;

Returns: string

Introduced: version 1.0

Remarks

To create scalable SVG, use the viewBox attribute to define the aspect ratio and how to scale lengths and coordinates, relative to the space given to the icon in the user interface.

Example 1

Instead of using fixed width and height attributes like this, which results in a fixed-size icon 100 pixels square:

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" />
</svg>

Use the viewBox attribute to create a scalable icon with a fixed aspect ratio that grows to fill the available space:

<svg viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" />
</svg>

Example 2

By default, i2 Notebook fills SVG icons to match the current theme. If you provide your icon with inline styling, then the theme is ignored and its appearance in the user interface is your responsibility.

For example, this code creates an icon with a thematic fill color in all themes:

<svg viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" />
</svg>

While this code creates a rectangular icon that is always red, regardless of the theme.

<svg viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" fill="red"/>
</svg>