SVGの使い方

2023-07-31 13:24:54

Nacosの紹介 BERTとは何ですか?

目次

  1. SVGとは何ですか?
  2. SVG の利点
  3. SVGとCanvasの違い
  4. SVGを使用して基本的なグラフィックを描画する
    1. 長方形を描
    2. 円を描
    3. 楕円を描く
    4. 直線を引
  5. SVGシャドウ
    1. defs
    2. filter
    3. feOffset と feBlend
    4. feGaussianBlur
    5. feColorMatrix
  6. SVGグラデーション
    1. SVG 線形グラデーション: <linearGradient>
    2. SVG 放射状グラデーション: <radialGradient>
  7. SVGアニメーション
    1. SVGアニメーションの共通プロパティ
    2. animate
    3. animateTransform
    4. animate

SVG の英語の正式名称は Scalable Vector Graphics で、スケーラブルなベクター グラフィックスを意味します。

HTML5 はインライン SVG をサポートします。

HTML<svg>要素は、SVG グラフィックのコンテナーです。

SVG には、パス、ボックス、円、テキスト、グラフィック イメージを描画する複数の方法があります。

SVGとは何ですか?

  • SVG は、スケーラブル ベクター グラフィックス (Scalable Vector Graphics) を意味します。

  • SVG は、Web 用のベクターベースのグラフィックスを定義するために使用されます。

  • SVG は XML 形式を使用してグラフィックを定義します。

  • SVG 画像は、拡大またはサイズ変更してもグラフィック品質が失われません。

  • SVG は World Wide Web コンソーシアムの標準です。

SVG の利点

  • JPEG や GIF などの他の画像形式と比べて SVG を使用する利点は次のとおりです。

  • SVG 画像はテキスト エディタで作成および変更できます。

  • SVG 画像は検索、インデックス付け、スクリプト化、または圧縮が可能です。

  • SVG はスケーラブルです。

  • SVG 画像は、どの解像度でも高品質で印刷できます。

  • SVG は画質を損なうことなく拡大できます。

SVGとCanvasの違い

SVG は、XML を使用して 2D グラフィックスを記述するための言語です。

Canvas は JavaScript を通じて 2D グラフィックを描画します。

SVG は XML に基づいています。つまり、SVG DOM のすべての要素が利用可能です。JavaScript イベント ハンドラーを要素にアタッチできます。

SVG では、描画された各形状はオブジェクトとみなされます。SVG オブジェクトのプロパティが変更された場合、ブラウザーはグラフィックを自動的に再現できます。

Canvas はピクセルごとにレンダリングされます。Canvas では、シェイプが一度描画されると、ブラウザーの注意を引き続けることはありません。位置が変更された場合は、グラフィックスで覆われているオブジェクトも含めて、シーン全体を再描画する必要があります。

Canvas と SVG の比較:

Canvas SVG
解像度に依存する; イベント ハンドラーのサポートなし; テキスト レンダリング機能が不十分; 結果のイメージを .png または .jpg 形式で保存する機能; 多くのオブジェクトが頻繁に再描画されるグラフィックスを多用するゲームに最適です。 解像度に依存しません。イベント ハンドラーをサポートします。レンダリング領域が大きいアプリ (Google マップなど) に最適です。複雑度が高いとレンダリングが遅くなります (DOM を過度に使用するアプリは高速ではありません)。ゲーム アプリには適していません。

SVGを使用して基本的なグラフィックを描画する

長方形を描く

rect タグを使用すると、主な属性は次のようになります。

  • x/y: 描画位置、

  • width/height: 長方形の長さと幅、

  • fill: 塗りつぶしの色、デフォルトは黒、

  • stroke: ストロークの色。

  • stroke-width: ストロークの幅。

  • rx/ry: ストロークの角を丸くします。

次のように描かれた角丸長方形:

 

サンプルコード:

<svg width="500" height="500">
	<rect x="100" y="100" width="150" height="100" fill="red" stroke="green" stroke-width="2" rx="10"></rect>
</svg>

 

円を描く

方法 1: 長方形を使用して描画します。

サンプルコード:

<svg width="500" height="500">
	  	  <rect x="100" y="10" width="100" height="100" rx="50"></rect>
</svg>

方法 2: 特別なラベルを使用して描画します。主な属性は次のとおりです。

  • cx/cy: 円を描く位置、円の中心の位置。

  • r: 円の半径。

次のように描かれた円:

サンプルコード:

<svg width="500" height="500">
     <circle cx="150" cy="200" r="50"></circle>
</svg>

 

楕円を描く

方法 1: 長方形を使用して描画します。

サンプルコード:

<svg width="500" height="500">
   <rect x="100" y="300" width="100" height="50" rx="50" ry="25"></rect>
</svg>

方法 2: 特別なラベルを使用して描画します。主な属性は次のとおりです。

  • cx/cy: 楕円を描く位置、円の中心の位置。

  • rx/ry: 楕円の半径。

楕円は次のように描画されます。

<svg width="500" height="500">
   <ellipse cx="150" cy="400" rx="50" ry="25"></ellipse>
</svg>

 

直線を引く

  • x1/y1: 開始点

  • x2/y2: 終点

  • stroke: 線の色、必須

直線効果は次のとおりです。

サンプルコード:

<svg width="500" height="500">
    <line x1="100" y1="100" x2="200" y2="100" stroke="red"></line>
</svg>

 

ポリラインを描く

  • points: すべてのポリラインの点を設定します。

  • fill: 塗りつぶすかどうか、デフォルトの塗りつぶし。

ポリライン効果は次のとおりです。

 サンプルコード:

<svg width="500" height="500">
	<polyline points="100 150 300 150 300 200" stroke="red" fill="none"></polyline>
</svg>

多角形を描く

方法 1: ポリラインは始点から終点まで戻ります。これは多角形です。

 サンプルコード:

<svg width="500" height="500">
	<polyline points="100 300 300 300 300 350 100 300" stroke="red" fill="none"></polyline>
</svg>

方法 2: パスを閉じます。

polygon は polyline に似ていますが、パスを自動的に閉じる点が異なります。

サンプルコード:

<svg width="500" height="500">
	<polygon points="100 400 300 400 300 450" stroke="red" fill="none"></polygon>
</svg>

SVGシャドウ

defs

SVG を使用すると、後で再利用する必要があるグラフィック要素を定義できます。再度使用する必要があるすべての参照要素を <defs> 要素で定義することをお勧めします。これにより、SVG コンテンツの読みやすさとアクセシビリティが向上します。<defs> 要素内で定義されたグラフィック要素は直接レンダリングされません。これらの要素は、<use> 要素を使用してビュー内のどこにでもレンダリングできます。

サンプルコード:

<svg width="80px" height="30px" viewBox="0 0 80 30" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="60" height="10" fill="url(#Gradient01)"  />
</svg>

filter

<filter> 要素は、アトミックなフィルター操作のコンテナとして機能します。直接レンダリングすることはできません。filterフィルターは、ターゲット SVG 要素の属性を使用して参照できます。

サンプルコード:

<svg width="500" height="100">
	<defs>
		<filter id="blurFilter" y="-5" height="40">
			<feGaussianBlur in="SourceGraphic" stdDeviation="3"></feGaussianBlur>
		</filter>
	</defs>
	<ellipse cx="155" cy="60" rx="25" ry="15" stroke="none" fill="blue" filter="url(#blurFilter)"></ellipse>
</svg>

feOffset と feBlend

<feOffset> は入力画像を全体として受け取り、属性 dx と属性 dy の値を通じてオフセットを指定します。

<feBlend> フィルターは 2 つのオブジェクトを結合し、特定のブレンド モードに従います。画像編集ソフトウェアで 2 つのレイヤーをブレンドするのと似ています。

<feOffset> と <feBlend> を組み合わせてグラフィックスの影効果を作成します。

例 1: 長方形をオフセットします。

 サンプルコードは次のとおりです。

<svg>
	<defs>
		<filter id="filter-offset" x="0" y="0" width="200%" height="200%">
			<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
			<feBlend in="SourceGraphic" in2="offOut" mode="normal"></feBlend>
		</filter>
	</defs>
	<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#filter-offset)"></rect>
</svg>

feGaussianBlur

<feGaussianBlur> フィルターは、入力イメージに対してガウスぼかしを実行し、属性 stdDeviation によってオフセットされるピクセル数を指定できます。

例 2: オフセット画像がぼやける場合があります。

 サンプルコードは次のとおりです。

<svg>
	<defs>
		<filter id="filter-blur" x="0" y="0" width="200%" height="200%">
			<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
			<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"></feGaussianBlur>
			<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
		</filter>
	</defs>
	<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#filter-blur)"></rect>
</svg>

feColorMatrix

<feColorMatrix> フィルターは、変換行列に基づいて色を変換します。各ピクセルのカラー値 ([赤、緑、青、不透明度] で表されるベクトル) を行列乗算して新しい色を計算します。

例 3: 影に色のレイヤーを適用します。

 サンプルコード:

<svg>
	<defs>
		<filter id="filter-matrix" x="0" y="0" width="200%" height="200%">
			<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
			<feColorMatrix result="matrixOut" in="offOut" type="matrix" 
				values="0.2 0 0 0 0
						0 0.2 0 0 0
						0 0	0.2 0 0
						0 0 0 1 0" />
			<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10"></feGaussianBlur>
			<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
		</filter>
	</defs>
	<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#filter-matrix)"></rect>
</svg>

feColorについて

SVGグラデーション

グラデーションとは、ある色から別の色への滑らかな移行です。さらに、複数の色の遷移を同じ要素に適用できます。

SVG グラデーションには主に 2 つのタイプがあります。

  • リニア: リニア。

  • ラジアル: ラジアル。

SVG 線形グラデーション: <linearGradient>

<linearGradient>要素は、グラフィック要素の塗りつぶしまたはストロークの線形グラデーションを定義するために使用されます。

パラメータの説明:

パラメータ 説明する
x1 グラデーションが開始する x 軸の位置。
x2 グラデーションが終了する x 軸の位置。
y1 グラデーションが開始する y 位置。
y2 グラデーションが終了する y 位置。

線形グラデーションは、水平、垂直、または放射状のグラデーションとして定義できます。

  • y1 と y2 が等しく、x1 と x2 が異なる場合、水平グラデーションが作成されます。

  • x1 と x2 が等しく、y1 と y2 が異なる場合、垂直グラデーションが作成されます。

  • 放射状グラデーションは、x1 と x2 が異なり、y1 と y2 が異なる場合に作成されます。

<stop>要素で定義される、グラデーション上のカラー グラデーション。

パラメータの説明:

パラメータ 説明する
offset グラデーションが開始/終了する場所を定義します。
stop - color グラデーションの開始/終了時に使用される色を定義します。
stop - opacity グラデーションの開始/終了時の指定色の不透明度を定義します。

例 1: 黄色から赤への水平線形グラデーションを持つ楕円を定義します。

マトリックスとカラー値のマトリックス乗算の詳細については、コース資料を参照してください。

 サンプルコード:

<svg>
	<defs>
		<linearGradient id="line-hor" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="0%" stop-color="yellow" stop-opacity="1" />
			<stop offset="100%" stop-color="red" stop-opacity="1" />
		</linearGradient>
	</defs>
	<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#line-hor)"></ellipse>
</svg>

例 2: 黄色から赤への垂直線形グラデーションを持つ楕円を定義します。

サンプルコード:

<svg>
	<defs>
		<linearGradient id="line-ver" x1="0%" y1="0%" x2="0%" y2="100%">
			<stop offset="0%" stop-color="yellow" stop-opacity="1" />
			<stop offset="100%" stop-color="red" stop-opacity="1" />
		</linearGradient>
	</defs>
	<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#line-ver)"></ellipse>
</svg>

 例 3: 黄色から赤への水平線形グラデーションで楕円を定義し、楕円の内側にテキストを追加します。

 サンプルコード:

<svg>
	<defs>
		<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="0%" stop-color="yellow" stop-opacity="1" />
			<stop offset="100%" stop-color="red" stop-opacity="1" />
		</linearGradient>
	</defs>
	<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"></ellipse>
	<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">SVG</text>
</svg>

SVG 放射状グラデーション: <radialGradient>

<radialGradient> 要素は、グラフィック要素を塗りつぶすかストロークするための放射状グラデーションを定義するために使用されます。

パラメータの説明:

パラメータ 説明する
cx 中心点の x 座標を定義します。
cy 中心点の y 座標を定義します。
r 円の半径を定義します。
fx 放射状グラデーションの焦点の x 座標を定義します。このプロパティが定義されていない場合は、中心点と同じ位置であるとみなされます。
fy 放射状グラデーションの焦点の y 座標を定義します。このプロパティが定義されていない場合は、中心点と同じ位置であるとみなされます。
fr 放射状グラデーションの焦点の半径を定義します。このプロパティが定義されていない場合、デフォルト値は 0% です。

例 4: 白から青の楕円への放射状グラデーションを定義します。

 サンプルコード:

<svg>
	<defs>
		<radialGradient id="radial" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
			<stop offset="0%" stop-color="white" stop-opacity="0" />
			<stop offset="100%" stop-color="blue" stop-opacity="1" />
		</radialGradient>
	</defs>
	<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#radial)"></ellipse>
</svg>

SVGアニメーション

SVG では、次の 3 つの一般的なアニメーション タグが提供されます。

マーク 説明する
<animate> アニメーション要素はシェイプ要素内に配置され、要素の特定のプロパティがある時点でどのように変化するかを定義するために使用されます。プロパティは、指定された期間、開始値から終了値まで変化します。
<animateTransform> ターゲット要素の変換プロパティを変更し、アニメーションで移動、スケーリング、回転、または傾斜を制御できるようにします。
<animateMotion> 要素がモーション パスに沿ってどのように移動するかを定義します。

SVG アニメーションの使用方法:

  1. アニメーションを作成するには、どの要素をアニメーション化する必要があるかをアニメーション マーカーに指示します。

  2. どのようなアニメーションを実行する必要があるかを記述する要素を作成します。

例 1: 半径が 50% から 100% まで変化する円。

方法 1:

<svg width="500" height="500">
	<circle id="myCircle" cx="100" cy="100" r="50" fill="blue"></circle>
	<animate attributeName="r" from="50" to="100" dur="3s" fill="freeze" xlink:href="#myCircle"></animate>
</svg>

 方法 2:

<svg width="500" height="500">
	<circle cx="100" cy="100" r="50" fill="blue">
		<animate attributeName="r" from="50" to="100" dur="3s" fill="freeze"></animate>
	</circle>
</svg>

SVGアニメーションの共通プロパティ

属性 効果 価値
attributeName アニメーション アクション リンクで変更する必要がある親要素の属性名を識別します。  
from svg アニメーション中に変更される属性の初期値。  
to svg アニメーション中に変更された属性の最終値。  
dur アニメーションの単純な継続時間を識別します。  
fill アニメーション終了後にアニメーションを保持するかどうか。 remove: アニメーション効果は、アニメーションのアクティブ期間が終了すると削除されます。これはデフォルト値です。freeze: アニメーションのアクティブ期間が終了すると、ドキュメントの期間が終了するかアニメーションが再開されるまで、アニメーション効果は「フリーズ」します。
repeatCount アニメーションが繰り返される回数。  
repeatDur アニメーションが繰り返される合計時間。  
begin アニメーションをいつ開始するかを指定します。 1s: アニメーションは 1s 後に始まります。click: click はイベントをトリガーして実行し、アニメーションを実行します。click + 2s: click トリガー イベントが実行された後、アニメーションを実行する前に 2 秒待機します。
restart 要素のアニメーションの開始後にアニメーションを再開できるかどうかを指定します。 always: アニメーションはいつでもリセットできます。これはデフォルト値です。whenNotActive: アニメーションがアクティブになっていない場合にのみリセットできます。たとえば、アニメーションが終了した後にのみ実行できます。never: 要素のアニメーションは、SVG の実行全体にわたってリセットできません。
calcMode 各アニメーション クリップのアニメーション動作を指定します。 linear: 均一なアニメーション。デフォルト値です。discrete: 非連続アニメーション。アニメーション効果は即座に完了しません。paced: アニメーション効果全体が常に同じ速度で実行されることを指定します。keyTimes 属性の設定は無効です。spline: keySplines 属性を使用して、各アニメーション トランジション効果を定義し、アニメーションをカスタマイズします。
keyTimes アニメーションの時間セグメントを分割します。 0～1。
values 値セグメントに対応する値を除算します。

animate

<animate> を使用してクリックを実現し、無限往復効果をトリガーします。

 

 サンプルコード:

<svg width="500" height="500">
	<circle cx="100" cy="100" r="50" fill="blue">
		<animate id="toRight" 
				attributeName="cx" 
				from="100" 
				to="300" 
				dur="1s" 
				begin="click;toLeft.end" />
		<animate id="toLeft" 
				attributeName="cx" 
				from="300" 
				to="100" 
				dur="1s" 
				begin="toRight.end" />
	</circle>
</svg>

animateTransform

<animateTransform> を使用して、クリックでトリガーされる水平移動効果を実現します。

サンプルコード:

<svg width="500" height="500">
	<circle cx="100" cy="100" r="50" fill="blue">
		<animateTransform 
				attributeName="transform" 
				type="translate" 
				from="0 0" 
				to="200 0" 
				dur="2s" 
				begin="click" 
				fill="freeze" />
	</circle>
</svg>

 

<animateTransform> を使用して、クリックでトリガーされるグラフィック回転効果を実現します。

 サンプルコード:

<svg width="500" height="500">
  <rect x="100" y="100" width="200" height="100" fill="blue">
    <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 100 100"
        to="45 100 100"
        dur="1s"
        begin="click"
        fill="freeze" />
  </rect>
</svg>

animateTransform

<animateMotion> を使用して、クリックすると四角形がパスに沿って移動するという効果を実現します。

 サンプルコード:

<svg width="500" height="500" viewBox="-100 -100 500 500">
	<path 
			d="M0 0 C0 300 300 300 300 0" 
			stroke="red" 
			stroke-width="2" 
			fill="none" />
	<rect x="0" y="0" width="40" height="40" fill="lightgreen">
		<animateMotion 
				path="M0 0 C0 300 300 300 300 0" 
				dur="3s" 
				begin="click" 
				fill="freeze" 
				rotate="auto" />
	</rect>
</svg>

path 要素は、形状を定義するために使用される汎用要素です。すべての基本的な形状は、<path> 要素を使用して作成できます。

M0 00 0移動先の座標位置を指し、M は「Move to」を意味します。

C0 300 300 300 300 0ベジェ曲線を指し、0 300始点の座標、300 300中点の座標、300 0終点の座標を指します。

Nacosの紹介 BERTとは何ですか?