一、SVG：可缩放矢量图形
开始学习 SVG
可缩放矢量图形（Scalable Vector Graphics，SVG）基于 XML 标记语言，用于描述二维的矢量图形。
作为一个基于文本的开放网络标准，SVG 能够优雅而简洁地渲染不同大小的图形，并和 CSS、DOM、JavaScript 和 SMIL 等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。
SVG 图像及其相关行为被定义于 XML 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。
和传统的点阵图像模式（如 JPEG 和 PNG）不同的是，SVG 格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容，无需图形编辑器。通过使用合适的库进行配合，SVG 文件甚至可以随时进行本地化。
SVG 是由万维网联盟（W3C）自 1999 年开始开发的开放标准。
其他内容请查阅 SVG 教程。
文档
SVG 元素参考
了解每一种 SVG 元素的细节。
SVG 属性参考
了解每一种 SVG 属性的细节。
SVG DOM 接口参考
了解有关 SVG DOM API 的全部细节。
SVG：可缩放矢量图形 | MDN (mozilla.org)
前端测试用例：
<!DOCTYPE html>
<html>
<body><svg xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /><line x1="0" y1="80" x2="100" y2="20" stroke="black" />
</svg> </body>
</html>二、<svg>对应c++接口定义：
1、<svg>对应svg_tag_names.json5
third_party\blink\renderer\core\svg\svg_tag_names.json5 文件里面定义了所有对象元素：
{metadata: {namespace: "SVG",namespaceURI: "http://www.w3.org/2000/svg",fallbackInterfaceName: "SVGUnknownElement",fallbackJSInterfaceName: "SVGElement",export: "CORE_EXPORT",},data: ["a",{name: "animate",noTypeHelpers: true,},{name: "animateColor",JSInterfaceName: "SVGElement",interfaceName: "SVGUnknownElement",noConstructor: true,},"animateMotion","animateTransform","set","circle","clipPath","defs","desc","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","foreignObject","g","image","line","linearGradient","marker","mask","metadata",{name: "mpath",interfaceName: "SVGMPathElement",},"path","pattern","polygon","polyline","radialGradient","rect",{name: "script",constructorNeedsCreateElementFlags: true,},"stop",{name: "style",constructorNeedsCreateElementFlags: true,},{name: "svg",interfaceName: "SVGSVGElement",},"switch","symbol","text","textPath","title",{name: "tspan",interfaceName: "SVGTSpanElement",},"use","view",],
}
2、元素对应都在以下两个文件下 包含"svg"关键字的。
src\third_party\blink\renderer\core\svg
src\out\Debug\gen\third_party\blink\renderer\bindings\core\v8
三、本文以<line>和<circle>为例：
1、<line>接口定义：
third_party\blink\renderer\core\svg\svg_line_element.idl
// https://svgwg.org/svg2-draft/shapes.html#InterfaceSVGLineElement[Exposed=Window]
interface SVGLineElement : SVGGeometryElement {[MeasureAs=SVG1DOMShape] readonly attribute SVGAnimatedLength x1;[MeasureAs=SVG1DOMShape] readonly attribute SVGAnimatedLength y1;[MeasureAs=SVG1DOMShape] readonly attribute SVGAnimatedLength x2;[MeasureAs=SVG1DOMShape] readonly attribute SVGAnimatedLength y2;
};
third_party\blink\renderer\core\svg\svg_line_element.h
third_party\blink\renderer\core\svg\svg_line_element.cc
out\Debug\gen\third_party\blink\renderer\bindings\core\v8\v8_svg_line_element.h
out\Debug\gen\third_party\blink\renderer\bindings\core\v8\v8_svg_line_element.cc
2、<circle>接口定义：
third_party\blink\renderer\core\svg\svg_circle_element.idl
// https://svgwg.org/svg2-draft/shapes.html#InterfaceSVGCircleElement[Exposed=Window]
interface SVGCircleElement : SVGGeometryElement {[MeasureAs=SVG1DOMShape] readonly attribute SVGAnimatedLength cx;[MeasureAs=SVG1DOMShape] readonly attribute SVGAnimatedLength cy;[MeasureAs=SVG1DOMShape] readonly attribute SVGAnimatedLength r;
};
third_party\blink\renderer\core\svg\svg_circle_element.h
third_party\blink\renderer\core\svg\svg_circle_element.cc
out\Debug\gen\third_party\blink\renderer\bindings\core\v8\v8_svg_circle_element.h
out\Debug\gen\third_party\blink\renderer\bindings\core\v8\v8_svg_circle_element.cc