SVG リソースの使用

SVG リソースをコンポーネントに追加するには、2 つの方法があります。1 つは SVG リソースをコンポーネントの HTML テンプレートに直接追加する方法。もう 1 つは SVG リソースを静的リソースとしてアップロードしてから、コンポーネントの JavaScript ファイルにインポートする方法です。

SVG (Scalable Vector Graphics) は、直線、曲線、図形、テキストを定義できる、XML ベースの画像形式です。次に、赤の長方形、緑の円、「SVG」という白のテキストを含むファイルの例を示します。

このように、各図形には、どのような図形か (たとえば、rect は長方形)、サイズ、色を記述するタグがあります。

HTML テンプレートに SVG リソースを含めるには、他の要素と同様に <template> タグでリソースを囲みます。

  1. SVG ファイルで、id 属性を <svg> タグに追加します。

  2. SVG リソースを静的リソースとして組織にアップロードします。

  3. コンポーネントの JavaScript ファイルで、静的リソースをインポートします。静的リソースへの参照をその id と連結する項目を定義します。

  4. SVG の <use> 要素を使用して、HTML テンプレートの項目を参照します。

Lightning Web コンポーネントは、SVG タグの制限付きリストをサポートします。

  • <svg>
  • <a>
  • <altglyph>
  • <altglyphdef>
  • <altglyphitem>
  • <animatecolor>
  • <animatemotion>
  • <animatetransform>
  • <audio>
  • <canvas>
  • <circle>
  • <defs>
  • <desc>
  • <ellipse>
  • <filter>
  • <font>
  • <g>
  • <glyph>
  • <glyphref>
  • <hkern>
  • <image>
  • <line>
  • <lineargradient>
  • <marker>
  • <mask>
  • <mpath>
  • <path>
  • <pattern>
  • <polygon>
  • <polyline>
  • <radialgradient>
  • <rect>
  • <stop>
  • <switch>
  • <symbol>
  • <text>
  • <title>
  • <tref>
  • <tspan>
  • <video>
  • <view>
  • <vkern>
  • <use>

関連トピック