SVG リファレンス

❮ 前章へ 次章へ ❯

SVG 要素

要素 説明 属性
<a> SVG 要素の周りにリンクを作成します xlink:show
xlink:actuate
xlink:href
target
<altGlyph> 特定文字データをレンダリングするために使用するグリフ(字体)の制御を提供します x
y
dx
dy
rotate
glyphRef
format
xlink:href
<altGlyphDef> グリフの置換セットを定義します id
<altGlyphItem> グリフ置換の候補セットを定義します id
<animate> 要素の属性が時間の経過とともにどのように変化するかを定義します attributeName="対象となる属性の名前"
by="相対的差分値(offset value)"
from="始値(starting value)"
to="終値(ending value)"
dur="持続時間"
repeatCount="アニメーション関数の反復回数"
<animateMotion> 参照先の要素をモーションパスに沿って移動します calcMode="アニメーションの補間モード。'discrete'、'linear'、'paced'、'spline' が指定できる"
path="モーションパス"
keyPoints="オブジェクトがその瞬間に移動するモーションパスの距離"
rotate="回転変換を適用する"
xlink:href="モーションパスを定義する <path> 要素への URI 参照"
<animateTransform> 対象要素の変換属性に対するアニメーションを行い、移動、拡縮、回転、斜傾を制御するためのアニメーションを可能にします by="相対的差分値(offset value)"
from="始値(starting value)"
to="終値(ending value)"
type="時経過に伴ってパラメタが変化する変換の種類。'translate'、'scale'、'rotate'、'skewX'、'skewY' が指定できる"
<circle> 円を定義します cx="円の中心の x-軸"
cy="円の中心の y-軸"
r="円の半径"。必須。

+ プレゼンテーション属性:
Color、FillStroke、Graphics
<clipPath> クリップするとは、通常描画されるものを隠すことです。描画されているものと描画されていないものを定義するステンシルをクリッピングパスと言います clip-path="参照したクリッピングパスと、参照しているクリッピングパスとの共通部分"
clipPathUnits="'userSpaceOnUse' または 'objectBoundingBox'. 2 番目の値は、子の単位をマスクを使用するオブジェクトの包含ボックスの一部分にします (デフォルト:'userSpaceOnUse')"
<color-profile> カラープロファイル記述(color profile description)を指定します(文書が CSS を使用してスタイルされている場合) local="ローカルに格納されているカラー・プロファイルを識別するユニークな ID"
name=""
rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric"
xlink:href="ICC プロファイル・リソースの URI"
<cursor> プラットフォームに依存しないカスタムカーソルを定義します x="カーソルの左上隅の x-軸 (デフォルトは 0)"
y="カーソルの左上隅の y-軸 (デフォルトは 0)"
xlink:href="カーソルに使用する画像の URI
<defs> 参照する要素のコンテナ  
<desc> SVG 内のコンテナ要素またはグラフィック要素のテキストのみの説明(ユーザエージェントはテキストをツールチップとして表示することがあります)  
<ellipse> 楕円を定義します cx="楕円の中心の x 座標"
cy="楕円の中心の y 座標。 "
rx="楕円の x 軸半径の長さ。必須。
ry="楕円の y 軸半径の長さ。必須。

+ プレゼンテーション
Color、FillStroke、Graphics
<feBlend> 特定の混合モードに従って 2 つのオブジェクトを合成します mode="画像の混合モード:normal|multiply|screen|darken|lighten"
in="与えられた原始フィルタの入力を識別する:SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>"
in2="混色演算で利用される2番目の入力画像"
feColorMatrix SVG フィルタ。行列変換を適用します  
feComponentTransfer SVG フィルタ。データのコンポーネント単位の再マッピングを実行します  
feComposite SVG フィルタ。  
feConvolveMatrix SVG フィルタ。  
feDiffuseLighting SVG フィルタ。  
feDisplacementMap SVG フィルタ。  
feDistantLight SVG フィルタ。光源を定義します  
feFlood SVG フィルタ。  
feFuncA SVG フィルタ。feComponentTransfer のサブ要素  
feFuncB SVG フィルタ。feComponentTransfer のサブ要素  
feFuncG SVG フィルタ。feComponentTransfer のサブ要素  
feFuncR SVG フィルタ。feComponentTransfer のサブ要素  
feGaussianBlur SVG フィルタ。画像にガウスぼかしを実行します  
feImage SVG フィルタ。  
feMerge SVG フィルタ。お互いの上に画像レイヤを作成します  
feMergeNode SVG フィルタ。feMerge のサブ要素  
feMorphology SVG フィルタ。ソースグラフィックで "fattening" または "thinning" を実行します  
feOffset SVG フィルタ。画像を現在の位置に相対的に移動する  
fePointLight SVG フィルタ。  
feSpecularLighting SVG フィルタ。  
feSpotLight SVG フィルタ。  
feTile SVG フィルタ。  
feTurbulence SVG フィルタ。  
filter フィルタ効果用のコンテナ  
font フォントの定義  
font-face フォントの特性を記述します  
font-face-format    
font-face-name    
font-face-src    
font-face-uri    
foreignObject    
<g> 要素をグループ化するために使用します id="グループ名"
fill="グループの塗り潰し色"
opacity="グループの不透明度"

+ プレゼンテーション
All
glyph 指定されたグリフのグラフィックスを定義します  
glyphRef 使用可能なグリフを定義します  
hkern    
<image> 画像を定義します x="画像の左上隅の x 軸"
y="画像の左上隅の y 軸"
width="imageの幅"。必須。
height="imageの高さ"。必須。
xlink:href="imageのパス"。必須。

+ プレゼンテーション
Color、Graphics、Images、Viewports
<line> 線分を定義します x1="線分の始点の x 座標"
y1="線分の始点の y 座標"
x2="線分の終点の x 座標"
y2="線分の終点の y 座標"

+ プレゼンテーション
Color、FillStroke、Graphics、Markers
<linearGradient> 線形グラデーションを定義します。線形グラデーションは、ベクトルを使用してオブジェクトを塗りつぶし、横、縦、または傾斜グラデーションとして定義できます。 id="このパターンを参照するために使用するユニークな ID。参照するために必要"
gradientUnits="'userSpaceOnUse' または 'objectBoundingBox'。ビューボックスまたはオブジェクトを使用して、ベクトル点の相対位置を決定します。 (デフォルトh 'objectBoundingBox')"
gradientTransform="グラデーションに適用する変換"
x1="グラデーション・ベクトルの始点の x 座標。(数値か % - デフォルトは 0%)"
y1="グラデーション・ベクトルの始点の y 座標。(デフォルトは 0%)"
x2="グラデーション・ベクトルの終点の x 座標。(デフォルトは 100%)"
y2="グラデーション・ベクトルの終点の y 座標。(デフォルトは 0%)"
spreadMethod="'pad' か 'reflect' または 'repeat'"
xlink:href="属性値がデフォルトとして使用され、ストップが含まれている別のグラデーションを参照します。再帰的"
<marker> マーカは、線、ポリライン、ポリゴン、およびパスの頂点に配置できます。これらの要素は、デフォルトで継承するマーカ属性の "marker-start"、"marker-mid"、"marker-end" を使用できます。また、定義されているマーカーのURIまたは 'none'に設定することもできます。 URI を介して参照できるようにするには、最初にマーカを定義しなければなりません。 マーカの中にはどのような種類のシェイプでも配置することができます。それらは、アタッチされている要素の上に描画されます markerUnits="'strokeWidth' または 'userSpaceOnUse'。'strokeWidth' を使用すると、1 単位は 1 ストローク幅になります。 それ以外の場合、マーカは拡大縮小されず、参照元と同じビュー単位を使用します(デフォルトは 'strokeWidth')。"
refx="マーカが頂点に接続する位置(デフォルトは 0)"
refy="マーカが頂点に接続する位置(デフォルトは 0)"
orient="'auto' または、マーカを常に表示する角度。'auto' は、x 軸を頂点の接線とする角度を計算します(デフォルトは 0)"
markerWidth="マーカの幅 (デフォルトは 3)"
markerHeight="マーカの高さ (デフォルトは 3)"
viewBox="the points "seen" in this SVG drawing area. 4 つの値は、空白またはカンマで区切ります。 (min x, min y, width, height)"

+ プレゼンテーション
All
<mask> マスキングは、不透明度の値とクリッピングの組み合わせです。クリッピングと同様に、シェイプ、テキスト、またはパスを使用して マスクのセクションを定義することができます。マスクのデフォルト状態は、クリッピング面とは反対に完全に透明です。 マスク内のグラフィックスは、マスクの不透明部分が マスクのグラフィックスは、マスクの不透明な部分がどうであるかを設定します maskUnits="'userSpaceOnUse' または 'objectBoundingBox'。クリッピング面がフルビューポートに相対的かオブジェクトに相対的なのかを設定します (デフォルト:'objectBoundingBox')。
maskContentUnits="2 番目の値をパーセンテージで使用すると、オブジェクトに相対的なマスクグラフィックスの位置が決まります。 'userSpaceOnUse' または 'objectBoundingBox' (デフォルト:'userSpaceOnUse')"
x="マスクのクリッピング面 (デフォルト:-10%)"
y="マスクのクリッピング面 (デフォルト:-10%)"
width="マスクのクリッピング面 (デフォルト:120%)"
height="マスクのクリッピング面 (デフォルト:120%)"
metadata メタデータを指定します  
missing-glyph    
mpath    
<path> パスを定義します d="パスを定義する一連のコマンド"
pathLength="存在すれば、計算されたポイントのパス長がこの値と等しくなるようにパスがスケーリングされます"
transform="変換のリスト"

+ プレゼンテーション
Color、FillStroke、Graphics、Markers
<pattern> ビューに表示する座標とビューのサイズを定義し、パターンに図形を追加します。ビューボックス(表示領域)の端が当たったときにパターンが繰り返されます id="このパターンを参照するために使用されるユニークな id" 必須。
patternUnits="'userSpaceOnUse' または 'objectBoundingBox'。2 番目の値は、x、y、width、heightの単位を、パターンを使用する オブジェクトの包含ボックスの端数(または %)にします。"
patternContentUnits="'userSpaceOnUse' または 'objectBoundingBox'"
patternTransform="パターン全体を変換する"
x="左上隅からのパターンのオフセット(差分)。(デフォルトは 0)"
y="左上隅からのパターンのオフセット(差分)。(デフォルトは 0)"
width="パターンタイルの幅 (デフォルトは 100%)"
height="パターンタイルの高さ (デフォルトは 100%)"
viewBox="the points "seen" in this SVG drawing area. 4 つの値は、空白またはカンマで区切ります。 (min x, min y, width, height)"
xlink:href="属性値がデフォルトとして使用されて子が継承される別のパターンを参照します。再帰的"
 
<polygon> Defines a graphic that contains at least three sides points="the points of the polygon. The total number of points must be even". 必須。
fill-rule="part of the FillStroke プレゼンテーション attributes"

+ プレゼンテーション
Color、FillStroke、Graphics、Markers
<polyline> Defines any shape that consists of only straight lines points="the points on the polyline". 必須。

+ プレゼンテーション
Color、FillStroke、Graphics、Markers
<radialGradient> Defines a radial gradient. Radial gradients are created by taking a circle and smoothly changing values between gradient stops from the focus point to the outside radius. gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. Use the view box or object to determine relative position of vector points. (Default 'objectBoundingBox')"
gradientTransform="the transformation to apply to the gradient"
cx="the center point of the gradient (number or % - 50% is default)"
cy="the center point of the gradient. (50% default)"
r="the radius of the gradient. (50% default)"
fx="the focus point of the gradient. (0% default)"
fy="The focus point of the gradient. (0% default)"
spreadMethod="'pad' or 'reflect' or 'repeat'"
xlink:href="Reference to another gradient whose attribute values are used as defaults and stops included. Recursive"
<rect> Defines a rectangle x="rectangleの左上隅の x 軸"
y="rectangleの左上隅の y 軸"
rx="the x-axis radius (to round the element)"
ry="the y-axis radius (to round the element)"
width="rectangleの幅"。必須。
height="the height of the rectangle" 必須。

+ プレゼンテーション
Color、FillStroke、Graphics
script Container for scripts (e.g., ECMAScript)  
set Sets the value of an attribute for a specified duration  
<stop> stops for a gradient offset="the offset for this stop (0 to 1/0% to 100%)". 必須。
stop-color="the color of this stop"
stop-opacity="the opacity of this stop (0 to 1)"
style Allows style sheets to be embedded directly within SVG content  
<svg> Creates an SVG document fragment x="top left corner when embedded (default 0)"
y="top left corner when embedded (default 0)"
width="the width of the svg fragment (default 100%)"
height="the height of the svg fragment (default 100%)"
viewBox="the points "seen" in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height)"
preserveAspectRatio="'none' or any of the 9 combinations of 'xVALYVAL' where VAL is 'min', 'mid' or 'max'. (default xMidYMid)"
zoomAndPan="'magnify' or 'disable'. Magnify option allows users to pan and zoom your file (default magnify)"
xml="outermost <svg> element needs to setup SVG and its namespace: xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve""

+ プレゼンテーション
All
switch    
symbol    
<text> Defines a text x="a list of x-axis positions. The nth x-axis position is given to the nth character in the text. If there are additional characters after the positions run out they are placed after the last character. 0 is default"
y="a list of y-axis positions. (see x). 0 is default"
dx="a list of lengths which moves the characters relative to the absolute position of the last glyph drawn. (see x)"
dy="a list of lengths which moves the characters relative to the absolute position of the last glyph drawn. (see x)"
rotate="a list of rotations. The nth rotation is performed on the nth character. Additional characters are NOT given the last rotation value"
textLength="a target length for the text that the SVG viewer will attempt to display the text between by adjusting the spacing and/or the glyphs. (デフォルト:The text's normal length)"
lengthAdjust="tells the viewer what to adjust to try to accomplish rendering the text if the length is specified. The two values are 'spacing' and 'spacingAndGlyphs'"

+ プレゼンテーション
Color、FillStroke、Graphics、FontSpecification、TextContentElements
textPath    
title A text-only description for elements in SVG - not displayed as part of the graphics. User agents may display the text as a tooltip  
<tref> References any <text> element in the SVG document and reuse it Identical to the <text> element
<tspan> Identical to the <text> element but can be nested inside text tags and inside itself Identical to the <text> element
+ in addition:
xlink:href="Reference to a <text> element"
<use> Uses a URI to reference a <g>, <svg> or other graphical element with a unique id attribute and replicate it. The copy is only a reference to the original so only the original exists in the document. Any change to the original affects all copies. x="cloned elementの左上隅の x 軸"
y="cloned elementの左上隅の y 軸"
width="the width of the cloned element"
height="the height of the cloned element"
xlink:href="a URI reference to the cloned element"

+ プレゼンテーション
All
view    
vkern    

❮ 前章へ 次章へ ❯