何となく分かった気がする SVG について

2021年3月1日2021年3月3日

SVG について調べてみました。
「SVG で単純に
横一本線ってどう描くのかな？」
このように思ったのがきっかけです。

SVGとは

Scalable Vector Graphics の略で、
中身は、XMLベースのテキストファイル。
座標情報によるベクター形式のデータで、
<img> タグで表示する他、HTMLファイルに
直接記述することも可能。

直線 (line)

<line> 要素は、
2つの点をつなぐ直線を作成するために使用します。

<svg x="0" y="0" width="100%" height="20" style="background-color: #fff">
<line x1="5" y1="10" x2="98%" y2="10" stroke="#000" stroke-width="2" />
</svg>

• x1, y1 に始点の座標を指定する。[必須]
• x2, y2 に終点の座標を指定する。[必須]
• stroke には線の色を指定する。(線がない場合は none)
• stroke-width には線幅を指定する。

色の指定は HTML と同様に black、 #ffddff など利用します。

組み合わせ

• グループ化 (g)
  <g> 〜 </g> で囲んだ部分は、 同じ属性値が適用される。
• 円 (circle)
  中心座標と半径を指定して円を描画します。
• 矩形 (rect)
  四角形を生成する際の基準となる座標と、
  そこからの幅と高さを指定します。
• ハイパーリンク (a)
   HTML の <a> 要素とほぼ同じ？
  注意: xlink:href="…" で書くとエラーになります。
• 文字の描画 (text)
  文字列を <text> 〜 </text> で囲む。
  注意: HTMLと違い、複数行にわたる文字は一度に書けない。
• 変形 (transform)
  要素に transform="…" 属性をつけると、
  その図形を変形させることができる。
  (グループ化した図形に対しても有効。)
• CSS (style)
  どの要素 (おもに <text>) も、 
  style="..." で CSS 属性をつけることができる。

<svg x="0" y="0" width="100%" height="130px" style="background-color: #fff;">
<g fill="none" transform="translate(100,50)">
  <circle stroke="red" stroke-width="2" cx="0" cy="0" r="40"></circle>
  <rect x="50" y="-50" stroke="navy" stroke-width="2" width="80" height="40" transform="rotate(30)"></rect>
</g>
<a href="https://blog.goo.ne.jp/four4to6" style="text-decoration:none;" target="_blank" rel="noopener noreferrer">
<text x="0" y="20" fill="blue" stroke="none" transform="scale(4,2)">FOUR</text>
<text x="45" y="20" transform="scale(4,2)">4to6</text>
</a>
</svg>

再利用

すべての要素には id="…" 属性をつけておき、何度でも再利用できます。
一度定義した図形を利用するには <use /> タグを使う。
再利用したい場所で <use href="#名前" /> を書きます。
注意: <use xlink:href="#名前" /> ではありません。

<svg x="0" y="0" width="100%" height="130px" style="background-color: #fff;">
<polygon id="star" points="25,90 90,40 10,40 75,90 50,10" 
         fill="gold" stroke="none" stroke-width="none" />
<use href="#star" transform="translate(150,10)" />
<use href="#star" transform="translate(150,0) rotate(45) " />
</svg>

矢印を描く

線の終端で利用する図形を定義するには、
<marker> タグを使用します。

終端で利用したい図形をあらかじめ
<marker id="名前"> ～ </marker>
で定義しておきます。

必須として、図形の範囲を
viewbox="x y width height" 属性で
指定します。

注意: 図形は (0, 0) を中心とするように描くこと。

利用する直線で
marker-start="url(#名前)" あるいは
marker-end="url(#名前)" を指定します。

<svg x="0" y="0" width="100%" height="40px" style="background-color: #fff;">
<marker id="arrow" viewBox="-5 -5 10 10" orient="auto">
  <polygon points="-5,-5 5,0 -5,5" fill="black" stroke="none" />
</marker>
<line x1="10" y1="20" x2="100" y2="20" 
      stroke="black" stroke-width="4" marker-end="url(#arrow)" />
</svg>

xlink:href 属性は、SVG 2 以降で非推奨

SVG 2 以降で非推奨
この機能は、もはや推奨されていません。一部のブラウザーは依然としてサポートしている場合もありますが、関連する Web 標準から既に削除されている可能性があります。使用を避け、可能であれば既存のコードを更新します。このページの下部にある互換性テーブルを参照して、決定を下します。この機能はいつでも動作しなくなる可能性があることに注意してください。

xlink:href – SVG: Scalable Vector Graphics | MDN (mozilla.org)

注：SVG 2ではxlink名前空間が不要になったため、
xlink:href の代わりに href を使用する必要があります。

Note: SVG 2 removed the need for the namespace, so instead of you should use .xlinkxlink:hrefhref

SVG アプリケーション

全部手動入力するのが面倒くさいときは、
ツールで作成する事もできます。

primalDraw

シンプルなUIでありながら、
ベクター画像を描くための基本的な描画ツールは
一通り揃っているSVGエディタが「primalDraw」です。

primalDrawは無料のオンラインベクターグラフィックス描画アプリケーションです。primalDrawは、イラスト、図、フローチャート、ロゴ、バナーや線画などのベクトルグラフィックスを作成することができます。軽量で、デスクトップやモバイルブラウザで動作するように設計されています。プライマルドローは、学生、教師、愛好家や自由な柔軟なベクトル描画アプリケーションを探している人に最適です。

primalDraw

Vivus instant

自分で作成したSVG画像に
アニメーションを追加できるのが「Vivus instant」です。
手順はSVG形式で保存したファイルを、
そのままサイト上にドラッグ＆ドロップするだけで、
あとは自動的にアニメーションが生成される仕組みになっています。

画像ファイルとして書き方

SVG は通常の画像ファイルとして、
<img> や background-image で読み込むことができます。

img

<img src="svg-sample.svg" width=100 height=60>

background-image

以下は区切り線 <hr> に background-image で
表示したものです。

<hr class="four4to6-hr">

---

.four4to6-hr {
  height: 120px;
  width: 100%;
  border: none;
  background: url("/svg/four4to6_hr_animated.svg");
  background-size:contain;
  background-repeat: no-repeat;
}

object

SVGファイル内にリンクを埋め込んでいる場合、
インラインSVG (HTML内に直接SVGを描画)だと
問題なく機能するが、
<img> を使って表示すると機能しないので、
<object> で表示させます。

<object type="image/svg+xml" data="svg-sample.svg" width="255" height="255"></object>

最後に

SVG は奥が深いので、
もっと凝った実装を再現したい方は、
ご自身で調べてみてください。