svgコード記述時の注意点

2021.10.06

svgコード記述時の注意点をまとめます。

■ svgコードの最適化にツールを利用

SVGの不要なコードを取り除いて最適化してくれるツールとして、ブラウザで利用できる「SVGOMG」があります。「Open SVG」でsvgを開きダウンロードすることで、コードが最適化されたsvgになります。

■ svgの図形要素の閉じタグ省略

PhotoshopやIllustratorで書き出したsvgファイルは、svgの図形要素に閉じタグが記述されていることがあります。この閉じタグを削除して、代わりに単独タグで使用するバックスラッシュ「/」でタグを終了することができます。svgの図形要素は全てこの記述法が可能です。

<polygon points="xxx"></polygon>
↓
<polygon points="xxx" />

<path d="xxx"></path>
↓
<path d="xxx" />

■ svgコードの単位省略

PhotoshopやIllustratorで書き出したsvgファイルは、svgコードの座標やサイズの指定に単位（px）が記述されていることがあります。svgはCSS同様、px以外にもemや%等の単位が使用できますが、通常は座標やサイズ指定の単位は省略します。また小数点以下の数値は「0.6→.6」のように先頭の「0」を省略できます。

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
  <path stroke="red" stroke-width="10px" opacity="0.6" />
</svg>
↓
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50">
  <path stroke="red" stroke-width="10" opacity=".6" />
</svg>

■ 不要なg要素の削除

Illustratorでグループ化したオブジェクトはg要素で囲われています。g要素はグループ化したオブジェクトにまとめてスタイル指定できる便利な要素ですが、必要ない場合は削除します。

<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
  <defs>
    <style>.cls-1{fill:#fff;opacity:.42}</style>
  </defs>
  <g id="pattern">
    <circle class="cls-1" cx="9" cy="9" r="4"/>
    <circle class="cls-1" r="4"/>
    <circle class="cls-1" cx="18" r="4"/>
    <circle class="cls-1" cx="18" cy="18" r="4"/>
    <circle class="cls-1" cy="18" r="4"/>
  </g>
</svg>

↓

<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
  <defs>
    <style>.cls-1{fill:#fff;opacity:.42}</style>
  </defs>
  <circle class="cls-1" cx="9" cy="9" r="4"/>
  <circle class="cls-1" r="4"/>
  <circle class="cls-1" cx="18" r="4"/>
  <circle class="cls-1" cx="18" cy="18" r="4"/>
  <circle class="cls-1" cy="18" r="4"/>
</svg>

■ 図形要素の透過

svgの図形要素はopacityで透明度が設定できます。opacityは図形全体、塗りと線の両方に適用されます。塗りのみ透過する場合はfill-opacity、線のみ透過する場合はstroke-opacityを使用します。

<circle fill="yellow" stroke="green" opacity=".6" />
<circle fill="yellow" stroke="green" fill-opacity=".6" />
<circle fill="yellow" stroke="green" stroke-opacity=".6" />

■ くり抜き図形の塗りつぶし

fill-rule属性はsvg図形の塗りつぶし方法を定義します。初期値は「nonzero」で、fill-rule属性が設定されていない場合はこの値が適用されます。ですが、pathの向きによっては図形がくりぬけません。この場合はfill-rule属性に「evenodd」を指定します。

<svg xmlns="http://www.w3.org/2000/svg" width="53" height="53" viewBox="0 0 53 53">
  <path d="M1.5,1.5h50v50H1.5ZM14,14H39V39H14Z" fill="#fc3" stroke="red" stroke-width="3"/>
</svg>

↓

<svg xmlns="http://www.w3.org/2000/svg" width="53" height="53" viewBox="0 0 53 53">
  <path d="M1.5,1.5h50v50H1.5ZM14,14H39V39H14Z" fill="#fc3" stroke="red" stroke-width="3" fill-rule="evenodd"/>
</svg>

■ pathの一括塗りつぶし

pathの塗りつぶしに全て同じ色を指定する場合、svgに一括で塗りつぶしを指定しても同じ結果になります。この場合pathに塗りつぶしの指定は必要ありません。

<svg xmlns="http://www.w3.org/2000/svg" width="28" height="4" viewBox="0 0 28 4">
  <circle cx="2" cy="2" r="2" fill="#161616"/>
  <circle cx="14" cy="2" r="2" fill="#161616"/>
  <circle cx="26" cy="2" r="2" fill="#161616"/>
</svg>

↓

<svg xmlns="http://www.w3.org/2000/svg" width="28" height="4" viewBox="0 0 28 4" fill="#161616">
  <circle cx="2" cy="2" r="2"/>
  <circle cx="14" cy="2" r="2"/>
  <circle cx="26" cy="2" r="2"/>
</svg>