• Skip to main content
  • Skip to search
  • Skip to select language
MDN Web Docs
  • References
    • Overview / Web Technology

      Web technology reference for developers

    • HTML

      Structure of content on the web

    • CSS

      Code used to describe document style

    • JavaScript

      General-purpose scripting language

    • HTTP

      Protocol for transmitting web resources

    • Web APIs

      Interfaces for building web applications

    • Web Extensions

      Developing extensions for web browsers

    • Accessibility

      Build web projects usable for all

    • Web Technology

      Web technology reference for developers

  • Learn
    • Overview / MDN Learning Area

      Learn web development

    • MDN Learning Area

      Learn web development

    • HTML

      Learn to structure web content with HTML

    • CSS

      Learn to style content using CSS

    • JavaScript

      Learn to run scripts in the browser

    • Accessibility

      Learn to make the web accessible to all

  • Plus
    • Overview

      A customized MDN experience

    • AI Help

      Get real-time assistance and support

    • Updates

      All browser compatibility updates at a glance

    • Documentation

      Learn how to use MDN Plus

    • FAQ

      Frequently asked questions about MDN Plus

  • Curriculum New
  • Blog
    • Playground

      Write, test and share your code

    • HTTP Observatory

      Scan a website for free

    • AI Help

      Get real-time assistance and support

  • Log in
  • Sign up for free
  1. 開発者向けのウェブ技術
  2. SVG
  3. チュートリアル
    • English (US)
    • Deutsch
    • 中文 (简体)

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

この記事では

  • 関連情報
  1. SVG
  2. チュートリアル
  3. Introducing SVG from scratch
    1. 概要
    2. 始めましょう
    3. 配置
    4. 基本図形
    5. パス
    6. 塗りつぶしとストローク
    7. SVG におけるグラデーション
    8. パターン
    9. テキスト
    10. 基本的な座標変換
    11. クリッピングとマスク
    12. SVG におけるその他のコンテンツ
    13. フィルター効果
    14. SVG フォント
    15. SVG の image 要素
    16. SVG のツール
    17. SVG と CSS
  4. Guides
    1. データ型
    2. リンク
    3. 名前空間の速修講座
    4. スクリプト処理
    5. SMIL による SVG アニメーション
    6. 画像としての SVG
    7. HTML での SVG 効果
    8. SVG フィルターのチュートリアル
    9. HTML 内の SVG 入門
  5. リファレンス
  6. 要素
    1. <a>
    2. <animate>
    3. <animateMotion>
    4. <animateTransform>
    5. <circle>
    6. <clipPath>
    7. <defs>
    8. <desc>
    9. <ellipse>
    10. <feBlend>
    11. <feColorMatrix>
    12. <feComponentTransfer>
    13. <feComposite>
    14. <feConvolveMatrix>
    15. <feDiffuseLighting>
    16. <feDisplacementMap>
    17. <feDistantLight>
    18. <feDropShadow>
    19. <feFlood>
    20. <feFuncA>
    21. <feFuncB>
    22. <feFuncG>
    23. <feFuncR>
    24. <feGaussianBlur>
    25. <feImage>
    26. <feMerge>
    27. <feMergeNode>
    28. <feMorphology>
    29. <feOffset>
    30. <fePointLight>
    31. <feSpecularLighting>
    32. <feSpotLight>
    33. <feTile>
    34. <feTurbulence>
    35. <filter>
    36. <foreignObject>
    37. <g>
    38. <image>
    39. <line>
    40. <linearGradient>
    41. <marker>
    42. <mask>
    43. <metadata>
    44. <mpath>
    45. <path>
    46. <pattern>
    47. <polygon>
    48. <polyline>
    49. <radialGradient>
    50. <rect>
    51. <script>
    52. <set>
    53. <stop>
    54. <style>
    55. <svg>
    56. <switch>
    57. <symbol>
    58. <text>
    59. <textPath>
    60. <title>
    61. <tspan>
    62. <use>
    63. <view>
  7. Attributes
    1. accumulate
    2. additive
    3. alignment-baseline
    4. amplitude
    5. attributeName
    6. attributeType 非推奨;
    7. azimuth
    8. baseFrequency
    9. baseline-shift
    10. baseProfile 非推奨;
    11. begin
    12. bias
    13. by
    14. calcMode
    15. class
    16. clip 非推奨;
    17. clip-path
    18. clip-rule
    19. clipPathUnits
    20. color
    21. color-interpolation
    22. color-interpolation-filters
    23. cursor
    24. cx
    25. cy
    26. d
    27. data-*
    28. decoding
    29. diffuseConstant
    30. direction
    31. display
    32. divisor
    33. dominant-baseline
    34. dur
    35. dx
    36. dy
    37. edgeMode
    38. elevation
    39. end
    40. exponent
    41. fetchpriority
    42. fill
    43. fill-opacity
    44. fill-rule
    45. filter
    46. filterUnits
    47. flood-color
    48. flood-opacity
    49. font-family
    50. font-size
    51. font-size-adjust
    52. font-stretch 非推奨;
    53. font-style
    54. font-variant
    55. font-weight
    56. fr
    57. from
    58. fx
    59. fy
    60. glyph-orientation-horizontal 非推奨;
    61. glyph-orientation-vertical 非推奨;
    62. gradientTransform
    63. gradientUnits
    64. height
    65. href
    66. id
    67. image-rendering
    68. in
    69. in2
    70. intercept
    71. k1
    72. k2
    73. k3
    74. k4
    75. kernelMatrix
    76. kernelUnitLength
    77. keyPoints
    78. keySplines
    79. keyTimes
    80. lang
    81. lengthAdjust
    82. letter-spacing
    83. lighting-color
    84. limitingConeAngle
    85. marker-end
    86. marker-mid
    87. marker-start
    88. markerHeight
    89. markerUnits
    90. markerWidth
    91. mask
    92. mask-type
    93. maskContentUnits
    94. maskUnits
    95. max
    96. media
    97. method Experimental
    98. min
    99. mode
    100. numOctaves
    101. opacity
    102. operator
    103. order
    104. orient
    105. origin
    106. overflow
    107. paint-order
    108. path
    109. pathLength
    110. patternContentUnits
    111. patternTransform
    112. patternUnits
    113. pointer-events
    114. points
    115. pointsAtX
    116. pointsAtY
    117. pointsAtZ
    118. preserveAlpha
    119. preserveAspectRatio
    120. primitiveUnits
    121. r
    122. radius
    123. refX
    124. refY
    125. repeatCount
    126. repeatDur
    127. requiredFeatures 非推奨;
    128. restart
    129. result
    130. rotate Experimental
    131. rx
    132. ry
    133. scale
    134. seed
    135. shape-rendering
    136. side Experimental
    137. slope
    138. spacing
    139. specularConstant
    140. specularExponent
    141. spreadMethod
    142. startOffset
    143. stdDeviation
    144. stitchTiles
    145. stop-color
    146. stop-opacity
    147. stroke
    148. stroke-dasharray
    149. stroke-dashoffset
    150. stroke-linecap
    151. stroke-linejoin
    152. stroke-miterlimit
    153. stroke-opacity
    154. stroke-width
    155. style
    156. surfaceScale
    157. SVG attribute: crossorigin
    158. systemLanguage
    159. tabindex
    160. tableValues
    161. target
    162. targetX
    163. targetY
    164. text-anchor
    165. text-decoration
    166. text-rendering
    167. textLength
    168. to
    169. transform
    170. transform-origin
    171. type
    172. unicode-bidi
    173. values
    174. vector-effect
    175. version 非推奨;
    176. viewBox
    177. visibility
    178. width
    179. word-spacing
    180. writing-mode
    181. x
    182. x1
    183. x2
    184. xChannelSelector
    185. xlink:arcrole 非推奨;
    186. xlink:href 非推奨;
    187. xlink:show 非推奨;
    188. xlink:title 非推奨;
    189. xlink:type 非推奨;
    190. xml:lang 非推奨;
    191. xml:space 非推奨;
    192. y
    193. y1
    194. y2
    195. yChannelSelector
    196. z
    197. zoomAndPan 非推奨;

この記事では

  • 関連情報

SVG チュートリアル

このページでは、 SVG のチュートリアルを紹介しています。

SVG チュートリアル

変倍可能ベクターグラフィック (Scalable Vector Graphics, SVG) は、グラフィックをマークアップするための W3C の XML 派生言語です。

関連情報

  • SVG ガイド
  • SVG リファレンス

Help improve MDN

Learn how to contribute.

This page was last modified on 2025年4月1日 by MDN contributors.

View this page on GitHub • Report a problem with this content
MDN logo

Your blueprint for a better internet.

  • MDN on Bluesky
  • MDN on Mastodon
  • MDN on X (formerly Twitter)
  • MDN on GitHub
  • MDN Blog RSS Feed

MDN

  • About
  • Blog
  • Careers
  • Advertise with us

Support

  • Product help
  • Report an issue

Our communities

  • MDN Community
  • MDN Forum
  • MDN Chat

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under a Creative Commons license.