Photoshopのシェイプで図形を作成し、svgのコードをコピーしてpath要素を取得します。

Photoshopで作成した図形をsvg形式で書き出し、またはsvgコードを取得する場合、図形は必ずシェイプで作成する必要があります。選択範囲を塗りつぶしたピクセルの図形ではpath要素が取得できません。

各種シェイプツールでシェイプを作成すると自動的にシェイプレイヤーが作成されます。シェイプレイヤーはレイヤーのサムネイルの右下にバウンディングボックスが表示されます。シェイプ1つに対しシェイプレイヤーが1つ作成されます。1つのシェイプレイヤー内に複数のシェイプは作成できません。

シェイプはベクターデータのため、拡大縮小しても劣化しません。レイヤーのサムネイルをダブルクリックするとシェイプの塗りの色を簡単に変更できます。

シェイプレイヤーを右クリックし、「SVGをコピー」を選択すると図形のsvgコードが取得できます。取得したsvgコードには図形のpath要素が含まれています。

WEBページで写真等の画像をsvgでマスクする場合、svgコードのpath要素が必要です。これを上記の手順で取得できます。

以下は「SVGをコピー」で取得した、幅：100px、高さ：50px、塗り：赤、線：なし、のシェイプのsvgコードです。

<svg 
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="100px" height="50px">
<path fill-rule="evenodd"  fill="rgb(255, 0, 0)"
 d="M-0.000,0.000 L100.000,0.000 L100.000,50.000 L-0.000,50.000 L-0.000,0.000 Z"/>
</svg>

同様のシェイプを、「ファイル」→「書き出し」→「書き出し形式」→形式でSVGを選択して保存すると拡張子が.svgのファイルが保存できます。コードは以下になります。

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50" viewBox="0 0 100 50">
  <defs>
    <style>
      .cls-1 {
        fill: red;
      }
    </style>
  </defs>
  <rect id="長方形_1" data-name="長方形 1" class="cls-1" width="100" height="50"/>
</svg>

svg形式で書き出したファイルのコードは長方形がrect要素、塗りはスタイルで記述されます。これに対し、「SVGをコピー」で取得したコードは長方形がpath要素、塗りは属性で記述されているのがわかります。