Using the SVG Image nodes

Use the SVG Image nodes to show SVG images in your application.

The SVG Image nodes implement a subset of Scalable Vector Graphics (SVG) 1.1. See SVG 1.1 elements and attributes supported by the SVG Image nodes.

Showing an SVG image

To show an SVG image:

  1. In Windows Explorer store the svg file, which contains the image that you want to show, in the Tool_project/Generic directory of your project.

    Kanzi Studio shows the svg file in the Library > Resource Files > Generic.

    ../_images/settings-svg-in-library.png
  2. In the Node Tree or Prefabs, press Alt and right-click the node where you want to create an SVG Image node and select either SVG Image 3D, or SVG Image 2D.

    You can create a 3D node only in a 3D node, such as the Scene node, and a 2D node only in a 2D node.

    ../_images/create-svg-image-2d.png
  3. In the Properties, set the SVG File property to the svg file whose content you want to show.

    Make sure that your svg file uses only elements and attributes supported by the SVG Image nodes. See SVG 1.1 elements and attributes supported by the SVG Image nodes.

    Kanzi creates in the SVG Image node a hidden node tree that renders the content of the svg file.

    ../_images/svg-file-property.png ../_images/settings-icon-in-preview.png
  4. (Optional) To adjust the appearance of the SVG image, in the Properties, add and set:

    • Layout Width and Layout Height to set the size of the SVG Image node

    • Content Horizontal Alignment and Content Vertical Alignment to align the SVG content inside the SVG Image node

    • Align View Box to disabled to ignore the SVG viewBox attribute and instead use the content bounds to align the image

      In an svg file the viewBox attribute of the svg element defines the position and size of the SVG viewport. By default Kanzi uses the view box to align an SVG image.

    • Modulate Color to the color with which you want to tint the SVG image.

      Kanzi Shapes multiplies all color values in the SVG image by this color.

    ../_images/svg-image-properties.png ../_images/svg-image-properties-preview.png

Setting the input area for an SVG Image 2D node

When you enable hit testing for a node with the Input > Hit Testable property, the entire area of that node receives input by default.

To make only the area formed by the composited geometry of the shapes in a 2D shape node receive input, in the Node Tree or Prefabs, select that node and in the Properties, add and enable the Shape > Exact Hit Test property.

../_images/hit-testable-enabled.png ../_images/exact-hit-test-enabled.png

To learn about handling user input in Kanzi, in the Kanzi framework documentation, see Working with > Input.

SVG 1.1 elements and attributes supported by the SVG Image nodes

The SVG Image nodes implement a subset of Scalable Vector Graphics (SVG) 1.1.

The SVG Image nodes support these elements:

Element

Attributes

Notes

circle

cx, cy, r

defs

Parsed for id elements

ellipse

cx, cy, rx, ry

g

line

x1, y1, x2, y2

linearGradient

x1, y1, x2, y2

path

d

polygon

points

The same as polyline but closes the path

polyline

points

radialGradient

cx, cy, fx, fy, r

rect

x, y, width, height, rx, ry

stop

stop-color,stop-opacity, offset

svg

width, height, viewBox

The attributes describe the size of the parent element, needed to convert relative length values from percentage units to pixels.

use

xlink:href, x, y

The SVG Image nodes support these attributes:

Attribute

Description

fill

Sets the color of the fill in these formats: URI, hex, HSL, RGB, CSS extended color keywords.

fill-opacity

Sets the opacity of the fill.

font-size

Converts relative length units other than percentage. The default font size is 12. The ‘em’ unit is implemented with font-size.

gradientUnits

Sets the coordinate system for the attributes that define a gradient vector. Available values are userSpaceOnUse and objectBoundingBox.

gradientTransform

Applies a translate, scale, skew, rotate matrix to the current path transformation.

id

Sets a unique ID for an element, usable for links that use the xlink:href attribute to define a reference to a resource.

spreadMethod

Sets how to fill a region with a gradient that starts or ends inside the bounds of the region. Available values are pad, repeat, and reflect.

stroke

Sets the color of the stroke in these formats: URI, hex, HSL, RGB, CSS extended color keywords.

stroke-dasharray

Sets the pattern of dashes and gaps in the stroke.

stroke-dashoffset

Sets the position along the SVG path where the dash of the stroke begins.

stroke-linecap

Sets the shape of the stroke at the ends of a path. Available values are butt, round, and square.

stroke-linejoin

Sets the style of the area that is formed by two strokes whose ends meet or overlap. Available values are miter, round, and bevel.

stroke-miterlimit

Sets a limit on the ratio of the miter length to stroke-width. When the limit is exceeded, stroke-linejoin falls back to bevel.

stroke-opacity

Sets the opacity of the stroke.

stroke-width

Sets the width of the stroke.

style

Limited CSS2 style support for these attributes:

  • fill

  • fill-opacity

  • offset

  • stop-color

  • stop-opacity

  • stroke

  • stroke-linecap

  • stroke-linejoin

  • stroke-miterlimit

  • stroke-opacity

  • stroke-width

transform

Defines a list of transform definitions to apply to the current path transformation.