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

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

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

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

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の一番上に移動すると、グラフィックが表示されます。

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

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

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

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

開発者コンソールで、対象のスキルを開きます。
左側のナビゲーションから、マルチモーダルをクリックします。
視覚をクリックします。

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

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": "1.9",
  "mainTemplate": {
    "parameters": [
      "payload"
    ],
    "items": {
      "type": "VectorGraphic",
      "source": "myGraphic"
    }
  },
  "graphics": {
    "myGraphic": {}
  }
}

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

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

{
  "type": "APL",
  "version": "1.9",
  "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": "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": {}
  }
}

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

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

フィードバックを送信

最終更新日: 2021 年 12 月 10 日

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

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

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

サポートされている機能

トラブルシューティング

問題： 「変換が終了しましたが問題があります」というメッセージが表示された

現象

解決方法

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

現象

解決方法

問題： 「ファイルタイプがサポートされていません」というメッセージが表示された

現象

解決方法

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

現象

解決方法

関連トピック

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

問題：「変換が終了しましたが問題があります」というメッセージが表示された

問題：「ファイルタイプがサポートされていません」というメッセージが表示された

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