LoginSignup
3
2

More than 3 years have passed since last update.

@mt877

SVGの属性について理解する

Last updated at Posted at 2020-11-21

はじめに

ロゴやアイコン、テキストなど昨今のWeb制作では当たり前に使われているSVGですが、その属性については意外と把握できていない部分が多いのではないでしょうか。（自分もその1人）
また、SVGをデザインツールから書き出した場合、しばしば必要のない属性が付与されます。不要な属性なら僅かながらも軽量化にもつながるので削除しておきたいですよね。
ということで、SVGにおいて必要・不要な属性を概要とともにまとめたいと思います。

必須属性

SVGに最低限必要な属性は以下の2つです。
属性の詳細についてはよく使われる属性として後述します。
1. xmlns
2. viewBox

よく使われる属性

xmlns

  • 外部ファイルとして使用する場合には必須
  • インラインで使用する場合は省略可能
  • xmlns="http://www.w3.org/2000/svg"

名前空間を宣言するための属性で、HTMLとSVGにある同名の要素を区別するために必要な属性です。
例えば、SVGには独自にリンクを指定するためのa要素があります。HTMLのa要素と同じ名前ですが別の要素で、意味合いの異なるこれらを区別するためにxmlnsという仕組みが存在しています。
URLの参照先に意味はありませんが、全世界で一意であることを保証するために慣例としてURL風の文字列（http://www.w3.org/2000/svg）を設定します。

<svg xmlns="http://www.w3.org/2000/svg">...</svg>

viewBox

  • 必須
  • viewBox="X座標の最小値 Y座標の最小値 X軸の幅 Y軸の高さ"

SVGにはビューポート（表示エリア）とビューボックス（描画エリア）という概念があり。
ビューポートはwidth属性とheight属性で、ビューボックスはviewBox属性で指定します。
viewBox属性を指定すると、描画エリアのグラフィックが表示エリアにぴったり収まるよう拡縮されます。
省略すると表示崩れの原因となるため必ず記述しなければなりません。

<svg viewBox="0, 0, 600, 400">...</svg>

width・height

  • 省略可能
  • width="横幅"・height="縦幅"

SVGのビューポートサイズを指定します。
単位を省略した場合pxが適用されます。

<svg width="400" height="200">...</svg>

version

  • 省略可能
  • SVG2以降は非推奨
  • version="SVGのバージョン"

SVGドキュメントが準拠するバージョンを指定します。
有効な選択肢は1.0もしくは1.1のいずれかで、省略した場合は1.0として認識されます。

<svg version="1.1">...</svg>

xmlns:xlink

  • SVG要素内でハイパーリンクを使用する場合は必須
  • ハイパーリンクを使用しない、もしくはインラインで使用する場合は省略可能
  • SVG2以降は非推奨
  • xmlns:xlink="http://www.w3.org/1999/xlink"

xmlnsとは別の名前空間宣言で、SVG内の要素にハイパーリンクを使用する際に必要な属性です。
xlinkは「名前空間接頭辞」と呼ばれ、xlink:hrefのような形で属性名の前に接頭辞をつける必要があります。
<use>タグと組み合わせることで、一度定義したグラフィックを再利用する（使い回す）こともできます。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="http://example.com">
    <circle cx="100" cy="100" r="50"></circle>
  </a>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <def>
    <circle cx="50" cy="50" r="50" id="foo"></circle>
  </def>
  <use xlink:href="#foo" />
  <use x="120" y="80" xlink:href="#foo" />
</svg>

xml:space

  • 省略可能
  • SVG2以降は非推奨
  • xml:space="default"・xml:space="preserve"

SVG内の空白を保持するかどうかを指定する属性で、defaultおよびpreserveのみが値として指定できます。
preserveを指定すると、すべての改行とタブ文字がスペース文字に置き換えられ、スペース文字は先頭・末尾および連続したものも残さず描画されます。HTMLの<pre>タグに似た挙動となります。

<svg xml:space="preserve">...</svg>

preserveAspectRatio

  • 省略可能
  • preserveAspectRatio="none"

SVGグラフィックのアスペクト比の取り扱いを指定できます。
通常viewBoxの値によってSVGのアスペクト比が定義されますが、こちらの属性にnoneを指定することでアスペクト比を非固定にできます。

<svg preserveAspectRatio="none">...</svg>

fill

  • 省略可能
  • fill="Hexカラーコード"

SVGグラフィックの塗り色をHex値で指定します。
省略した場合#000が適用されます。

<svg fill="##f00">...</svg>

<svg>
  <circle cx="100" cy="100" r="50" fill="##f00"></circle>
</svg>

stroke

  • 省略可能
  • stroke="Hexカラーコード"

SVGのアウトラインの色をHex値で指定します。

<svg stroke="#0f0">...</svg>

<svg fill="#f00" stroke="#0f0">
  <circle cx="100" cy="100" r="50"></circle>
</svg>

stroke-width

  • 省略可能
  • stroke-width="数値"

SVGのアウトラインの線幅を指定します。
単位を省略した場合pxが適用されます。
前述のstrokeを省略した場合、アウトラインの色は#000が適用されます。

<svg stroke-width="3" fill="#f00" stroke="#0f0">
  <circle cx="100" cy="100" r="50"></circle>
</svg>

SVG標準の歴史

2020年11月現在のSVGバージョン最新版はSVG 1.1で、SVG 2が勧告候補になっています。

沿革

2001年9月4日 : SVG 1.0がW3C勧告
2003年1月14日 : SVG 1.1と、SVG Tiny・SVG Basic（モバイルSVGプロファイル）がW3C勧告
2008年12月22日 : SVG Tiny 1.2がW3C勧告
2011年8月16日 : 誤記を修正したSVG 1.1 (Second Edition)がW3C勧告
2018年10月4日 : SVG 2がW3C勧告候補

参考URL

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
2