← 返回首页
Tutorial de SVG - SVG | MDN
HTML

HTML: Markup language

HTML reference HTML guides Markup languages
CSS

CSS: Styling language

CSS reference CSS guides Layout cookbook
JavaScriptJS

JavaScript: Scripting language

JS reference JS guides
Web APIs

Web APIs: Programming interfaces

Web API reference Web API guides
All

All web technology

Technologies Topics
Learn

Learn web development

Frontend developer course Learn HTML Learn CSS Learn JavaScript
Tools

Discover our tools

About

Get to know MDN better

Blog
Toggle sidebar
  1. Tecnología web para desarrolladores
  2. SVG
  3. Tutorials
  4. Tutorial de SVG
Theme
  • OS default
  • Light
  • Dark
Español
Remember language Learn more

Esta página ha sido traducida del inglés por la comunidad. Aprende más y únete a la comunidad de MDN Web Docs.

View in English Always switch to English

Tutorial de SVG

Los graficos de vectores escalables, SVG , es un dialecto XML de W#C usado para describir graficos. Esta parcialente implementado en Firefox, Opera, WebKit , Internet Explorer y otros.

Este tutorial intenta explicar SVG a profundidad y esta elaborado con detalles tecnicos. Si quieres dibujar hermosas imagenes, podras encontrar recursos mas utiles en la Documentacion de Inkscape . Otra buena introduccion es brindada por el W3C's SVG Primer .

Presentando SVG desde cero

Los siguientes temas son más avanzados, por lo tanto deben tener sus propios tutoriales.

Scripting SVG con JavaScript

TBD

Tutorial filtros SVG

TBD

Animaciones con SMIL en SVG

TBD

Creación de fuentes en SVG

TBD

Help improve MDN

Was this page helpful to you?
Yes No
Learn how to contribute

This page was last modified on 20 jun 2025 by MDN contributors.

View this page on GitHub • Report a problem with this content
Clear filter input
  1. SVG
  2. Tutorials
  3. Introducing SVG from scratch
    1. Introducción
    2. Getting Started
    3. Positions
    4. Basic shapes
    5. Paths
    6. Fills and strokes
    7. Gradients in SVG
    8. Patterns
    9. Texts
    10. Basic transformations
    11. Clipping and masking
    12. Other content in SVG
    13. Filter effects
    14. Using fonts in SVG
    15. SVG image element
    16. Tools for SVG
    17. SVG and CSS
  4. Guides
    1. Content type
    2. Linking
    3. Namespaces crash course
    4. Scripting
    5. SVG animation with SMIL
    6. SVG as an image
    7. Aplicación de efectos de SVG para el contenido HTML
    8. SVG filters
    9. SVG in HTML introduction
  6. Reference
  7. Elements
    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>
  8. Attributes
    1. accumulate
    2. additive
    3. alignment-baseline
    4. amplitude
    5. attributeName
    6. attributeType
    7. autofocus
    8. azimuth
    9. baseFrequency
    10. baseline-shift
    11. baseProfile
    12. begin
    13. bias
    14. by
    15. calcMode
    16. class
    17. clip
    18. clip-path
    19. clip-rule
    20. clipPathUnits
    21. color
    22. color-interpolation
    23. color-interpolation-filters
    24. crossorigin
    25. cursor
    26. cx
    27. cy
    28. d
    29. data-*
    30. decoding
    31. diffuseConstant
    32. direction
    33. display
    34. divisor
    35. dominant-baseline
    36. download
    37. dur
    38. dx
    39. dy
    40. edgeMode
    41. elevation
    42. end
    43. exponent
    44. fetchpriority
    45. fill
    46. fill-opacity
    47. fill-rule
    48. filter
    49. filterUnits
    50. flood-color
    51. flood-opacity
    52. font-family
    53. font-size
    54. font-size-adjust
    55. font-stretch
    56. font-style
    57. font-variant
    58. font-weight
    59. font-width
    60. fr
    61. from
    62. fx
    63. fy
    64. glyph-orientation-horizontal
    65. glyph-orientation-vertical
    66. gradientTransform
    67. gradientUnits
    68. height
    69. href
    70. id
    71. image-rendering
    72. in
    73. in2
    74. intercept
    75. k1
    76. k2
    77. k3
    78. k4
    79. kernelMatrix
    80. kernelUnitLength
    81. keyPoints
    82. keySplines
    83. keyTimes
    84. lang
    85. lengthAdjust
    86. letter-spacing
    87. lighting-color
    88. limitingConeAngle
    89. marker-end
    90. marker-mid
    91. marker-start
    92. markerHeight
    93. markerUnits
    94. markerWidth
    95. mask
    96. mask-type
    97. maskContentUnits
    98. maskUnits
    99. max
    100. media
    101. method
    102. min
    103. mode
    104. numOctaves
    105. opacity
    106. operator
    107. order
    108. orient
    109. origin
    110. overflow
    111. paint-order
    112. path
    113. pathLength
    114. patternContentUnits
    115. patternTransform
    116. patternUnits
    117. pointer-events
    118. points
    119. pointsAtX
    120. pointsAtY
    121. pointsAtZ
    122. preserveAlpha
    123. preserveAspectRatio
    124. primitiveUnits
    125. r
    126. radius
    127. refX
    128. refY
    129. repeatCount
    130. repeatDur
    131. requiredExtensions
    132. requiredFeatures
    133. restart
    134. result
    135. rotate
    136. rx
    137. ry
    138. scale
    139. seed
    140. shape-rendering
    141. side
    142. slope
    143. spacing
    144. specularConstant
    145. specularExponent
    146. spreadMethod
    147. startOffset
    148. stdDeviation
    149. stitchTiles
    150. stop-color
    151. stop-opacity
    152. stroke
    153. stroke-dasharray
    154. stroke-dashoffset
    155. stroke-linecap
    156. stroke-linejoin
    157. stroke-miterlimit
    158. stroke-opacity
    159. stroke-width
    160. style
    161. surfaceScale
    162. systemLanguage
    163. tabindex
    164. tableValues
    165. target
    166. targetX
    167. targetY
    168. text-anchor
    169. text-decoration
    170. text-overflow
    171. text-rendering
    172. textLength
    173. to
    174. transform
    175. transform-origin
    176. type
    177. unicode-bidi
    178. values
    179. vector-effect
    180. version
    181. viewBox
    182. visibility
    183. white-space
    184. width
    185. word-spacing
    186. writing-mode
    187. x
    188. x1
    189. x2
    190. xChannelSelector
    191. xlink:arcrole
    192. xlink:href
    193. xlink:show
    194. xlink:title
    195. xlink:type
    196. xml:lang
    197. xml:space
    198. y
    199. y1
    200. y2
    201. yChannelSelector
    202. z
    203. zoomAndPan

Your blueprint for a better internet.

MDN Contribute Developers

Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.