SVG：可伸缩向量图形

内容表

• SVG 快速入门
• 文档编制
• 工具
• 范例

SVG 元素

1. A
   1. <a>
   2. <altGlyph>
   3. <altGlyphDef>
   4. <altGlyphItem>
   5. <animate>
   6. <animateColor>
   7. <animateMotion>
   8. <animateTransform>
2. B-C
   1. <circle>
   2. <clipPath>
   3. <color-profile>
   4. <cursor>
3. D
   1. <defs>
   2. <desc>
4. E
   1. <ellipse>
5. F
   1. <feBlend>
   2. <feColorMatrix>
   3. <feComponentTransfer>
   4. <feComposite>
   5. <feConvolveMatrix>
   6. <feDiffuseLighting>
   7. <feDisplacementMap>
   8. <feDistantLight>
   9. <feFlood>
   10. <feFuncA>
   11. <feFuncB>
   12. <feFuncG>
   13. <feFuncR>
   14. <feGaussianBlur>
   15. <feImage>
   16. <feMerge>
   17. <feMergeNode>
   18. <feMorphology>
   19. <feOffset>
   20. <fePointLight>
   21. <feSpecularLighting>
   22. <feSpotLight>
   23. <feTile>
   24. <feTurbulence>
   25. <filter>
   26. <font>
   27. <font-face>
   28. <font-face-format>
   29. <font-face-name>
   30. <font-face-src>
   31. <font-face-uri>
   32. <foreignObject>
6. G
   1. <g>
   2. <glyph>
   3. <glyphRef>
7. H
   1. <hkern>
8. I
   1. <image>
9. J-L
   1. <line>
   2. <linearGradient>
10. M
    1. <marker>
    2. <mask>
    3. <metadata>
    4. <missing-glyph>
    5. <mpath>
11. N-P
    1. <path>
    2. <pattern>
    3. <polygon>
    4. <polyline>
12. Q-R
    1. <radialGradient>
    2. <rect>
13. S
    1. <script>
    2. <set>
    3. <stop>
    4. <style>
    5. <svg>
    6. <switch>
    7. <symbol>
14. T
    1. <text>
    2. <textPath>
    3. <title>
    4. <tref>
    5. <tspan>
15. U
    1. <use>
16. V-Z
    1. <view>
    2. <vkern>

SVG 快速入门

SVG (可伸缩向量图形) 是 XML -based markup language for describing two-dimensional based vector graphics .

As such, it's a text-based, open Web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including CSS , DOM , JavaScript ，和 SMIL . SVG is, essentially, to graphics what HTML is to text.

SVG images and their related behaviors are defined in XML text files, which means they can be searched, indexed, scripted, and compressed. Additionally, this means they can be created and edited with any text editor or with drawing software.

Compared to classic bitmapped image formats such as JPEG or PNG , SVG-format vector images can be rendered at any size without loss of quality and can be easily localized by updating the text within them, without the need of a graphical editor to do so. With proper libraries, SVG files can even be localized on-the-fly.

SVG has been developed by the World Wide Web Consortium (W3C) since 1999.

另请参阅， SVG 教程

文档编制

SVG 元素参考

Details about each SVG element.

SVG 属性参考

Details about each SVG attribute.

SVG DOM interface reference

Details about the SVG DOM API, for interaction with JavaScript.

Applying SVG effects to HTML content

SVG works together with HTML , CSS and JavaScript . Use SVG to enhance a regular HTML page or web application .

工具

• SVG 测试套件
• Markup Validator

范例

• SVG authoring guidelines
• SVG as an image
• SVG animation with SMIL
• SVG art gallery
• D3 (JavaScript library for visualizing data with HTML, SVG, and CSS)

Found a problem with this page?

• Edit on GitHub
• Source on GitHub
• Report a problem with this content on GitHub
• Want to fix the problem yourself? See our Contribution guide .

最后修改： Sep 23, 2021 , 由 MDN 贡献者