直接在html中写标签是最常用且最灵活的嵌入方式，使svg成为dom节点，支持css样式、javascript交互和响应式缩放；需设置width、height和viewbox，并保留从到的完整闭合结构。

直接在 HTML 文件里写 `

一、基础嵌入：用 `

SVG 是基于 XML 的标记，浏览器原生支持，无需额外加载库。关键点是设置 `width` 和 `height` 属性来定义可视区域大小，同时建议加上 `xmlns` 命名空间（虽然现代浏览器常可省略，但显式声明更稳妥）：

• 把 `
  ` 内或直接作为子元素
• 推荐设置 `width` 和 `height`（单位为像素或百分比），不依赖 CSS 缩放，避免模糊
• 可加 `viewBox="0 0 width height"` 实现响应式缩放（例如 `
• 坐标系原点（0,0）默认在左上角，x 向右增大，y 向下增大

二、绘制基础图形：几个常用元素

所有图形都写在 `


Doc To HTML
使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。
下载
• 矩形 ``：用 `x`, `y` 定位左上角，`width`, `height` 设大小，`fill` 填色，`stroke` 描边，`stroke-width` 控制边框粗细
• 圆形 ``：`cx`, `cy` 是圆心坐标，`r` 是半径，`fill` 和 `stroke` 同样适用
• 椭圆 ``：`cx`, `cy` 是中心，`rx`, `ry` 分别是 x/y 方向半轴长
• 直线 ``：`x1`, `y1`, `x2`, `y2` 定义起点与终点
• 多边形 ``：`points` 属性填入一组坐标对，如 `"0,0 50,0 50,50"`
• 路径 ``：最强大，用 `d` 属性写指令，如 `M10,10 L50,10 L30,50 Z` 表示一个三角形

三、样式控制：CSS 或内联 style 都行

SVG 元素支持大部分 CSS 属性，且优先级与 HTML 一致。常用视觉属性包括：

• `fill`：填充颜色（支持 hex、rgb、named color，甚至 `none` 表示透明）
• `stroke`：描边颜色；`stroke-width`：描边粗细（单位 px，默认为 1）
• `opacity`：整体透明度（0–1）；`fill-opacity` / `stroke-opacity` 可单独控制
• 可用外部 CSS 类选择器，例如 `` 配合 `.icon-dot { fill: #3498db; }`

四、实际小例子：一个带描边的蓝色圆

复制到 HTML 文件中即可运行：


  


这个圆居中显示，直径 80px，有 4px 深蓝描边，整个 SVG 区域为 120×120 像素，清晰可缩放，无像素损失。