SVG ファイルは、2 次元グラフィックのセットを説明しています。次に、SVG ファイルにあるグラフィックの例を示します。
image要素を介したイメージrect要素を介した矩形circleとellipse要素を介した円と楕円line要素とpolyline要素を介した線polygon要素を介した多角形path要素を介した任意のパス (曲線、円弧、線、など)g要素を介したその他のグラフィック要素のグループtext要素を介したテキスト
これらの要素は、XML 表現属性を要素に設定するか、または要素にカスケーディング・スタイル・クラス (CSS) をリンクすることでスタイリングできます。
SVG とその機能についての詳細は、次の URL にある SVG 仕様を参照してください。http://www.w3.org/TR/SVG SVG では、グラフィック要素の変換、フィルター効果、インライン・アニメーション、スクリプト機能など、ここで紹介した以外にも多くの機能を提供しています。
SVG ファイルの例
以下は、SVG ファイルの典型的な例です。
<svg width="640" height="480">
<defs>
<!-- the style on path elements and element with id "myid" -->
<!-- is defined through a style sheet -->
<style type="text/css">
path {stroke-width:3;stroke:blue;fill:none}
.dash {stroke-dasharray:5 2}
#myid {fill:rgb(205,5,5);fill-opacity:0.5}
</style>
<!-- style can be complex such as a gradient... -->
<linearGradient id="grad" x1="0%" y1="0%" x2="100%"
y2="100%">
<stop offset="0" stop-color="yellow"/>
<stop offset="0.2" stop-color="green"/>
<stop offset="1" stop-color="red"/>
</linearGradient>
</defs>
<!-- the style on the rectangle is defined through XML -->
<!-- attributes -->
<rect x="0" y="0" width="100%" height="100%"
fill="url(#grad)"/>
<!-- paths use a particular syntax to defined their shape -->
<path d="M0 0L640 480"/>
<path class="dash" d="M640 0L0 480"/>
<!-- the style on the ellipse is defined through an inline -->
<!-- style sheet -->
<ellipse cx="320" cy="240" rx="40" ry="30"
style="fill:rgb(180,10,10)"/>
<circle id="myid" cx="320" cy="240" r="50"/>
</svg>
SVG ファイルは、
連続する緑、黄、赤のグラデーションで塗りつぶした 640 x 480 の矩形としてレンダリングされます。このグラデーションの上部に、太さ 3 の線が 2 本あり、そのうちの 1 本が破線になります。楕円と円もあり、円の色は半透明 (
fill-opacity:0.5) であるため、下にある楕円の色が見えます。