Scalable Vector Graphics(SVG)のインポート(ベータ版)

Scalable Vector Graphics(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を表示するmainTemplateVectorGraphicコンポーネントを追加します。

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

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

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

  1. オーサリングツールで、編集するAPLドキュメントを開きます。
  2. ツールバーで、APLGRAPHICSのいずれかをクリックします。
  3. GUIビュータブを選択し、コンポーネントを追加をクリックします。

  4. コンポーネントを追加ダイアログボックスで、Vector Graphicを選択します。
  5. オプションを選択ドロップダウンリストでSVGから変換を選択します。
  6. SVGファイルをSVGファイルを選択ボックスにドラッグするか、参照をクリックしてインポートするファイルを選択します。
  7. 必要に応じて、新しいグラフィック名を変更します。
    • 名前のデフォルトはSVGファイルの名前ですが、必要に応じて変更できます。
    • graphicsマップの新しいAVGに、指定した名前が使用されます。
  8. 追加をクリックします。

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

表示されないVectorGraphic(新しくインポートされてもmainTemplateの一番下に追加されたため)
表示されないVectorGraphic(新しくインポートされてもmainTemplateの一番下に追加されたため)
Containerに移動してレイアウトに配置されたVectorGraphicコンポーネント
Containerに移動してレイアウトに配置されたVectorGraphicコンポーネント

以下は、ContainerAlexaHeadlineTextVectorGraphicを表示するAPLドキュメントの例です。

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

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

    オーサリングツールには、スキルに視覚応答が保存されたAPLドキュメントのみが一覧表示されます。

  4. 視覚応答を作成をクリックします。
  5. アップロードをクリックします。

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

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

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

  1. オーサリングツールで、編集するグラフィックを含むAPLドキュメントを開きます。
  2. ツールバーでGRAPHICSツールバーをクリックします。
  3. GUIビュータブを選択します。このツールには、ドキュメントのAVGがすべて表示されます。

    Alexa Vector Graphicの編集
  4. 編集するグラフィックについて、グラフィック名の下のプロパティをクリックし、中央のペインでプロパティを編集します。
グラフィカルビューで編集できるAlexa Vector Graphicのプロパティ
グラフィカルビューで編集できる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を追加してから、そのContaineritems配列にAlexaBackgroundVectorGraphicのコンポーネントを移動します。

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

以下は、alexa-layoutsパッケージをインポートする方法とContainer内にAlexaBackgroundVectorGraphicを配置する方法の例です。この例では、デフォルトの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で背景を使用する方法について詳しくは、コンテンツを背景、境界線、ヘッダーと結合するを参照してください。