SVG
SVGウィジェットは、拡大・縮小しても品質が劣化しないベクターグラフィック（SVG）を画面に表示するウィジェットです。
アイコン・ロゴ・イラストのように、どのサイズでも鮮明さが重要な画像に使用します。
定義・役割
SVGウィジェットは、asset・ネットワーク・ファイル・文字列など、さまざまなソースのSVGを読み込んで描画します。SVG全体に色を重ねたり（color）、領域への合わせ方（fit）や配置を調整でき、アニメーションSVGは再生・一時停止・停止で制御できます。ソースが空、または見つからない場合は、代わりにプレースホルダー画像を表示します。
- カテゴリー: Contents
- 初期状態: ソースが空の場合はプレースホルダー画像を表示
機能
| 機能 | 説明 |
|---|---|
| ベクター描画 | サイズに関係なく鮮明に表示されます。拡大・縮小しても品質が劣化しません。 |
| ソースの読み込み | asset・ネットワーク・ファイル・文字列などからSVGを読み込みます。 |
| 色の重ね塗り | colorとcolorBlendModeでSVG全体に色を適用します。 |
| 合わせ方・配置 | fit・alignmentで領域内での配置方法を調整します。 |
| アニメーション | animatedをオンにするとアニメーションSVGを再生し、repeatで繰り返すかどうかを指定します。 |
| プレースホルダー | ソースがない、または読み込みに失敗した場合はplaceholder画像を表示します。 |
使い方
- 左のウィジェットパレットでContentsカテゴリーを開きます。
- SVG項目をキャンバスにドラッグ&ドロップします。
- 右のプロパティパネルで表示するSVGソースを指定します。
- 必要に応じて色（
color）・合わせ方（fit）・サイズ（Size）を調整します。 - アニメーションSVGの場合は
animatedをオンにし、repeatで繰り返すかどうかを決めます。
プロパティ
| プロパティ | 説明 | デフォルト値 | 値 / タイプ |
|---|---|---|---|
svgLoader | 表示するSVGソース（asset・ネットワーク・ファイル・文字列など） | 空のソース | SVGローダー |
placeholder | ソースがないときに表示する代替画像の名前 | 未設定 | 文字列（asset名） |
Size | ウィジェットのサイズ - 幅・高さ（展開するとwidth・height） | 未設定 | 数値（px） |
fit | 領域内でSVGを合わせる方法 | contain | fill·contain·cover·fitWidth·fitHeight·none·scaleDown |
alignment | 領域内での配置 | 中央（center） | アライメント値 |
matchTextDirection | テキスト方向（RTL）に合わせて左右反転 | false | true / false |
allowDrawingOutsideViewBox | viewBoxの外側まで描画を許可 | false | true / false |
color | SVGに重ねる色（ティント） | 未設定 | カラー |
colorBlendMode | colorをSVGに合成する方法 | srcIn | ブレンドモード |
semanticsLabel | アクセシビリティ（スクリーンリーダー）ラベル | 未設定 | 文字列 |
excludeFromSemantics | アクセシビリティツリーから除外 | false | true / false |
clipBehavior | 領域外のクリッピング方法 | hardEdge | none·hardEdge·antiAlias·antiAliasWithSaveLayer |
cacheColorFilter | カラーフィルターをキャッシュするかどうか | false | true / false |
animated | アニメーションSVGを再生するかどうか | false | true / false |
repeat | アニメーションを繰り返すかどうか（animatedがオンのとき） | true | true / false |
注意・ヒント
ヒント
animatedは作成時点で決める値です。オンのときだけアニメーションSVGを再生し、静的なSVGはオフにしておけば追加のレンダリングコストがかかりません。
注記
ソースが空、またはassetが見つからない場合は、指定したplaceholder画像（未設定の場合は既定のプレースホルダー）が代わりに表示されます。
さらに詳しく
ヒント
このウィジェットをスクリプトで制御するWidget Control（Property・Method・Event）の全体は、SVG Widget Controlドキュメントで確認してください。