SVG-概要

SVGとは何ですか？

SVG、スケーラブルベクターグラフィックスは、ベクターベースのグラフィックスを定義するXMLベースの言語です。
SVGは、Web上で画像を表示することを目的としています。
ベクトル画像であるため、SVG画像はズームアウトやサイズ変更の方法に関係なく品質を失うことはありません。
SVG画像は、インタラクティブ機能とアニメーションをサポートしています。
SVGはW3C標準です。
ラスター画像のような他の画像形式もSVG画像でクラブすることができます。
SVGはHTMLのXSLTおよびDOMとうまく統合します。

利点

任意のテキストエディタを使用して、SVG画像を作成および編集します。
XMLベースであるため、SVG画像は検索可能、インデックス可能、スクリプト化および圧縮可能です。
SVG画像は非常にスケーラブルです。縮小やサイズ変更の方法に関係なく品質を失うことはありません
どの解像度でも良好な印刷品質
SVGはオープンスタンダードです

デメリット

テキスト形式のサイズは、バイナリ形式のラスターイメージに比べて大きくなります。
小さい画像でもサイズは大きくなります。

例

次のXMLスニペットを使用して、Webブラウザーで円を描くことができます。

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green"/>
</svg>

SVG XMLをHTMLページに直接埋め込みます。

テストVG

<html>
   <title>SVG Image</title>
   <body>

      <h1>Sample SVG Image</h1>

      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green"/>
      </svg>

   </body>
</html>

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorerでは、SVG画像を表示するにはactiveXコントロールが必要です。

SVGとHTMLの統合方法

<svg>要素は、SVG画像の開始を示します。
<svg>要素のwidth属性とheight属性は、SVG画像の高さと幅を定義します。
上記の例では、<circle>要素を使用して円を描きました。
cxおよびcy属性は、円の中心を表します。デフォルト値は（0,0）です。 r属性は円の半径を表します。
その他の属性strokeおよびstroke-widthは、円の輪郭を制御します。
fill属性は、円の塗りつぶし色を定義します。
終了タグ</svg>は、SVG画像の終わりを示します。

SVG-シェイプ

SVGは、画像の描画に使用できる多くの形状を提供します。一般的な形状は次のとおりです。

Sr.No.	Shape Type & Description
1	rect 長方形を描くために使用されます。
2	circle 円を描くために使用されます。
3	ellipse 楕円を描くために使用されます。
4	line 線を引くために使用されます。
5	polygon 接続された直線で構成される閉じた図形を描画するために使用されます。
6	polyline 接続された直線で構成される開いた形状を描くために使用されます。
7	path パスの描画に使用されます。

SVG-テキスト

<text>要素は、テキストの描画に使用されます。

宣言

以下は、 <text> 要素の構文宣言です。主な属性のみを示しました。

<text
  x="x-cordinates"
  y="y-cordinates"

  dx="list of lengths"
  dy="list of lengths"

  rotate="list of numbers"
  textlength="length"
  lengthAdjust="spacing" >
</text>

属性

Sr.No.	Attribute & Description
1	x − x axis coordinates of glyphs.
2	y − y axis coordinates of glyphs.
3	dx − shift along with x-axis.
4	dy − shift along with y-axis.
5	rotate − rotation applied to all glyphs.
6	textlength − rendering length of the text.
7	lengthAdjust − type of adjustment with the rendered length of the text.

例

テストVG

<html>
   <title>SVG Text</title>
   <body>

      <h1>Sample SVG Text</h1>

      <svg width="800" height="800">
         <g>
            <text x="30" y="12" >Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.finddevguides.COM</text>
         </g>
      </svg>

   </body>
</html>

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

回転するテキスト

<html>
   <title>SVG Text</title>
   <body>

      <h1>Sample SVG Text</h1>

      <svg width="800" height="800">
         <g>
            <text x="30" y="12" >Multiline Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.finddevguides.COM
            <tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
            <tspan x="30" y="70">We teach just for free.</tspan>
            </text>
         </g>
      </svg>

   </body>
</html>

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

複数行テキスト

<html>
   <title>SVG Text</title>
   <body>

      <h1>Sample SVG Text</h1>

      <svg width="570" height="100">
         <g>
            <text x="30" y="12" >Multiline Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.finddevguides.COM
               <tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
               <tspan x="30" y="70">We teach just for free.</tspan>
            </text>
         </g>
      </svg>

   </body>
</html>

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

ハイパーリンクテキスト

<html>
   <title>SVG Text</title>
   <body>

      <h1>Sample SVG Text</h1>

      <svg width="800" height="800">
         <g>
            <text x="30" y="10" >Text as Link: </text>

            <a xlink:href="http://www.finddevguides.com/svg/" target="_blank">
               <text font-family="Verdana" font-size="20"  x="30" y="30"
               fill="rgb(121,0,121)">WWW.finddevguides.COM</text>
            </a>
         </g>
      </svg>

   </body>
</html>

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

SVG-ストローク

SVGは複数のストロークプロパティをサポートしています。

以下は、使用される主なストロークプロパティです。

Sr.No.	Stroke Type & Description
1	stroke − defines color of text, line or outline of any element.
2	stroke-width − defines thickness of text, line or outline of any element.
3	stroke-linecap − defines different types of ending of a line or outline of any path.
4	stroke-dasharray − used to create dashed lines.

例

テストVG

<html>
   <title>SVG Stroke</title>
   <body>

      <h1>Sample SVG Stroke</h1>

      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke: </text>
            <path stroke="red" d="M 50 50 L 300 50"/>
            <path stroke="green" d="M 50 70 L 300 70"/>
            <path stroke="blue" d="M 50 90 L 300 90"/>
         </g>
      </svg>

   </body>
</html>

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

ストローク幅

<html>
   <title>SVG Stroke</title>
   <body>

      <h1>Sample SVG Stroke</h1>

      <svg width="800" height="800">
         <text x="30" y="10" >Using stroke-width: </text>
         <path stroke-width="2" stroke="black" d="M 50 50 L 300 50"/>
         <path stroke-width="4" stroke="black" d="M 50 70 L 300 70"/>
         <path stroke-width="6" stroke="black" d="M 50 90 L 300 90"/>
      </svg>

   </body>
</html>

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

ストロークラインキャップ

<html>
   <title>SVG Stroke</title>
   <body>

      <h1>Sample SVG Stroke</h1>

      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke-linecap: </text>

            <path stroke-linecap="butt" stroke-width="6"
            stroke="black" d="M 50 50 L 300 50"/>

            <path stroke-linecap="round" stroke-width="6"
            stroke="black" d="M 50 70 L 300 70"/>

            <path stroke-linecap="square" stroke-width="6"
            stroke="black" d="M 50 90 L 300 90"/>
         </g>
      </svg>

   </body>
</html>

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

ストロークダッシュアレイ

<html>
   <title>SVG Stroke</title>
   <body>

      <h1>Sample SVG Stroke</h1>

      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke-dasharray: </text>

            <path stroke-dasharray="5,5" stroke-width="6"
            stroke="black" d="M 50 50 L 300 50"/>

            <path stroke-dasharray="10,10" stroke-width="6"
            stroke="black" d="M 50 70 L 300 70"/>

            <path stroke-dasharray="20,10,5,5,5,10" stroke-width="6"
            stroke="black" d="M 50 90 L 300 90"/>
         </g>
      </svg>

   </body>
</html>

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

SVG-フィルター

SVGは<filter>要素を使用してフィルターを定義します。 <filter>要素はid属性を使用して一意に識別します。フィルターは<def>要素内で定義され、IDによりグラフィック要素によって参照されます。

SVGは豊富なフィルターセットを提供します。以下は、一般的に使用されるフィルターのリストです。

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
形態学
feOffset-ドロップシャドウのフィルター
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

宣言

以下は、 <filter> 要素の構文宣言です。主な属性のみを示しました。

<filter
   filterUnits="units to define filter effect region"
   primitiveUnits="units to define primitive filter subregion"

   x="x-axis co-ordinate"
   y="y-axis co-ordinate"

   width="length"
   height="length"

   filterRes="numbers for filter region"
   xlink:href="reference to another filter" >
</filter>

属性

Sr.No.	Name & Description
1	filterUnits − units to define filter effect region. It specifies the coordinate system for the various length values within the filter and for the attributes defining the filter subregion. If filterUnits="userSpaceOnUse", values represent values in the current user coordinate system in place at the time when the 'filter' element is used. If filterUnits="objectBoundingBox", values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the 'filter' element is used. Default is userSpaceOnUse.
2	primitiveUnits − units to define filter effect region. It specifies the coordinate system for the various length values within the filter and for the attributes defining the filter subregion. If filterUnits="userSpaceOnUse", values represent values in the current user coordinate system in place at the time when the 'filter' element is used. If filterUnits="objectBoundingBox", values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the 'filter' element is used. Default is userSpaceOnUse.
3	x − x-axis co-ordinate of the filter bounding box. Defeault is 0.
4	y − y-axis co-ordinate of the filter bounding box. Default is 0.
5	width − width of the filter bounding box. Default is 0.
6	height − height of the filter bounding box. Default is 0.
7	filterRes − numbers representing filter regions.
8	xlink:href − used to refer to another filter.

例

テストVG

<html>
   <title>SVG Filter</title>
   <body>

      <h1>Sample SVG Filter</h1>

      <svg width="800" height="800">

         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8"/>
            </filter>

            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20"/>
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"/>
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
            </filter>
         </defs>

         <g>
            <text x="30" y="50" >Using Filters (Blur Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter1)"/>
         </g>

      </svg>

   </body>
</html>

filter1およびfilter2として定義された2つの<filter>要素。
feGaussianBlurフィルター効果は、stdDeviationを使用して、ぼかし効果でぼかしの量を定義します。
in = "SourceGraphic"は、効果が要素全体に適用可能であることを定義します。
feOffsetフィルター効果は、シャドウ効果を作成するために使用されます。 in = "SourceAlpha"は、効果がRGBAグラフィックのアルファ部分に適用可能であることを定義します。
<rect>要素は、フィルター属性を使用してフィルターをリンクしました。

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

影付きフィルター

<html>
   <title>SVG Filter</title>
   <body>

      <h1>Sample SVG Filter</h1>

      <svg width="800" height="800">

         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8"/>
            </filter>

            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20"/>
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"/>
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
            </filter>
         </defs>

         <g>
            <text x="30" y="50" >Using Filters (Shadow Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter2)"/>
         </g>

      </svg>

   </body>
</html>

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

SVG-パターン

SVGは<pattern>要素を使用してパターンを定義します。パターンは<pattern>要素を使用して定義され、グラフィック要素をタイル状に塗りつぶすために使用されます。

宣言

以下は、 <pattern> 要素の構文宣言です。主な属性のみを示しました。

<pattern
   patternUnits="units to define x,y, width and height attributes."
   patternContentUnits ="units to define co-ordinate system of contents of pattern"
   patternTransform = "definition of an additional transformation from the pattern coordinate system onto the target coordinate system"

   x="x-axis co-ordinate"
   y="y-axis co-ordinate"

   width="length"
   height="length"

   preserveAspectRatio="to preserve width/height ratio of original content"
   xlink:href="reference to another pattern" >
</pattern>

属性

Sr.No.	Name & Description
1	patternUnits − units to define patterns effect region. It specifies the coordinate system for the various length values within the pattern and for the attributes defining the pattern subregion. If patternUnits="userSpaceOnUse", values represent values in the current user coordinate system in place at the time when the 'pattern' element is used. If patternUnits="objectBoundingBox", values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the 'pattern' element is used. Default is userSpaceOnUse.
2	patternContentUnits − units to define pattern content region. It specifies the coordinate system for the various length values within the pattern and for the attributes defining the pattern subregion. If patternContentUnits="userSpaceOnUse", values represent values in the current user coordinate system in place at the time when the 'pattern' element is used. If patternContentUnits="objectBoundingBox", values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the 'pattern' element is used. Default is userSpaceOnUse.
3	x − x-axis co-ordinate of the pattern bounding box. Defeault is 0.
4	y − y-axis co-ordinate of the pattern bounding box. Default is 0.
5	width − width of the pattern bounding box. Default is 0.
6	height − height of the pattern bounding box. Default is 0.
7	preserveAspectRatio - to preserve width/height ratio of original content.
8	xlink:href − used to refer to another pattern.

例

テストVG

<html>
   <title>SVG Pattern</title>
   <body>
      <h1>Sample SVG Pattern</h1>

      <svg width="800" height="800">

         <defs>
            <pattern id="pattern1" patternUnits="userSpaceOnUse"
               x="0" y="0" width="100" height="100"
               viewBox="0 0 4 4" >
               <path d="M 0 0 L 3 0 L 1.5 3 z" fill="blue" stroke="green"/>
            </pattern>
         </defs>

         <g>
            <text x="30" y="50" >Using Pattern (Triangles): </text>
            <rect x="100" y="100" width="300" height="300" stroke="green"
            stroke-width="3" fill="url(#pattern1)"/>
         </g>

      </svg>

   </body>
</html>

pattern1として定義された1つの<pattern>要素。
パターンでは、ビューボックスが定義され、パターンとして使用されるパスが定義されます。
rect要素では、fill属性で、パターンのURLを指定して、以前に作成したパターンで四角形を塗りつぶします。

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

SVG-グラデーション

グラデーションとは、シェイプ内のある色から別の色へのスムーズな移行を指します。 SVGは2種類のグラデーションを提供します。

線形グラデーション-ある方向から別の方向へのある色から別の色への線形遷移を表します。
放射状グラデーション-ある方向から別の方向へのある色から別の色への円形の遷移を表します。

線形勾配

宣言

以下は、 <linearGradient> 要素の構文宣言です。主な属性のみを示しました。

<linearGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"

   x1="x-axis co-ordinate"
   y1="y-axis co-ordinate"
   x2="x-axis co-ordinate"
   y2="y-axis co-ordinate"

   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</linearGradient>

属性

Sr.No.	Name & Description
1	gradientUnits − units to define the coordinate system for the various length values within the gradient. If gradientUnits="userSpaceOnUse", values represent values in the current user coordinate system in place at the time when the gradient element is used. If patternContentUnits="objectBoundingBox", values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the gradient element is used. Default is userSpaceOnUse.
2	x1 − x-axis co-ordinate of the gradient vector. Defeault is 0.
3	y1 − y-axis co-ordinate of the gradient vector. Default is 0.
4	x2 − x-axis co-ordinate of the gradient vector. Defeault is 0.
5	y2 − y-axis co-ordinate of the gradient vector. Default is 0.
6	spreadMethod − indicates method of spreading the gradient within graphics element. Default is 'pad'.
7	xlink:href − used to refer to another gradient.

例

テストVG

<html>
   <title>SVG Linear Gradient</title>
   <body>

      <h1>Sample SVG Linear Gradient</h1>

      <svg width="600" height="600">

         <defs>
            <linearGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000"/>
               <stop offset="100%" stop-color="#00FFF00"/>
            </linearGradient>
         </defs>

         <g>
            <text x="30" y="50" >Using Linear Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
            fill="url(#sampleGradient)"/>
         </g>

      </svg>

   </body>
</html>

sampleGradientとして定義された1つの<linearGradient>要素。
linearGradientでは、2つのオフセットが2色で定義されます。
rect要素、fill属性では、グラデーションのurlが指定され、以前に作成されたグラデーションで四角形を塗りつぶします。

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

放射状グラデーション

宣言

以下は、 <radialGradient> 要素の構文宣言です。主な属性のみを示しました。

<radialGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"

   cx="x-axis co-ordinate of center of circle."
   cy="y-axis co-ordinate of center of circle."

   r="radius of circle"

   fx="focal point for the radial gradient"
   fy="focal point for the radial gradient"

   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</radialGradient>

属性

Sr.No.	Name & Description
1	gradientUnits − units to define the coordinate system for the various length values within the gradient. If gradientUnits="userSpaceOnUse", values represent values in the current user coordinate system in place at the time when the gradient element is used. If patternContentUnits="objectBoundingBox", values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the gradient element is used. Default is userSpaceOnUse.
2	cx − x-axis co-ordinate of the center of largest circle of gradient vector. Defeault is 0.
3	cy − y-axis co-ordinate of the center of largest circle of gradient vector. Default is 0.
4	r − radius of the center of largest circle of gradient vector. Defeault is 0.
5	fx − focal point of radial gradient. Default is 0.
6	fy − focal point of radial gradient. Default is 0.
7	spreadMethod − indicates method of spreading the gradient within graphics element. Default is 'pad'.
8	xlink:href − used to refer to another gradient.

例

テストVG

<html>
   <title>SVG Radial Gradient</title>
   <body>

      <h1>Sample SVG Radial Gradient</h1>

      <svg width="600" height="600">
         <defs>
            <radialGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000"/>
               <stop offset="100%" stop-color="#00FFF00"/>
            </radialGradient>
         </defs>

         <g>
            <text x="30" y="50" >Using Radial Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
            fill="url(#sampleGradient)"/>
         </g>
      </svg>

   </body>
</html>

sampleGradientとして定義された1つの<radialGradient>要素。
radialGradientでは、2つのオフセットが2色で定義されます。
rect要素、fill属性では、グラデーションのurlが指定され、以前に作成されたグラデーションで四角形を塗りつぶします。

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

SVG-双方向性

SVG画像は、ユーザーのアクションに応答するようにできます。 SVGは、ポインターイベント、キーボードイベント、およびドキュメントイベントをサポートしています。次の例を考えてください。

例

テストVG

<html>
   <title>SVG Interactivity</title>
   <body>

      <h1>Sample Interactivity</h1>

      <svg width="600" height="600">
         <script type="text/JavaScript">
            <![CDATA[
               function showColor() {
                  alert("Color of the Rectangle is: "+
                  document.getElementById("rect1").getAttributeNS(null,"fill"));
               }

               function showArea(event){
                  var width = parseFloat(event.target.getAttributeNS(null,"width"));
                  var height = parseFloat(event.target.getAttributeNS(null,"height"));
                  alert("Area of the rectangle is: " +width +"x"+ height);
               }

               function showRootChildrenCount() {
                  alert("Total Children: "+document.documentElement.childNodes.length);
               }
            ]]>
         </script>

         <g>
            <text x="30" y="50" onClick="showColor()">Click me to show rectangle color.</text>

            <rect id="rect1" x="100" y="100" width="200" height="200"
            stroke="green" stroke-width="3" fill="red"
            onClick="showArea(event)"/>

            <text x="30" y="400" onClick="showRootChildrenCount()">
            Click me to print child node count.</text>
         </g>
      </svg>

   </body>
</html>

説明

SVGはJavaScript/ECMAScript関数をサポートしています。スクリプトブロックはCDATAブロックにあり、XMLでの文字データのサポートを考慮します。
SVG要素は、マウスイベント、キーボードイベントをサポートします。 onClickイベントを使用して、javascript関数を呼び出しました。
javascript関数では、documentはSVGドキュメントを表し、SVG要素を取得するために使用できます。
JavaScript関数では、イベントは現在のイベントを表し、イベントが発生したターゲット要素を取得するために使用できます。

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。各テキストと長方形をクリックして、結果を確認します。

SVG-リンク

<a>要素は、ハイパーリンクを作成するために使用されます。「xlink：href」属性は、URI（Uniform Resource Identifier）を補完するIRI（Internationalized Resource Identifiers）を渡すために使用されます。

宣言

以下は、 <a> 要素の構文宣言です。主な属性のみを示しました。

<a
   xlink:show = "new" | "replace"
   xlink:actuate = "onRequest"
   xlink:href = "<IRI>"
   target = "_replace" | "_self" | "_parent" | "_top" | "_blank" | "<XML-Name>" >
</a>

属性

Sr.No.	Name & Description
1	xlink:show − for documentation purpose for XLink aware processors. Default is new.
2	xlink:actuate − for documentation purpose for XLink aware processors.
3	xlink:href − location of the referenced object.
4	target − used when targets for the ending resource are possible.

例

テストVG

<html>
   <title>SVG Linking</title>
   <body>

      <h1>Sample Link</h1>

      <svg width="800" height="800">
         <g>
            <a xlink:href="http://www.finddevguides.com">
               <text x="0" y="15" fill="black" >
               Click me to load finddevguides DOT COM.</text>
            </a>
         </g>

         <g>
            <text x="0" y="65" fill="black" >
            Click in the rectangle to load finddevguides DOT COM</text>

            <a xlink:href="http://www.finddevguides.com">
               <rect x="100" y="80" width="300" height="100"
               style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)"/>
            </a>
         </g>
      </svg>

   </body>
</html>

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。リンクと長方形をクリックして、結果を確認します。

link：/cgi-bin/printpage.cgi [__印刷]

SVG-ローダーの例

ページローダーはWeb開発の一部であり、ページの読み込みを担当します。以下に示すSVGを使用したページローダーのサンプル

ソースコードはlink：/svg/src/loaders/loaders.zipで入手できます[ここ]

link：/cgi-bin/printpage.cgi [__印刷]

SVG-ダイアログボックスの効果

ダイアログボックスは、メニュー項目の追加情報をユーザーに要求するために使用されます。以下の例は、SVGおよびCSSアニメーションを使用したHTMLダイアログに基づいて機能します。

ソースコードはlink：/svg/src/dialog/dialog.zipで入手できます[ここ]

SVG-アイコン

支払いゲートウェイアイコン

支払いゲートウェイアイコンは、eコマースアプリケーションサービスプロバイダーに役立ちます。電子ビジネス、オンライン小売業者、ブリックとクリックのクレジットカード支払いを許可するもの、または従来のブリック会社のアイコンが以下にあります。

ブランドアイコン

利用可能なソースコードlink：/svg/src/payment/payment.zip [こちら]

SVG-クロック

世界時計の例

クロックの例は、clock.jsおよびsnap.svg.jsに基づいて機能します。サンプルの収集は以下のとおりです。

Svgクロック

デジタル時計

利用可能なソースコードリンク：/svg/src/clock/clock.zip [こちら]

SVG-ドラッグ

画面上の要素をクリックしてドラッグすることで要素を移動する機能。これは、次のようにSVGで比較的簡単に実現できます。

マルチドラッグ可能

利用可能なソースコードlink：/svg/src/drag/drag.zip [こちら]

SVG-キーポイント

キーポイントアニメーションは、キーポイントとキータイムの属性に基づいて機能します。以下に示すサンプルキーポイントアニメーション。

利用可能なソースコードlink：/svg/src/keypoint/keypoint.zip [こちら]

SVG-マップ

インド

ヨーロッパ

USA

ロシア

ドイツ

世界地図

利用可能なソースコードlink：/svg/src/map/map.zip [こちら]

SVG-amChart

amChart

チャートはSVGフィルターで作成されており、このチャートの背景はぼかしフィルターが適用された実際のグラフ（画像だけではありません）です

利用可能なソースコードlink：/svg/src/amchart/amchart.zip [こちら]

SVG-グラフ

SVGを使用してグラフを作成できます。以下に示すSVGグラフのサンプル。

ジーノチャート

Zino Surfaceチャート

利用可能なソースコードlink：/svg/src/graph.zip [こちら]

SVG-平面シェード

レンダラーは、シーン内のすべての情報を取得し、コンテキストにレンダリングします。現在、フロートサーフェスシェードは、WebGL、Canvas 2D、およびSVGをサポートしています。

バナーフラット効果

利用可能なソースコードlink：/svg/src/zpath/zpath.zip [こちら]

SVG-画像フィルター効果

フィルター

SVGは<filter>要素を使用してフィルターを定義します。 <filter>要素はid属性を使用して一意に識別します。フィルターは<def>要素内で定義され、IDによりグラフィック要素によって参照されます。

利用可能なソースコードlink：/svg/src/image/image.zip [こちら]

SVG-テキスト効果

テキスト効果

ユーザーは名前をクリックしてコンテキストを変更できます。

上記のテキスト効果を使用する場合は、link：/svg/src/effects/effects.zip [こちら]からファイルをダウンロードするだけです。

SVG-CSS効果のあるテキスト

キーフレームアニメーション

上記のフレームをクリックすると、velocity.jsエフェクトが表示されます。

画像効果

SVGによるCSS効果

ソースコード利用可能リンク：/svg/src/keyframe/keyframe.zip [こちら]

SVG-矢印効果

矢印効果

矢印効果2

矢印効果3

矢印効果4

矢印効果5

矢印効果6

ソースコード利用可能リンク：/svg/src/arrow/arrow.zip [こちら]

SVG-ブランド効果

ブランド効果

ブランド循環効果

長方形のブランド効果

ソースコードはlink：/svg/src/brand/brand.zipから入手できます[こちら]

SVG-グーイー効果

グーイー効果

メニューGooeyエフェクト

ギャラリー

ローダ

SVG-グラデーション

グラデーションとは、シェイプ内のある色から別の色へのスムーズな移行を指します。 SVGは2種類のグラデーションを提供します。

線形グラデーション-ある方向から別の方向へのある色から別の色への線形遷移を表します。
放射状グラデーション-ある方向から別の方向へのある色から別の色への円形の遷移を表します。

線形勾配

宣言

以下は、 <linearGradient> 要素の構文宣言です。主な属性のみを示しました。

<linearGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"

   x1="x-axis co-ordinate"
   y1="y-axis co-ordinate"
   x2="x-axis co-ordinate"
   y2="y-axis co-ordinate"

   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</linearGradient>

属性

Sr.No.	Name & Description
1	gradientUnits − units to define the coordinate system for the various length values within the gradient. If gradientUnits="userSpaceOnUse", values represent values in the current user coordinate system in place at the time when the gradient element is used. If patternContentUnits="objectBoundingBox", values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the gradient element is used. Default is userSpaceOnUse.
2	x1 − x-axis co-ordinate of the gradient vector. Defeault is 0.
3	y1 − y-axis co-ordinate of the gradient vector. Default is 0.
4	x2 − x-axis co-ordinate of the gradient vector. Defeault is 0.
5	y2 − y-axis co-ordinate of the gradient vector. Default is 0.
6	spreadMethod − indicates method of spreading the gradient within graphics element. Default is 'pad'.
7	xlink:href − used to refer to another gradient.

例

テストVG

<html>
   <title>SVG Linear Gradient</title>
   <body>

      <h1>Sample SVG Linear Gradient</h1>

      <svg width="600" height="600">

         <defs>
            <linearGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000"/>
               <stop offset="100%" stop-color="#00FFF00"/>
            </linearGradient>
         </defs>

         <g>
            <text x="30" y="50" >Using Linear Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
            fill="url(#sampleGradient)"/>
         </g>

      </svg>

   </body>
</html>

sampleGradientとして定義された1つの<linearGradient>要素。
linearGradientでは、2つのオフセットが2色で定義されます。
rect要素、fill属性では、グラデーションのurlが指定され、以前に作成されたグラデーションで四角形を塗りつぶします。

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

放射状グラデーション

宣言

以下は、 <radialGradient> 要素の構文宣言です。主な属性のみを示しました。

<radialGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"

   cx="x-axis co-ordinate of center of circle."
   cy="y-axis co-ordinate of center of circle."

   r="radius of circle"

   fx="focal point for the radial gradient"
   fy="focal point for the radial gradient"

   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</radialGradient>

属性

Sr.No.	Name & Description
1	gradientUnits − units to define the coordinate system for the various length values within the gradient. If gradientUnits="userSpaceOnUse", values represent values in the current user coordinate system in place at the time when the gradient element is used. If patternContentUnits="objectBoundingBox", values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the gradient element is used. Default is userSpaceOnUse.
2	cx − x-axis co-ordinate of the center of largest circle of gradient vector. Defeault is 0.
3	cy − y-axis co-ordinate of the center of largest circle of gradient vector. Default is 0.
4	r − radius of the center of largest circle of gradient vector. Defeault is 0.
5	fx − focal point of radial gradient. Default is 0.
6	fy − focal point of radial gradient. Default is 0.
7	spreadMethod − indicates method of spreading the gradient within graphics element. Default is 'pad'.
8	xlink:href − used to refer to another gradient.

例

テストVG

<html>
   <title>SVG Radial Gradient</title>
   <body>

      <h1>Sample SVG Radial Gradient</h1>

      <svg width="600" height="600">
         <defs>
            <radialGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000"/>
               <stop offset="100%" stop-color="#00FFF00"/>
            </radialGradient>
         </defs>

         <g>
            <text x="30" y="50" >Using Radial Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
            fill="url(#sampleGradient)"/>
         </g>
      </svg>

   </body>
</html>

sampleGradientとして定義された1つの<radialGradient>要素。
radialGradientでは、2つのオフセットが2色で定義されます。
rect要素、fill属性では、グラデーションのurlが指定され、以前に作成されたグラデーションで四角形を塗りつぶします。

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

SVG-遊び心のある効果

遊び心のある効果

SVGアニメーションは、Snap.svgを使用して行われます。また、すべてのエフェクトにCSSトランジションを使用します。

ソースコードの利用可能なリンク：/svg/src/playful/playful.zip [こちら]

SVG-スクロール効果

スクロール

スクロール効果はskrollr.min.jsに基づいて機能します。簡単なスクロールアニメーションは次のとおりです。

ソースコードの利用可能なリンク：/svg/src/scroll/scroll.zip [こちら]

SVG-スライドショー効果

シンプルなスライドショー

スライドショーは、HTML5、CSS、sliderFx.js、およびsnap.svg-min.jsに基づいて機能します

利用可能なソースコードlink：/svg/src/slideshow/slideshow.zip [こちら]

SVG-タブ効果

タブ効果

いくつかのcss効果を持つSVGとして単純なボックスを使用しています。

効果2

効果3

効果4

利用可能なソースコードlink：/svg/src/tab/tab.zip [こちら]

SVG-Raphael.jsエフェクト

Raphaëlは、Web上のベクターグラフィックスでの作業を簡素化する小さなJavaScriptライブラリです。例えば、あなたがあなた自身の特定のチャートや画像トリミングと回転ウィジェットを作成したいならば、あなたはこのライブラリで簡単にそしてそれを達成することができます。

ソースコードの利用可能なリンク：/svg/src/tube/tube.zip [こちら]

SVG-Velocity.Jsエフェクト

Velocity.Js

Velocityは速度のために構築されており、アニメーションを非常に高速にレンダリングします。既にjQueryのアニメーションに精通している場合、Velocityを使い始めるのは本当に簡単です。 jQueryの$ .animate（）に使用されるものと同じAPIを使用します。

上記のフレームをクリックすると、velocity.jsエフェクトが表示されます。

Velocity.jsラインエフェクト

ソースコード利用可能リンク：/svg/src/velocity/velocity.zip [こちら]

SVG-Walkway.jsエフェクト

Walk way.Js

ウォークウェイは、ラインおよびポリライン要素用に作成された非常に小さなライブラリです。

ソースコード利用可能リンク：/svg/src/velocity/velocity.zip [こちら]

SVG-zPath

zPath.Js

zPath.jsは、回線用に作成された非常に小さなライブラリです。

利用可能なソースコードlink：/svg/src/zpath/zpath.zip [こちら]

SVG-Vague.jsエフェクト

Vague.Js

SVGフィルターを介してHTML要素をぼかすためのjQueryプラグイン。

利用可能なソースコードlink：/svg/src/zpath/zpath.zip [こちら]

SVG-変換効果

ページ変換効果は、snap.svg-min.js、svgLoader.js、およびclassie.jsに基づいて機能します。サンプルの例を次に示します。

円形効果

流出効果

フレームエフェクト

利用可能なソースコードlink：/svg/src/zpath/zpath.zip [こちら]

SVG-全画面オーバーレイ効果

シンプルで創造的なオーバーレイスタイルと効果。オーバーレイをビューポートにスライドさせることから、SVGモーフィングシェイプを使用することまで、フルスクリーンオーバーレイの効果を調べます。

ソースコードの利用可能なリンク：/svg/src/fullscreen/fullscreen.zip [こちら]

SVG-Laylinepainter.jsエフェクト

Lazy Line Painter.Js

Lazy Line Painterは、SVGパスをアニメーション化して描画シーケンスをアニメーション化するjQueryプラグインです。

利用可能なソースコードlink：/svg/src/lazylinepainter/walkway.zip [こちら]

SVG-デモゲーム

SVGデモゲーム

シンプルなゲームは、SVG、javaスクリプト、CSS、およびHTMLで開発されています

利用可能なソースコードのリンク：/svg/src/gamel [こちら]

SVG-リアルタイムSVG AD

Ubuntuは広告の作成にSVGを使用しています。以下の例は、広告セクションのさまざまなWebサイトで見ることができる通常の広告の1つです。

ソースコードの利用可能なリンク：/svg/src/ubuntu/ubuntu.zip [こちら] Svg-questions-answers

Svg-quick-guide

SVG-概要

SVGとは何ですか？

利点

デメリット

例

出力

SVGとHTMLの統合方法

SVG-シェイプ

SVG-テキスト

宣言

属性

例

出力

回転するテキスト

出力

複数行テキスト

出力

ハイパーリンクテキスト

出力

SVG-ストローク

例

出力

ストローク幅

出力

ストロークラインキャップ

出力

ストロークダッシュアレイ

出力

SVG-フィルター

宣言

属性

例

出力

影付きフィルター

出力

SVG-パターン

宣言

属性

例

出力

SVG-グラデーション

線形勾配

宣言

属性

例

出力

放射状グラデーション

宣言

属性

例

出力

SVG-双方向性

例

説明

出力

SVG-リンク

宣言

属性

例

出力

SVG-ローダーの例

SVG-ダイアログボックスの効果

SVG-アイコン

支払いゲートウェイアイコン

ブランドアイコン

SVG-クロック

世界時計の例

Svgクロック

デジタル時計

SVG-ドラッグ

マルチドラッグ可能

SVG-キーポイント

SVG-マップ

インド

ヨーロッパ

USA

ロシア

ドイツ

世界地図