Import a Scalable Vector Graphic (SVG) (Beta)

Use the APL authoring tool to convert Scalable Vector Graphics (SVG) files into Alexa Vector Graphics (AVG) objects to use in your Alexa Presentation Language (APL) documents.

The SVG format is an XML-based markup language for describing vector graphics. AVG is a parameterized subset of SVG. You can display an AVG-defined graphic in your document with the VectorGraphic component.

Convert an SVG file to AVG in the authoring tool

You can convert an SVG to an AVG in one of two ways:

  • Import an SVG into an existing APL document
  • Create a new APL document from the SVG

In both cases, the import does the following:

  • Adds an (AVG) to the graphics property of the document. The AVG contains the converted data from the SVG. For details about the AVG format, see Alexa Vector Graphics Format.
  • Adds a VectorGraphic component in mainTemplate that displays the AVG.

After the import, you can move the component to the correct place to display. For example, you might move the component into a Container.

You can import files that use SVG version 1.1. For details about SVG format, see the MDN documentation. See Supported features for the features of SVG the converter supports.

To import an SVG file into an existing APL document

  1. In the authoring tool, open the APL document you want to edit.
  2. In the toolbar, click either APL or GRAPHICS.
  3. Select the GUI View tab, and then click Add Component.

    Adding a component in the GUI view
  4. In the Add Component dialog box, select Vector Graphic.
  5. In the Select an Option drop-down list, select Convert from SVG.
  6. Either drag your SVG file to the Select SVG File box, or click Browse and locate the file to import.
  7. If necessary, change the New Graphic Name.
    • The name defaults to the file name of your SVG file, but you can change it if necessary.
    • The new AVG in the graphics map uses the name you provide.
  8. Click Add.

The authoring tool adds the new VectorGraphic component to the end of the mainTemplate array in your document. If your mainTemplate contains other components, you won't see any change in the document preview. Move the VectorGraphic component into your Container or to the top of mainTemplate to see the graphic.

This newly imported VectorGraphic doesn't display because it is at the end of the mainTemplate
This newly imported VectorGraphic doesn't display because it is at the end of the mainTemplate
Move the VectorGraphic component into the Container to position it in the layout
Move the VectorGraphic component into the Container to position it in the layout

The following example shows an APL document that displays AlexaHeadline, the Text, and a VectorGraphic in a Container.

To import an SVG file and create a new document

  1. In the developer console, open the skill for which you want to create this document.
  2. In the left-hand navigation, click Multimodal Responses.
  3. Click Visual.

    The authoring tool filters the list of APL documents to display visual responses saved with the skill.

  4. Click Create Visual Response.
  5. Click Upload

  6. Either drag your SVG file to the Upload your Visual Response dialog box, or click Browse and locate the file to import.
  7. Click Upload.
  8. When prompted, click Convert.
    • If the conversion completes without errors, the tool opens to a new APL document that displays the converted graphic. The new document has an object in the graphics property and a VectorGraphic that references the graphic in the mainTemplate. The name for the graphic defaults to the file name for the file you imported.
    • If the conversion encountered any errors, the tool displays a list of the unsupported features. Review the list and click Continue. To prevent these errors, make sure your graphic doesn't use any features that aren't supported in the authoring tool. For the list of supported features, see Supported features.

Edit an AVG in the authoring tool

You can edit an AVG in the authoring tool.

  1. In the authoring tool, open the APL document that contains the graphic you want to edit.
  2. In the toolbar, click the GRAPHICS toolbar.
  3. Select the GUI View tab. The tool displays all the AVGs in the document.

    Editing an Alexa Vector Graphic
  4. For the graphic to edit, click the properties under the graphic name, and then edit the properties in the middle pane.
Edit the properties of an Alexa Vector Graphic in the graphical view
Edit the properties of an Alexa Vector Graphic in the graphical view

Supported features

The authoring tool supports converting SVG version 1.1. For details about SVG format, see the MDN documentation.

The converter doesn't support all features of SVG. The following table summarizes the SVG features that the authoring tool converts to AVG.

SVG feature SVG feature attributes Supported by SVG to AVG converter

Basic Shapes

<circle>

cx

Yes

cy

Yes

r

Yes

pathLength

Yes

<ellipse>

cx

Yes

cy

Yes

rx

Yes

ry

Yes

pathLength

Yes

<line>

x1

Yes

x2

Yes

y1

Yes

y2

Yes

pathLength

Yes

<polygon>

points

Yes

pathLength

Yes

<polyline>

points

Yes

pathLength

Yes

<rect>

x

Yes

y

Yes

width

Yes

height

Yes

rx

No

ry

No

pathLength

Yes

Container Elements

<a>

No

<defs>

Partial support. You can define gradients with this tag.

<g>

Yes

<marker>

No

<mask>

No

<pattern>

No

<svg>

No

<switch>

No

<symbol>

No

Descriptive Elements

<desc>

No

<metadata>

No

<title>

No

Gradient Elements

<lineargradient>

Yes

gradientUnits

Yes

gradientTransform

Yes

href

No

spreadMethod

No

x1

Yes

x2

Yes

y1

Yes

y2

Yes

<radialgradient>

Yes

cx

Yes

cy

Yes

fr

No

fx

No

fy

No

gradientUnits

Yes

gradientTransform

Yes

href

No

r

Yes

spreadMethod

No

<stop>

Yes

offset

Yes

stop-color

Yes

stop-opacity

Yes

Graphics Elements (except for all shapes)

<image>

No

<path>

d

Yes

pathLength

No

<text>

x

No

y

No

dx

No

dy

No

rotate

No

lengthAdjust

No

textLength

No

font-family

No

font-size

No

font-size-adjust

No

font-stretch

No

font-style

No

font-variant

No

font-weight

No

letter-spacing

No

text-anchor

No

text-decoration

No

text-rendering

No

<use>

No

Other renderable elements

<foreignobject>

No

<textpath>

No

<tspan>

No

Light source elements

No

Text content elements

No

Text content child elements

No

Uncategorized Elements

<clippath>

No

<filter>

No

<feblend>

No

<fecolormatrix>

No

<fecomponenttransfer>

No

<fecomposite>

No

<feconvolvematrix>

No

<fediffuselighting>

No

<fedisplacementmap>

No

<fedropshadow>

No

<feflood>

No

<fefunca>

No

<fefuncb>

No

<fefuncg>

No

<fefuncr>

No

<fegaussianblur>

No

<feimage>

No

<femerge>

No

<femergenode>

No

<femorphology>

No

<feoffset>

No

<fespecularlighting>

No

<fetile>

No

<feturbulence>

No

<script>

No

<style>

No

<view>

No

Animation elements

No

Core attributes

id

No

lang

No

tabindex

No

xml:lang

No

class

No

style

No

Presentation attributes

alignment-baseline

No

baseline-shift

No

clip-path

No

clip-rule

No

color

No

color-interpolation

No

color-interpolation-filters

No

cursor

No

direction

No

display

No

dominant-baseline

No

fill

Yes

fill-opacity

Yes

fill-rule

No

filter

No

flood-color

No

flood-opacity

No

image-rendering

No

lighting-color

No

marker-end

No

marker-mid

No

marker-start

No

mask

No

opacity

No

overflow

No

pointer-events

No

shape-rendering

No

stop-color

Yes

stop-opacity

No

stroke

Yes

stroke-dasharray

Yes

stroke-dashoffset

Yes

stroke-linecap

No

stroke-linejoin

No

stroke-miterlimit

No

stroke-opacity

Yes

stroke-width

Yes

transform

Partial support. The AVG format supports group transforms only.

transform-origin

No

unicode-bidi

No

vector-effect

No

visibility

No

word-spacing

No

writing-mode

No

Filters attributes

No

Animation attributes

No

Event attributes

No

Troubleshooting

Issue: Conversion complete with issues message

Symptoms

The authoring tool displays a message stating "Conversion Complete with Issues." The message lists unsupported SVG features.

Try this

This issue means that the authoring tool could import the file, but the results might not be what you expect due to the unsupported features.

Note the list of unsupported features shown in the message. Click Continue to see the resulting graphic without the unsupported features.

For the list of supported features, see Supported features.

Issue: There were errors converting your SVG file

Symptoms

The authoring tool displays a message stating "There were errors converting your SVG file." The message lists unsupported SVG features.

Try this

This error means that the authoring tool couldn't import the file at all due to unsupported features.

Note the list of unsupported features shown in the message. Click Cancel to exit the conversion, or Start Over to import a different file.

Issue: File type not supported error

Symptoms

The authoring tool displays a message stating "File type not supported. Please select an APL, valid Lottie .json, or graphic .svg file."

Try this

This error means that the authoring doesn't recognize the file as a valid SVG file. Click Cancel or Start Over and select a valid SVG file.

Issue: Preview pane displays blank screen after a successful conversion

Symptoms

The authoring tool displays a message indicating that the conversion was successful. However, the preview pane in the authoring tool displays a blank, black viewport with no graphic. The left-hand pane of the tools displays the expected AVG and VectorGraphic code.

Try this

This situation might occur if the graphic you imported contains text and images that use black as the color. The graphic imported correctly, but is not visible against the default black viewport background.

Either change the background color for the document, or change to the light theme to see the black graphic.

The following examples show how you can change the background color or theme. Details are removed from the imported AVG (myGraphic) for brevity.

Change the viewport theme

Add the document-level theme property to the top level of the document and set it to light.

{
  "type": "APL",
  "theme": "light",
  "version": "1.9",
  "mainTemplate": {
    "parameters": [
      "payload"
    ],
    "items": {
      "type": "VectorGraphic",
      "source": "myGraphic"
    }
  },
  "graphics": {
    "myGraphic": {}
  }
}

Change the document background to a different color

Add the document-level background property and set it to a color or gradient.

{
  "type": "APL",
  "version": "1.9",
  "background": "yellow",
  "mainTemplate": {
    "parameters": [
      "payload"
    ],
    "items": {
      "type": "VectorGraphic",
      "source": "myGraphic"
    }
  },
  "graphics": {
    "myGraphic": {}
  }
}

Use the AlexaBackground responsive component

The AlexaBackground component in the alexa-layouts package gives you more control over the background. You can use a color, gradient, image, video, or default Alexa background. Because mainTemplate displays a single component, you must add a Container and move the AlexaBackground and VectorGraphic components into the items array for the Container.

To access the AlexaBackground component, add the current version of alexa-layouts to the import array.

The following example shows how to import the alexa-layouts package, and then how to arrange AlexaBackground and VectorGraphic in a Container. This example uses the default Alexa background.

{
  "type": "APL",
  "version": "1.9",
  "import": [
    {
      "name": "alexa-layouts",
      "version": "1.5.0"
    }
  ],
  "mainTemplate": {
    "parameters": [
      "payload"
    ],
    "items": {
      "type": "Container",
      "width": "100%",
      "height": "100%",
      "items": [
        {
          "type": "AlexaBackground"
        },
        {
          "type": "VectorGraphic",
          "source": "myGraphic"
        }
      ]
    }
  },
  "graphics": {
    "myGraphic": {}
  }
}

For more about using backgrounds in APL, see Combine Content with Backgrounds, Borders, and Headers.