用HTML内联SVG实现精美徽标需结构清晰、视觉可控、响应友好：通过viewBox保证缩放不变形，CSS控制显示尺寸；支持原生渐变与滤镜提升质感；用CSS变量统一管理品牌色并可JS动态修改；text+tspan精确排版中文，兼顾字体与字距。
用 HTML 内联 SVG 实现精美徽标，核心在于结构清晰、视觉可控、响应友好。不依赖图片文件，所有图形、颜色、渐变、滤镜都写在代码里，既轻量又可编程。
用 viewBox 保证缩放不变形
避免只设 width/height 导致拉伸失真。正确做法是固定逻辑画布尺寸，用 viewBox 定义坐标系：
-
<svg viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg">—— 所有内部元素按 0–200×0–60 坐标布局 - 再通过 CSS 控制实际显示尺寸：
svg { width: 100%; max-width: 240px; height: auto; } - 这样在手机和桌面端都能保持比例与清晰度，文字不会模糊，曲线不会锯齿
用 渐变与滤镜 提升质感
纯色填充显得单薄，SVG 支持原生渐变与 SVG 滤镜，无需外部资源：
- 定义线性渐变：
<linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#6a5acd"/><stop offset="100%" stop-color="#4776e6"/></linearGradient> - 给文字或形状填色：
fill="url(#logoGrad)" - 加水墨纹理效果：
<filter id="ink"><feTurbulence type="fractalNoise" baseFrequency="0.03"/><feDisplacementMap scale="2" in="SourceGraphic"/></filter>，再用filter="url(#ink)"应用
用 CSS 变量统一控制品牌色
方便多处复用、主题切换，也利于后期维护：
立即学习“前端免费学习笔记（深入）”；
- 在
:root中声明：--brand-primary: #0f766e; --brand-accent: #dc2626; - SVG 内部直接引用：
<text fill="var(--brand-primary)">LOGO</text> - JavaScript 动态换色：
document.documentElement.style.setProperty('--brand-primary', '#3b82f6'); - 注意：CSS 变量需搭配内联 SVG 使用，
或
用 text + tspan 精确排版中文
中文字体易出现字距异常或基线偏移，
- 设置整体锚点：
text-anchor="middle" dominant-baseline="central" - 用
分字控制： <tspan dx="-2">公</tspan><tspan dx="0">子</tspan><tspan dx="3" font-size="52">云</tspan> - 避免 letter-spacing 过大，设为
letter-spacing="normal"或具体像素值（如letter-spacing="1px"） - 推荐中文字体栈：
font-family="PingFang SC, Microsoft YaHei, sans-serif"
