APL VectorGraphic (APL 1.3 and earlier)

(This is not the most recent version of APL. Use the Other Versions option to see the documentation for the most recent version of APL)

A VectorGraphic displays a scalable vector graphic image defined in a package or loaded from a URL. Use the Alexa Vector Graphic (AVG) format to define the graphics.

Properties

The VectorGraphic component has the following properties:

Property Type Default Styled Dynamic Description
align Alignment center Yes No Alignment of the vector graphic within the component.
scale Scale none Yes No How the vector graphic will scale up or down within the component.
source URL or name <none> No No The URL or direct reference to a vector graphic.

In addition to these properties, you can pass parameters specific to the AVG object.

Height and width

When source is a URL, the component should also define the width and height property. When they are not defined, they default to 100 pixels.

When source is a reference to a local package or in the graphics property of the document, the component can set height and width to auto. This uses the height and width defined in the vector graphic object.

AVG object parameters

Alexa Vector Graphic (AVG) objects can accept parameters. You use parameters to pass colors or specific values (such as rotation) into the graphic. The parameter values are passed as normal properties on the VectorGraphic component itself. For example, if you have a graphic that takes fillColor as a parameter, you can render it with:

{
  "type": "VectorGraphic",
  "source": "iconBattery",
  "fillColor": "#ffff00"
}

You can pass both explicit properties (such as the fillColor above) and styled properties. For example, to make a battery that changes color in the disabled state, define this style:

{
  "styles": {
    "batteryStyle": {
      "values": [
        {
          "fillColor": "#ffff00"
        },
        {
          "when": "${state.disabled}",
          "fillColor": "#ff00ff"
        }
      ]
    }
  }
}

Then use the style in the VectorGraphic component:

{
  "type": "VectorGraphic",
  "source": "iconBattery",
  "style": "batteryStyle"
}

For details about the format to define a vector graphic, see Vector Graphic Format.

align

Positions the VectorGraphic within the component. Set to one of the following:

Name Description
bottom Align to the bottom, horizontally centered.
bottom-left Align the bottom-left corners
bottom-right Align the bottom-right corners
center Center horizontally and vertically.
left Align to the left side, vertically centered.
right Align to the right side, vertically centered.
top Align to the top, horizontally centered.
top-left Align the top-left corners
top-right Align the top-right corners

scale

Scales the vector graphic within the component. Set to one of the following.

Name Description
none Do not scale the graphic. The align property positions the graphic in the bounding box. The portions of the graphic that fall outside of the bounding box are clipped.
fill Scale the graphic non-uniformly so that the width matches the bounding box width and the height matches the bounding box height.
best-fill Scale the graphic uniformly up or down so that the entire graphic covers the bounding box. The "align" property positions the scaled graphic within the bounding box.
best-fit Scale the graphic uniformly up or down so that the entire graphic fits within the bounding box. The "align" property positions the scaled graphic within the bounding box.

source

Defines the location of the vector graphic data. Set the source to one of the following:

  • A name defined in the graphics property of your document or an imported package.
  • A URL that points to a vector graphic definition

VectorGraphic as an event target

When the VectorGraphic component is the target of an event event.target:

disabled: True if the component is disabled id: ID of the component uid: Runtime-generated unique ID of the component height: Height of the component, in dp (includes the padding) opacity: Opacity of the component [0-1] source: The URL or name of the vector graphic width: Width of the component, in dp (includes the padding)

{
  "event": {
    "target": {
      "disabled": false,
      "id": "component-id",
      "uid": "Runtime-generated-id",
      "height": 300,
      "opacity": 1,
      "source": "name-of-graphic",
      "width": 300
    }
  }
}

Sample VectorGraphic

{
  "type": "VectorGraphic",
  "source": "iconWifi3",
  "width": 100,
  "height": 100,
  "scale": "best-fit"
}

For details about where to put vector graphic definitions in a document, see Document.

Was this page helpful?

Last updated: Nov 28, 2023