SVG 画像

概要

SVG は XML 構文に基づいた画像形式で、正式名は Scalable Vector Graphics です。他の画像形式はピクセル処理をベースとしていますが、SVGは画像の形状を記述したものなので、基本的にサイズが小さく、何度拡大しても崩れないテキストファイルです。

SVG ファイルは Web ページに直接挿入して DOM の一部となり、JavaScript と CSS で操作できます。

<!DOCTYPE html>
<html>
<頭></頭>
<本文>
<svg
  id="mysvg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 800 600"
  prepareAspectRatio="xMidYMid ミート"
>
  <circle id="mycircle" cx="400" cy="300" r="50" />
</svg>
</body>
</html>

上記は、Web ページに直接挿入される SVG コードの例です。

SVG コードを別のファイルに記述し、<img>、<object>、<embed>、<iframe> などのタグを使用して Web ページに挿入することもできます。

<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml">
<iframe id="iframe" src="icon.svg"></iframe>

CSS では SVG ファイルも使用できます。

.ロゴ {
  背景: URL(icon.svg);
}

SVG ファイルを BASE64 エンコードに変換して、データ URI として Web ページに書き込むこともできます。

<img src="データ:画像/svg+xml;base64,[データ]">

文法

`<svg>` タグ

SVG コードはトップレベルのタグ <svg> に配置されます。以下に例を示します。

<svg width="100%" height="100%">
  <circle id="mycircle" cx="50" cy="50" r="50" />
</svg>

<svg> の width 属性と height 属性は、HTML 要素内の SVG 画像が占める幅と高さを指定します。相対単位に加えて、絶対単位（単位：ピクセル）も使用できます。これら 2 つのプロパティを指定しない場合、SVG 画像のサイズはデフォルトで 300 ピクセル (幅) x 150 ピクセル (高さ) になります。

SVG 画像の一部だけを表示したい場合は、viewBox 属性を指定します。

<svg width="100" height="100" viewBox="50 50 50 50">
  <circle id="mycircle" cx="50" cy="50" r="50" />
</svg>

<viewBox> 属性の値には、左上隅の横座標と縦座標、ビューポートの幅と高さの 4 つの数値があります。上記のコードでは、SVG 画像は幅 100 ピクセル x 高さ 100 ピクセルで、viewBox 属性はビューポートが点 (50, 50) から開始することを指定します。実際に表示されるのは、右下隅の 4 分の 1 の円です。

ビューポートは、そのスペースに収まる必要があることに注意してください。上記のコードでは、ビューポートのサイズは 50 x 50 です。SVG 画像のサイズは 100 x 100 であるため、ビューポートは SVG 画像のサイズに合わせて拡大され、つまり 4 倍に拡大されます。

width 属性と height 属性を指定せず、viewBox 属性のみを指定した場合、SVG 画像のアスペクト比のみを指定することと同じになります。この場合、SVG 画像のサイズは、デフォルトでそれに含まれる HTML 要素のサイズになります。

`<circle>` タグ

<circle> タグは円を表します。

<svg width="300" height="180">
  <circle cx="30" cy="50" r="25" />
  <circle cx="90" cy="50" r="25" class="red" />
  <circle cx="150" cy="50" r="25" class="ファンシー" />
</svg>

上記のコードは 3 つの円を定義しています。 <circle> タグの cx、cy、および r 属性は、それぞれピクセル単位の横座標、縦座標、半径です。座標は、<svg> キャンバスの左上隅の原点を基準としています。

class 属性は、対応する CSS クラスを指定するために使用されます。

。赤 {
  塗りつぶし: 赤;
}

。ファンシー {
  塗りつぶし: なし。
  ストローク: 黒;
  ストローク幅: 3pt;
}

SVG の CSS プロパティは、Web 要素の CSS プロパティとは異なります。

塗りつぶし: 塗りつぶしの色

ストローク: ストロークの色

ストローク幅: 境界線の幅

`<line>` タグ

<line> タグは直線を描くために使用されます。

<svg width="300" height="180">
  <line x1="0" y1="0" x2="200" y2="0" style="ストローク:rgb(0,0,0);ストローク幅:5" />
</svg>

上記のコードでは、<line> タグの x1 属性と y1 属性は線分の始点の横座標と縦座標を表し、x2 属性と y2 属性は線分の始点の座標を表します。線分の終点の横座標と縦座標。style 属性は線分のスタイルを表します。

`<ポリライン>` タグ

<polyline> タグはポリラインを描画するために使用されます。

<svg width="300" height="180">
  <ポリラインポイント="3,3 30,28 3,53" fill="なし" ストローク="黒" />
</svg>

<polyline> の points 属性は、各端点の座標を指定します。横座標と縦座標はカンマで区切られ、点はスペースで区切られます。

`<rect>` タグ

<rect> タグは四角形を描画するために使用されます。

<svg width="300" height="180">
  <rect x="0" y="0" height="100" width="200" style="ストローク: #70d5dd; 塗りつぶし: #dd524b" />
</svg>

<rect> の x 属性と y 属性は、長方形の左上隅の端点の横座標と縦座標を指定します。 width 属性と height 属性は幅と高さを指定します (単位はピクセルです)。 ) 長方形の。

`<ellipse>` タグ

<ellipse> タグは、楕円を描画するために使用されます。

<svg width="300" height="180">
  <ellipse cx="60" cy="60" ry="40" rx="20" ストローク="ブラック" ストローク幅="5" フィル="シルバー"/>
</svg>

<ellipse> の cx 属性と cy 属性は、楕円の中心の横座標と縦座標 (単位ピクセル) を指定します。 rx 属性と ry 属性は、楕円の水平軸と垂直軸を指定します。楕円の半径(ピクセル単位)。

`<polygon>` タグ

<polygon> タグは多角形を描画するために使用されます。

<svg width="300" height="180">
  <polygon fill="green" ストローク="オレンジ" ストローク幅="1" ポイント="0,0 100,0 100,100 0,100 0,0"/>
</svg>

<polygon> の points 属性は、各端点の座標を指定します。横座標と縦座標はカンマで区切られ、点はスペースで区切られます。

`<パス>` タグ

<path> タグはパスを制御するために使用されます。

<svg width="300" height="180">
<パス d=
  M 18,3
  L 46,3
  L 46,40
  L 61,40
  L 32,68
  L 3,40
  L 18,40
  Z
"></パス>
</svg>

<path> の d 属性は、描画順序を表し、各文字は描画アクションを表し、その後に座標が続きます。

-M: に移動 (移動)

L: (lineto) まで直線を描きます

Z: 閉じたパス

`<text>` タグ

<text> タグはテキストを描画するために使用されます。

<svg width="300" height="180">
  <text x="50" y="25">Hello World</text>
</svg>

<text> の x 属性と y 属性は、テキストブロックのベースラインの開始点の横座標と縦座標を表します。テキストのスタイルは、class または style 属性を使用して指定できます。

`<use>` タグ

<use> タグは、形状をコピーするために使用されます。

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4"/>

  <use href="#myCircle" x="10" y="0" fill="blue" />
  <use href="#myCircle" x="20" y="0" fill="white" ストローク="blue" />
</svg>

<use> の href 属性はコピーするノードを指定し、x 属性と y 属性は <use> の左上隅の座標です。さらに、「幅」と「高さ」の座標を指定することもできます。

`<g>` タグ

<g> タグは、複数の図形を 1 つのグループにグループ化し、再利用しやすくするために使用されます。

<svg width="300" height="100">
  <g id="myCircle">
    <text x="25" y="20">丸い</text>
    <circle cx="50" cy="50" r="20"/>
  </g>

  <use href="#myCircle" x="100" y="0" fill="blue" />
  <use href="#myCircle" x="200" y="0" fill="white" ストローク="blue" />
</svg>

`<defs>` タグ

<defs> タグはカスタムシェイプに使用され、その内部のコードは表示されず、参照のみを目的としています。

<svg width="300" height="100">
  <定義>
    <g id="myCircle">
      <text x="25" y="20">丸い</text>
      <circle cx="50" cy="50" r="20"/>
    </g>
  </defs>

  <use href="#myCircle" x="0" y="0" />
  <use href="#myCircle" x="100" y="0" fill="blue" />
  <use href="#myCircle" x="200" y="0" fill="white" ストローク="blue" />
</svg>

`<パターン>` タグ

<pattern> タグは、領域をタイル化するために参照できる形状をカスタマイズするために使用されます。

<svg width="500" height="500">
  <定義>
    <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
      <circle fill="#bee9e8" cx="50" cy="50" r="35" />
    </パターン>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
</svg>

上記のコードでは、<pattern> タグで円を dots パターンとして定義しています。 patternUnits="userSpaceOnUse" は、<pattern> の幅と長さが実際のピクセル値であることを意味します。次に、このモードを下の四角形を塗りつぶすように割り当てます。

`<image>` タグ

<image> タグは画像ファイルを挿入するために使用されます。

<svg viewBox="0 0 100 100" width="100" height="100">
  <image xlink:href="path/to/image.jpg"
    width="50%" height="50%"/>
</svg>

上記のコードでは、<image> の xlink:href 属性が画像のソースを表します。

`<animate>` タグ

<animate> タグはアニメーション効果を生成するために使用されます。

<svg width="500px" height="500px">
  <rect x="0" y="0" width="100" height="100" fill="#feac5e">
    <animateattributeName="x" from="0" to="500" dur="2s"repeatCount="infinity" />
  </rect>
</svg>

上記のコードでは、四角形は動き続け、アニメーション効果を生成します。

<animate> の属性は以下の意味を持ちます。

-attributeName: アニメーション効果が発生する属性の名前。

from: 単一アニメーションの初期値。

to: 単一アニメーションの終了値。

dur: 1 つのアニメーションの長さ。 -repeatCount:アニメーションのループモード。

アニメーションは複数のプロパティで定義できます。

<animateattributeName="x" from="0" to="500" dur="2s"repeatCount="infinity" />
<animateattributeName="width" to="500" dur="2s"repeatCount="infinity" />

`<animateTransform>` タグ

<animate> タグは CSS の transform プロパティには影響しません。変換が必要な場合は、<animateTransform> タグを使用する必要があります。

<svg width="500px" height="500px">
  <rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
    <animateTransformattributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400"repeatCount="infinite" />
  </rect>
</svg>

上記のコードでは、<animateTransform> の効果は回転 (rotate) です。このとき、from と to の属性値には 3 つの数字があり、最初の数字は角度の値です。 2番目の値と3番目の値は回転の中心の座標です。 from="0 200 200" は、最初は角度が 0 であり、回転が (200, 200) から始まることを意味します。 to="360 400 400"` は、最後に角度が 0 であることを意味します。 360、「(400, 400)」回転あたり。

JavaScript 操作

DOM 操作

SVG コードが HTML Web ページに直接記述されている場合、SVG コードは Web ページの DOM の一部となり、DOM を使用して直接操作できます。

<svg
  id="mysvg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 800 600"
  prepareAspectRatio="xMidYMid ミート"
>
  <circle id="mycircle" cx="400" cy="300" r="50" />
<svg>

上記のコードを Web ページに挿入した後、CSS を使用してスタイルをカスタマイズできます。

丸 {
  ストローク幅: 5;
  ストローク: #f00;
  塗りつぶし: #ff0;
}

サークル:ホバー {
  ストローク: #090;
  塗りつぶし: #fff;
}

SVG は JavaScript コードで操作できます。

var mycircle = document.getElementById('mycircle');

mycircle.addEventListener('click', function(e) {
  console.log('円をクリック - 拡大中');
  mycircle.setAttribute('r', 60);
}、 間違い）;

上記のコードは、グラフィックをクリックすると、circle 要素の r 属性がオーバーライドされることを指定しています。

SVG DOM を取得する

SVG DOM は、<object>、<iframe>、および <embed> タグを使用して SVG ファイルを挿入することで取得できます。

var svgObject = document.getElementById('object').contentDocument;
var svgIframe = document.getElementById('iframe').contentDocument;
var svgEmbed = document.getElementById('embed').getSVGDocument();

<img> タグを使用して SVG ファイルを挿入した場合、SVG DOM を取得できないことに注意してください。

SVG ソースコードを読む

SVG ファイルは XML テキストであるため、XML コードを読み取ることで SVG のソースコードを読み取ることができます。

<div id="svg-コンテナ">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xml:space="保持" width="500" height="440"
  >
    <!-- SVG コード -->
  </svg>
</div>

XMLSerializer インスタンスの serializeToString() メソッドを使用して、SVG 要素のコードを取得します。

var svgString = 新しい XMLSerializer()
  .serializeToString(document.querySelector('svg'));

SVG画像をCanvas画像に変換する

まず、新しい Image オブジェクトを作成し、SVG 画像を Image オブジェクトの src 属性に割り当てる必要があります。

var img = 新しい画像();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});

var DOMURL = self.URL || self.webkitURL ||
var url = DOMURL.createObjectURL(svg);

img.src = URL;

次に、画像が読み込まれたら、それを <canvas> 要素に描画します。

img.onload = 関数 () {
  var Canvas = document.getElementById('canvas');
  var ctx = Canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
};

例: 折れ線グラフ

次に、データテーブルを折れ線グラフに描画します。

日付|金額
-----|------
2014-01-01 | $10
2014-02-01 | $20
2014-03-01 | $40
2014-04-01 | $80

上のグラフは、「日付」を横軸、「金額」を縦軸とし、4 行のデータを 1 つのデータ点とする座標系として描くことができます。

<svg width="350" height="160">
  <g class="layer"transform="translate(60,10)">
    <circle r="2" cx="0" cy="105" />
    <circle r="2" cx="90" cy="90" />
    <circle r="2" cx="180" cy="60" />
    <circle r="2" cx="270" cy="0" />

    <ポリラインポイント="0,105 90,90 180,60 270,0" 塗りつぶし="なし" ストローク="赤" />

    <g class="y 軸">
      <line x1="0" y1="0" x2="0" y2="120" style="ストローク:黒;ストローク幅:1" />
      <text x="-40" y="115" dy="5">$10</text>
      <text x="-40" y="5" dy="5">$80</text>
    </g>
    <g class="x 軸" 変換="translate(0, 120)">
      <line x1="0" y1="0" x2="270" y2="0" style="ストローク:黒;ストローク幅:1" />
      <text x="-10" y="20">1 月</text>
      <text x="255" y="20">4 月</text>
    </g>
  </g>
</svg>

参考リンク

Jon McPartland、SVG アニメーションの概要
Alexander Goedde、SVG - スーパーベクターグラフィックス
Joseph Wegner、SVG の学習
biovisualize、SVG から Canvas への直接変換
Tyler Sticka、SVG を使用した画像サムネイルのトリミング
Adi Purdila、SVG アニメーションを使用してローダーアイコンを作成する方法 )

SVG 画像

概要

文法

<svg> タグ

<circle> タグ

<line> タグ

<ポリライン> タグ

<rect> タグ

<ellipse> タグ

<polygon> タグ

<パス> タグ

<text> タグ

<use> タグ

<g> タグ

<defs> タグ

<パターン> タグ

<image> タグ

<animate> タグ

<animateTransform> タグ