--- title: SVG 要素リファレンス slug: Web/SVG/Element tags: - Drawing - Elements - Responsive Design - SVG - SVG Reference - SVG リファレンス - Vector Graphics - 'l10n:priority' - ベクターグラフィック - レスポンシブデザイン - 描画 - 要素 translation_of: Web/SVG/Element --- <p>« <a href="/ja/docs/SVG">SVG</a> / <a href="/ja/docs/SVG/Attribute">SVG 属性リファレンス</a> »</p> <p><span class="seoSummary">SVG の描画と画像は、構築、描画、ベクター画像や図のレイアウトのための広範にわたる要素を使用して作成されます。ここではそれぞれの SVG 要素のリファレンス文書が見つかります。</span></p> <h2 id="SVG_elements_A_to_Z" name="SVG_elements_A_to_Z">SVG 要素 A - Z</h2> <div class="index"> <h3 id="A">A</h3> <ul> <li>{{SVGElement("a")}}</li> <li>{{SVGElement("animate")}}</li> <li>{{SVGElement("animateMotion")}}</li> <li>{{SVGElement("animateTransform")}}</li> </ul> <h3 id="C">C</h3> <ul> <li>{{SVGElement("circle")}}</li> <li>{{SVGElement("clipPath")}}</li> <li>{{SVGElement("color-profile")}}</li> </ul> <h3 id="D">D</h3> <ul> <li>{{SVGElement("defs")}}</li> <li>{{SVGElement("desc")}}</li> <li>{{SVGElement("discard")}}</li> </ul> <h3 id="E">E</h3> <ul> <li>{{SVGElement("ellipse")}}</li> </ul> <h3 id="F">F</h3> <ul> <li>{{SVGElement("feBlend")}}</li> <li>{{SVGElement("feColorMatrix")}}</li> <li>{{SVGElement("feComponentTransfer")}}</li> <li>{{SVGElement("feComposite")}}</li> <li>{{SVGElement("feConvolveMatrix")}}</li> <li>{{SVGElement("feDiffuseLighting")}}</li> <li>{{SVGElement("feDisplacementMap")}}</li> <li>{{SVGElement("feDistantLight")}}</li> <li>{{SVGElement("feDropShadow")}}</li> <li>{{SVGElement("feFlood")}}</li> <li>{{SVGElement("feFuncA")}}</li> <li>{{SVGElement("feFuncB")}}</li> <li>{{SVGElement("feFuncG")}}</li> <li>{{SVGElement("feFuncR")}}</li> <li>{{SVGElement("feGaussianBlur")}}</li> <li>{{SVGElement("feImage")}}</li> <li>{{SVGElement("feMerge")}}</li> <li>{{SVGElement("feMergeNode")}}</li> <li>{{SVGElement("feMorphology")}}</li> <li>{{SVGElement("feOffset")}}</li> <li>{{SVGElement("fePointLight")}}</li> <li>{{SVGElement("feSpecularLighting")}}</li> <li>{{SVGElement("feSpotLight")}}</li> <li>{{SVGElement("feTile")}}</li> <li>{{SVGElement("feTurbulence")}}</li> <li>{{SVGElement("filter")}}</li> <li>{{SVGElement("foreignObject")}}</li> </ul> <h3 id="G">G</h3> <ul> <li>{{SVGElement("g")}}</li> </ul> <h3 id="H">H</h3> <ul> <li>{{SVGElement("hatch")}}</li> <li>{{SVGElement("hatchpath")}}</li> </ul> <h3 id="I">I</h3> <ul> <li>{{SVGElement("image")}}</li> </ul> <h3 id="L">L</h3> <ul> <li>{{SVGElement("line")}}</li> <li>{{SVGElement("linearGradient")}}</li> </ul> <h3 id="M">M</h3> <ul> <li>{{SVGElement("marker")}}</li> <li>{{SVGElement("mask")}}</li> <li>{{SVGElement("mesh")}}</li> <li>{{SVGElement("meshgradient")}}</li> <li>{{SVGElement("meshpatch")}}</li> <li>{{SVGElement("meshrow")}}</li> <li>{{SVGElement("metadata")}}</li> <li>{{SVGElement("mpath")}}</li> </ul> <h3 id="P">P</h3> <ul> <li>{{SVGElement("path")}}</li> <li>{{SVGElement("pattern")}}</li> <li>{{SVGElement("polygon")}}</li> <li>{{SVGElement("polyline")}}</li> </ul> <h3 id="R">R</h3> <ul> <li>{{SVGElement("radialGradient")}}</li> <li>{{SVGElement("rect")}}</li> </ul> <h3 id="S">S</h3> <ul> <li>{{SVGElement("script")}}</li> <li>{{SVGElement("set")}}</li> <li>{{SVGElement("solidcolor")}}</li> <li>{{SVGElement("stop")}}</li> <li>{{SVGElement("style")}}</li> <li>{{SVGElement("svg")}}</li> <li>{{SVGElement("switch")}}</li> <li>{{SVGElement("symbol")}}</li> </ul> <h3 id="T">T</h3> <ul> <li>{{SVGElement("text")}}</li> <li>{{SVGElement("textPath")}}</li> <li>{{SVGElement("title")}}</li> <li>{{SVGElement("tspan")}}</li> </ul> <h3 id="U">U</h3> <ul> <li>{{SVGElement("unknown")}}</li> <li>{{SVGElement("use")}}</li> </ul> <h3 id="V">V</h3> <ul> <li>{{SVGElement("view")}}</li> </ul> </div> <h2 id="SVG_elements_by_category" name="SVG_elements_by_category">SVG 要素一覧 (カテゴリー別)</h2> <h3 id="Animation_elements" name="Animation_elements">アニメーション要素</h3> <p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}</p> <h3 id="Basic_shapes" name="Basic_shapes">基本シェイプ</h3> <p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> <h3 id="Container_elements" name="Container_elements">コンテナー要素</h3> <p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}</p> <h3 id="Descriptive_elements" name="Descriptive_elements">説明的要素</h3> <p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p> <h3 id="Filter_primitive_elements" name="Filter_primitive_elements">フィルター構成要素</h3> <p>{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}</p> <h3 id="Font_elements" name="Font_elements">フォント要素</h3> <p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}</p> <h3 id="Gradient_elements" name="Gradient_elements">グラデーション要素</h3> <p>{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p> <h3 id="Graphics_elements" name="Graphics_elements">グラフィック要素</h3> <p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}</p> <h3 id="Graphics_referencing_elements" name="Graphics_referencing_elements">グラフィック参照要素</h3> <p>{{SVGElement("mesh")}}, {{SVGElement("use")}}</p> <h3 id="Light_source_elements" name="Light_source_elements">光源要素</h3> <p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}</p> <h3 id="Never-rendered_elements" name="Never-rendered_elements">描画されない要素</h3> <p>{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}</p> <h3 id="Paint_server_elements" name="Paint_server_elements">ペイントサーバー要素</h3> <p>{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}</p> <h3 id="Renderable_elements" name="Renderable_elements">描画可能要素</h3> <p>{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}</p> <h3 id="Shape_elements" name="Shape_elements">図形要素</h3> <p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> <h3 id="Structural_elements" name="Structural_elements">構造的要素</h3> <p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p> <h3 id="Text_content_elements" name="Text_content_elements">テキストコンテンツ要素</h3> <p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> <h3 id="Text_content_child_elements" name="Text_content_child_elements">テキストコンテンツの子要素</h3> <p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> <h3 id="Uncategorized_elements" name="Uncategorized_elements">未分類の要素</h3> <p>{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}</p> <h2 id="Obsolete_and_deprecated_elements" name="Obsolete_and_deprecated_elements">廃止および非推奨の要素</h2> <div class="blockIndicator warning"> <p><strong>警告:</strong> 以下のものは非推奨の古い SVG 要素であり、使用するべきではありません。<strong>新しいプロジェクトでは決して使用せず、古いプロジェクトでもできるだけ早く置き換えてください。</strong>ここに掲載しているのは情報提供だけの目的です。</p> </div> <h3 id="A_2">A</h3> <p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("animateColor")}}</p> <h3 id="C_2">C</h3> <p>{{SVGElement("cursor")}}</p> <h3 id="F_2">F</h3> <p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}</p> <h3 id="G_2">G</h3> <p>{{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}</p> <h3 id="H_2">H</h3> <p>{{SVGElement("hkern")}}</p> <h3 id="M_2">M</h3> <p>{{SVGElement("missing-glyph")}}</p> <h3 id="T_2">T</h3> <p>{{SVGElement("tref")}}</p> <h3 id="V_2">V</h3> <p>{{SVGElement("vkern")}}</p> <h2 id="See_also" name="See_also">関連情報</h2> <ul> <li><a href="/ja/docs/Web/SVG/Attribute">SVG 属性リファレンス</a></li> <li><a href="/ja/docs/Web/SVG/Tutorial">SVG チュートリアル</a></li> <li><a href="/ja/docs/Web/API/Document_Object_Model#SVG_interfaces">SVG インターフェイスリファレンス</a></li> </ul> <p>{{SVGRef}}</p>