Scalable Vector Graphics（SVG）のインポート

Note: Sign in to the developer console to build or publish your skill.

注： SVGインポート機能はベータ版として提供されています。フィードバックに基づく改善や今後の機能強化によって変更される場合があります。

Scalable Vector Graphics（SVG）ファイルをAlexa Presentation Language（APL）ドキュメントで使用するには、APLオーサリングツールを使用してAlexa Vector Graphics（AVG）オブジェクトに変換します。

SVG形式は、ベクターグラフィックスを表すためのXMLベースのマークアップ言語です。AVGは、SVGのパラメーター化されたサブセットです。AVGで定義されたグラフィックは、VectorGraphicコンポーネントを使用してドキュメントに表示できます。

オーサリングツールでSVGファイルをAVGに変換する

SVGからAVGへの変換は、次のいずれかの方法で行います。

SVGを既存のAPLドキュメントにインポートする
SVGからAPLドキュメントを新規作成する

どちらの場合も、インポートでは次の処理が行われます。

AVGをドキュメントのgraphicsプロパティに追加します。AVGには、SVGから変換されたデータが含まれています。AVG形式の詳細については、Alexa Vector Graphics形式を参照してください。
AVGを表示するmainTemplateにVectorGraphicコンポーネントを追加します。

インポート後、コンポーネントを適切な表示位置に移動できます。たとえば、コンポーネントをContainerに移動できます。

SVGバージョン1.1を使用するファイルをインポートできます。SVG形式の詳細については、MDNのドキュメントを参照してください。コンバーターでサポートされるSVGの機能については、サポートされている機能を参照してください。

SVGを既存のAPLドキュメントにインポートするには

オーサリングツールで、編集するAPLドキュメントを開きます。
ツールバーで、APLまたはGRAPHICSをクリックします。
GUIビュータブを選択し、コンポーネントを追加をクリックします。
コンポーネントを追加ダイアログボックスで、Vector Graphicを選択します。
オプションを選択ドロップダウンリストで、SVGから変換を選択します。
SVGファイルを選択ボックスにSVGファイルをドラッグするか、参照をクリックしてインポートするファイルを選択します。
必要に応じて、新しいグラフィック名を変更します。
- 名前にはデフォルトでSVGファイル名が使用されますが、必要に応じて変更できます。
- graphicsマップ内の新しいAVGに、指定した名前が使用されます。
追加をクリックします。

オーサリングツールは、新しいVectorGraphicコンポーネントをドキュメントのmainTemplate配列の一番下に追加します。mainTemplateにほかのコンポーネントが含まれている場合、ドキュメントのプレビューに変更はありません。VectorGraphicコンポーネントをContainer内またはmainTemplateの一番上に移動すると、グラフィックが表示されます。

新しくインポートされたものの、mainTemplateの一番下に追加されたために表示されないVectorGraphic

Containerに移動してレイアウトに配置されたVectorGraphicコンポーネント

以下は、ContainerにAlexaHeadline、Text、VectorGraphicを表示するAPLドキュメントの例です。

SVGファイルをインポートしてドキュメントを新規作成するには

開発者コンソールで、ドキュメントを作成するスキルを開きます。
左側のナビゲーションから、マルチモーダル応答をクリックします。
オーサリングツールで作成をクリックします。
アップロードをクリックします。
視覚応答をアップロードダイアログボックスにSVGファイルをドラッグするか、参照をクリックしてインポートするファイルを選択します。
アップロードをクリックします。
プロンプトが出たら、変換をクリックします。
- 変換がエラーなく完了すると、変換されたグラフィックを表示する新しいAPLドキュメントが開きます。新しいドキュメントでは、graphicsプロパティにオブジェクトがあり、そのグラフィックを参照するVectorGraphicがmainTemplateに含まれています。グラフィックのデフォルトの名前は、インポートしたファイルの名前になります。
- 変換でエラーが発生した場合、サポートされていない機能のリストが表示されます。リストを確認し、続行をクリックします。このようなエラーを防ぐには、オーサリングツールでサポートされていない機能がグラフィックで使われていないことを確認します。サポートされている機能については、こちらを参照してください。

AVGをオーサリングツールで編集する

AVGは、オーサリングツールで編集できます。

オーサリングツールで、編集するグラフィックを含むAPLドキュメントを開きます。
ツールバーで、GRAPHICSをクリックします。
GUIビュータブを選択します。ツールに、ドキュメント内のすべてのAVGが表示されます。
編集するグラフィックについて、グラフィック名の下のプロパティをクリックし、中央のペインでプロパティを編集します。

グラフィカルビューで編集できるAlexa Vector Graphicのプロパティ

サポートされている機能

オーサリングツールは、SVGバージョン1.1の変換をサポートしています。SVG形式の詳細については、MDNのドキュメントを参照してください。

コンバーターは、SVGのすべての機能をサポートしているわけではありません。以下の表に、オーサリングツールがAVGに変換できるSVGの機能をまとめます。

SVGの機能	SVG機能のアトリビュート	SVGからAVGへのコンバーターでのサポートの有無
基本の形状
`<circle>`	`cx`	◯
	`cy`	◯
	`r`	◯
	`pathLength`	◯
`<ellipse>`	`cx`	◯
	`cy`	◯
	`rx`	◯
	`ry`	◯
	`pathLength`	◯
`<line>`	`x1`	◯
	`x2`	◯
	`y1`	◯
	`y2`	◯
	`pathLength`	◯
`<polygon>`	`points`	◯
	`pathLength`	◯
`<polyline>`	`points`	◯
	`pathLength`	◯
`<rect>`	`x`	◯
	`y`	◯
	`width`	◯
	`height`	◯
	`rx`	×
	`ry`	×
	`pathLength`	◯
コンテナー要素
`<a>`		×
`<defs>`		一部サポートされます。このタグでグラデーションを定義できます。
`<g>`		◯
`<marker>`		×
`<mask>`		×
`<pattern>`		×
`<svg>`		×
`<switch>`		×
`<symbol>`		×
記述要素
`<desc>`		×
`<metadata>`		×
`<title>`		×
グラデーション要素
`<lineargradient>`		◯
	`gradientUnits`	◯
	`gradientTransform`	◯
	`href`	×
	`spreadMethod`	×
	`x1`	◯
	`x2`	◯
	`y1`	◯
	`y2`	◯
`<radialgradient>`		◯
	`cx`	◯
	`cy`	◯
	`fr`	×
	`fx`	×
	`fy`	×
	`gradientUnits`	◯
	`gradientTransform`	◯
	`href`	×
	r	◯
	`spreadMethod`	×
`<stop>`		◯
	`offset`	◯
	`stop-color`	◯
	`stop-opacity`	◯
グラフィック要素（すべての形状を除く）
`<image>`		×
`<path>`	`d`	◯
	`pathLength`	×
`<text>`	`x`	×
	`y`	×
	`dx`	×
	`dy`	×
	`rotate`	×
	`lengthAdjust`	×
	`textLength`	×
	`font-family`	×
	`font-size`	×
	`font-size-adjust`	×
	`font-stretch`	×
	`font-style`	×
	`font-variant`	×
	`font-weight`	×
	`letter-spacing`	×
	`text-anchor`	×
	`text-decoration`	×
	`text-rendering`	×
`<use>`		×
その他のレンダリング可能な要素
`<foreignobject>`		×
`<textpath>`		×
`<tspan>`		×
光源要素		×
テキストコンテンツ要素		×
テキストコンテンツの子要素		×
未分類の要素
`<clippath>`		×
`<filter>`		×
	`<feblend>`	×
	`<fecolormatrix>`	×
	`<fecomponenttransfer>`	×
	`<fecomposite>`	×
	`<feconvolvematrix>`	×
	`<fediffuselighting>`	×
	`<fedisplacementmap>`	×
	`<fedropshadow>`	×
	`<feflood>`	×
	`<fefunca>`	×
	`<fefuncb>`	×
	`<fefuncg>`	×
	`<fefuncr>`	×
	`<fegaussianblur>`	×
	`<feimage>`	×
	`<femerge>`	×
	`<femergenode>`	×
	`<femorphology>`	×
	`<feoffset>`	×
	`<fespecularlighting>`	×
	`<fetile>`	×
	`<feturbulence>`	×
`<script>`		×
`<style>`		×
`<view>`		×
アニメーション要素		×
コアアトリビュート
`id`		×
`lang`		×
`tabindex`		×
`xml:lang`		×
`class`		×
`style`		×
プレゼンテーションアトリビュート
`alignment-baseline`		×
`baseline-shift`		×
`clip-path`		×
`clip-rule`		×
`color`		×
`color-interpolation`		×
`color-interpolation-filters`		×
`cursor`		×
`direction`		×
`display`		×
`dominant-baseline`		×
`fill`		◯
`fill-opacity`		◯
`fill-rule`		×
`filter`		×
`flood-color`		×
`flood-opacity`		×
`image-rendering`		×
`lighting-color`		×
`marker-end`		×
`marker-mid`		×
`marker-start`		×
`mask`		×
`opacity`		×
`overflow`		×
`pointer-events`		×
`shape-rendering`		×
`stop-color`		◯
`stop-opacity`		×
`stroke`		◯
`stroke-dasharray`		◯
`stroke-dashoffset`		◯
`stroke-linecap`		×
`stroke-linejoin`		×
`stroke-miterlimit`		×
`stroke-opacity`		◯
`stroke-width`		◯
`transform`		一部サポートされます。AVG形式はグループの変形のみをサポートします。
`transform-origin`		×
`unicode-bidi`		×
`vector-effect`		×
`visibility`		×
`word-spacing`		×
`writing-mode`		×
フィルターアトリビュート		×
アニメーションアトリビュート		×
イベントアトリビュート		×

トラブルシューティング

問題：変換が終了したが問題があるというメッセージが表示される

現象

オーサリングツールに「変換が終了しましたが問題があります」というメッセージが表示されます。メッセージにはサポートされていないSVG機能の一覧が表示されています。

解決方法

この問題は、オーサリングツールでファイルをインポートできたものの、サポートされていない機能が原因で想定どおりの結果ではない可能性があることを示しています。

メッセージに記載されたサポートされていない機能の一覧をメモします。続行をクリックし、サポートされていない機能が含まれない状態のグラフィックを確認します。

サポートされている機能については、こちらを参照してください。

問題： SVGファイルの変換中にエラーが発生した

現象

オーサリングツールに「SVGファイルの変換中にエラーが発生しました」というメッセージが表示されます。メッセージにはサポートされていないSVG機能の一覧が表示されています。

解決方法

このエラーは、サポートされていない機能があるために、オーサリングツールがファイルをまったくインポートできなかったことを示しています。

メッセージに記載されたサポートされていない機能の一覧をメモします。キャンセルをクリックして変換を終了するか、最初からやり直すをクリックして別のファイルをインポートします。

問題：ファイルタイプがサポートされていない

現象

オーサリングツールに「ファイルタイプがサポートされていません。APL、有効なLottieの.json、グラフィックの.svgのいずれかのファイルを選択してください」というメッセージが表示されます。

解決方法

このエラーは、オーサリングツールがファイルを有効なSVGファイルと認識しなかったことを示しています。キャンセルをクリックするか、最初からやり直すをクリックして有効なSVGファイルを選択します。

問題：変換が正常に終了したのにプレビューペインに空白画面が表示される

現象

オーサリングツールには、変換が正常に終了したことを示すメッセージが表示されます。にもかかわらず、オーサリングツールのプレビューペインは空白の黒いViewportになり、グラフィックが表示されません。ツールの左側のペインには、想定どおりのAVGおよびVectorGraphicのコードが表示されています。

解決方法

この状況は、インポートしたグラフィックに黒い色のテキストや画像が含まれている場合に発生する可能性があります。グラフィックは正常にインポートされますが、Viewportのデフォルトの背景色が黒いために目に見えません。

黒いグラフィックが表示されるように、ドキュメントの背景色を変更するか、lightテーマに変更してください。

以下は、背景色やテーマを変更する方法の例です。簡潔に示すため、インポートしたAVG（myGraphic）の詳細は省略しています。

Viewportのテーマを変更する

ドキュメントの最上位にドキュメントレベルのthemeプロパティを追加し、lightに設定します。

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

ドキュメントの背景を別の色に変更する

ドキュメントレベルのbackgroundプロパティを追加し、別の色またはグラデーションに設定します。

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

AlexaBackgroundレスポンシブ対応コンポーネントを使用する

alexa-layoutsパッケージのAlexaBackgroundコンポーネントを使用すると、背景をよりきめ細かく制御できます。背景には、色、グラデーション、画像、ビデオ、デフォルトのAlexa背景のいずれかを使用できます。mainTemplateは1つのコンポーネントしか表示しないため、Containerを追加し、そのContainerのitems配列にAlexaBackgroundコンポーネントとVectorGraphicコンポーネントを移動する必要があります。

AlexaBackgroundコンポーネントにアクセスするには、最新バージョンのalexa-layoutsをimport配列に追加します。

次の例は、alexa-layoutsパッケージをインポートし、Container内にAlexaBackgroundとVectorGraphicを配置する方法を示しています。この例では、デフォルトのAlexa背景が使用されます。

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

APLで背景を使用する方法の詳細については、コンテンツを背景、境界線、ヘッダーと組み合わせるを参照してください。

このページは役に立ちましたか？

フィードバックを送信

最終更新日: 2025 年 12 月 02 日

Scalable Vector Graphics（SVG）のインポート

オーサリングツールでSVGファイルをAVGに変換する

AVGをオーサリングツールで編集する

サポートされている機能

トラブルシューティング

問題： 変換が終了したが問題があるというメッセージが表示される

現象

解決方法

問題： SVGファイルの変換中にエラーが発生した

現象

解決方法

問題： ファイルタイプがサポートされていない

現象

解決方法

問題： 変換が正常に終了したのにプレビューペインに空白画面が表示される

現象

解決方法

関連トピック

問題：変換が終了したが問題があるというメッセージが表示される

問題：ファイルタイプがサポートされていない

問題：変換が正常に終了したのにプレビューペインに空白画面が表示される