3款免费工具实测：零代码做韦恩图网站，W3C标准保排名
想做个能画韦恩图的网站，但看着后台代码就头疼？这种“自己不会代码想做网站”的焦虑，我见过太多站长踩过坑。别慌，现在完全不需要你手写一行前端逻辑。
我花了两周时间，把市面上主流的免费工具和开源方案扒了个底朝天。从纯静态托管到动态后端渲染，再到直接嵌入第三方API，我把这三条路都走了一遍。
结论很直接：如果你追求极致的SEO友好和加载速度，选“静态生成+JS库”方案；如果你需要用户实时交互且不想维护服务器，选“Serverless函数”方案。
这篇文章不吹不黑，全是实操干货。我会对比三种技术栈的优劣，给出具体代码，告诉你怎么在遵守W3C 标准的前提下，让搜索引擎抓取你的韦恩图页面。
方案一：静态站点生成器 + D3.js 本地渲染
这是最推荐给独立站长的方案。为什么？因为你的韦恩图是数据驱动的，而数据通常变化不频繁（比如公司架构、产品功能对比）。
核心逻辑：
使用 Next.js 或 Astro 等静态站点生成器，在构建时（Build Time）将韦恩图的数据结构转换成 SVG 或 Canvas 代码，直接输出到 HTML 文件中。用户打开页面时，浏览器直接解析 SVG，无需等待复杂的 JS 执行。
优势：加载速度极快：首屏渲染无白屏，Lighthouse 性能分轻松破90。
SEO 友好：SVG 标签内的 title 和 desc 属性会被搜索引擎索引，这是纯 Canvas 方案做不到的。
维护成本低：无需数据库，部署到 Vercel 或 Netlify 即可，每月成本为零。劣势：动态交互受限：用户无法实时修改韦恩图的元素并立即看到结果，除非你重新提交表单触发新的静态页生成（体验较差）。
初始开发复杂度中等：需要理解 D3.js 的基本绑定逻辑。代码示例（Next.js + D3.js）：
// components/VennChart.jsx
import { useEffect, useRef } from 'react';
import * as d3 from 'd3';const VennChart = ({ data }) = {const svgRef = useRef(null);useEffect(() = {const width = 600;const height = 400;const svg = d3.select(svgRef.current).attr(viewBox, `0 0 ${width} ${height}`);// 清除旧数据svg.selectAll(*).remove();const radius = 100;const centers = [{ x: width / 2 - 50, y: height / 2 },{ x: width / 2 + 50, y: height / 2 }];// 绘制两个圆svg.selectAll(circle).data(centers).enter().append(circle).attr(cx, d = d.x).attr(cy, d = d.y).attr(r, radius).attr(fill, rgba(120, 144, 255, 0.5)).attr(stroke, black).attr(stroke-width, 2);// 添加文本标签，符合W3C无障碍标准svg.append(text).attr(x, width / 2 - 80).attr(y, height / 2 + 5).attr(text-anchor, middle).text(data.labelA);svg.append(text).attr(x, width / 2 + 80).attr(y, height / 2 + 5).attr(text-anchor, middle).text(data.labelB);}, [data]);return (svg ref={svgRef} role=img aria-label=韦恩图对比展示title{data.title}/title/svg);
};export default VennChart;适用场景：
企业官网的功能对比页、教育类网站的概念解释页、博客文章中的固定数据可视化。
方案二：Serverless 函数 + 动态 API 接口
如果你希望用户能在网站上输入自己的数据，点击按钮立即生成韦恩图，静态方案就够呛了。这时候需要后端介入，但为了省钱，我们不用买服务器，用 AWS Lambda 或 Vercel Edge Functions。
核心逻辑：
前端发送 JSON 数据到 Serverless 函数，函数计算韦恩图几何参数（圆心的距离、半径），返回 SVG 字符串或 Base64 图片，前端插入 DOM。
优势：真正的动态交互：用户输入什么，就画什么，体验流畅。
按量付费：免费额度内（如 AWS Lambda 每月100万次调用）几乎零成本。
逻辑解耦：计算逻辑在后端，前端只负责展示，安全性更好。劣势：冷启动延迟：第一次请求可能会有200-500ms的延迟。
SEO 风险：如果页面内容全靠 JS 动态加载，Google 的爬虫虽然能执行 JS，但权重分配不如静态 HTML 稳定。需要做好 SSR（服务端渲染）或 SSG（静态生成）兜底。代码示例（Vercel Edge Function + TypeScript）：
// api/generate-venn.ts
import { NextApiRequest, NextApiResponse } from 'next';export default function handler(req: NextApiRequest, res: NextApiResponse) {if (req.method !== 'POST') {res.setHeader('Allow', 'POST');res.status(405).end('Method Not Allowed');return;}const { labelA, labelB, overlap } = req.body;// 简单的几何计算：根据重叠程度调整圆心距离const maxDistance = 200;const distance = maxDistance * (1 - overlap); const cx1 = 150 - distance / 2;const cx2 = 150 + distance / 2;const cy = 100;const r = 80;const svgString = `svg xmlns=http://www.w3.org/2000/svg width=300 height=200 viewBox=0 0 300 200circle cx=${cx1} cy=${cy} r=${r} fill=rgba(120, 144, 255, 0.5) /circle cx=${cx2} cy=${cy} r=${r} fill=rgba(255, 120, 144, 0.5) /text x=${cx1 - 30} y=${cy + 5} font-family=Arial font-size=14${labelA}/texttext x=${cx2 + 30} y=${cy + 5} font-family=Arial font-size=14${labelB}/text/svg`;res.status(200).json({ svg: svgString });
}适用场景：
在线工具网站、SaaS 平台的配置页面、需要用户上传数据并即时反馈的场景。
方案三：第三方 SaaS API 嵌入（最快上手）
如果你连 Serverless 函数都不想写，只想花10分钟搞定，那就用现成的可视化平台 API。例如 Highcharts、Chart.js 的云服务，或者专门的 Infogram API。
核心逻辑：
注册账号，获取 API Key，在前端通过 script 标签引入 SDK，调用 chart.render() 方法。
优势：零开发成本：复制粘贴文档里的代码片段即可运行。
功能强大：自带动画、导出图片、主题切换等高级功能。
官方维护：无需担心浏览器兼容性，厂商已处理。劣势：依赖外部服务：如果对方 API 挂了，你的网站图表就挂了。
隐私顾虑：你的用户数据可能会经过第三方的服务器（需注意 GDPR 合规）。
免费版限制：通常有品牌水印、调用次数限制或功能阉割。代码示例（Chart.js + Highcharts API 风格模拟）：
!-- index.html --
script src=https://cdn.jsdelivr.net/npm/chart.js/script
scriptconst ctx = document.getElementById('vennChart').getContext('2d');// 注意：Chart.js 原生不支持韦恩图，这里模拟使用插件或简化版// 实际项目中建议使用专门的 Venn.js 库或 Highchartsnew Chart(ctx, {type: 'bubble', // 使用气泡图模拟重叠效果，仅作演示data: {datasets: [{data: [{x: 150, y: 100, r: 80, label: 'A'},{x: 200, y: 100, r: 80, label: 'B'}],backgroundColor: 'rgba(120, 144, 255, 0.5)'}]},options: {scales: {x: { display: false },y: { display: false }},plugins: {legend: { display: false },title: { display: true, text: '韦恩图示例' }}}});
/script
canvas id=vennChart/canvas适用场景：
快速原型验证、对数据隐私要求不高的小型项目、非核心功能的展示页面。
核心差异对比表
为了让你更直观地选择，我把三个方案的关键维度整理成了下表：维度
方案一：静态+D3.js
方案二：Serverless+API
方案三：第三方SaaS API开发难度
中等（需懂JS/React）
中等（需懂TS/HTTP）
低（复制粘贴）月成本
$0 (Vercel Free Tier)
$0 (Lambda Free Tier)
$0-$10 (视用量)SEO 友好度
极高 (SVG内联)
中等 (需SSR兜底)
低 (依赖JS执行)动态交互性
低 (仅构建时更新)
高 (实时计算)
高 (客户端渲染)维护复杂度
低
中
极低数据隐私
好 (数据本地)
好 (数据在云厂商)
差 (数据经第三方)W3C 合规性
易控制 (语义化标签)
易控制 (标准JSON)
依赖第三方SDK质量实操步骤与上线优化
不管选哪个方案，想要网站在 Google 和百度上获得好排名，以下细节必须做到：
1. 语义化 HTML 结构
很多站长为了省事，把图表放在一个空的 div 里。这是大忌。
务必使用 figure 和 figcaption 标签包裹你的韦恩图。
figuresvg.../svg !-- 你的图表代码 --figcaptionstrong图1：A产品与B功能的重叠分析/strong这张韦恩图展示了A产品在2026年的核心能力与B功能的交集部分，重点关注中间重叠区域的“智能推荐”模块。/figcaption
/figure这种结构完全符合 W3C 标准，不仅对人类读者友好，对屏幕阅读器（无障碍访问）也是加分项，间接提升 SEO 权重。
2. 图片替代方案 (No-JS Fallback)
万一用户浏览器禁用了 JavaScript，或者爬虫抓取时 JS 未执行，你应该提供一个静态图片作为备选。
在代码中，检测 window.navigator.userAgent 或监听 JS 错误，如果图表未渲染，则显示一张预生成的 PNG 图片，并加上 alt 属性：
img src=/fallback/venn-a-b.png alt=A产品与B功能韦恩图对比，显示重叠区域为智能推荐 loading=lazy /3. 性能优化：代码分割
韦恩图涉及的 JS 库（如 D3.js）体积不小。不要把它们打包进主 bundle。
在 Next.js 中，使用 dynamic import：
import dynamic from 'next/dynamic';const VennChart = dynamic(() = import('../components/VennChart'), {ssr: false, // 如果纯客户端渲染loading: () = p正在加载图表.../p
});这样，用户只有在滚动到图表区域时，才会加载这部分 JS，显著降低首屏时间。
4. 移动端适配
韦恩图在小屏幕上容易拥挤。务必设置 viewBox 并使用 CSS width: 100%; height: auto;。
同时，在小屏幕下，考虑将圆形缩小或允许用户横向滑动查看。
选型建议：你到底该选哪个？
回到最初的问题：你是独立站长，预算有限，想做一个做韦恩图的网站。
如果你是一个内容型博主或企业官网：
坚定选择方案一（静态站点 + D3.js）。
理由：你的韦恩图数据是固定的（比如对比自家产品）。静态生成的 HTML 对搜索引擎最友好，加载最快，而且你不需要维护任何后端服务。部署在 Vercel 上，全球 CDN 加速，用户体验极佳。这是性价比最高的选择。
如果你是一个工具型网站，用户需要自定义数据：
选择方案二（Serverless 函数）。
理由：动态交互是核心卖点。Serverless 架构让你免去了运维服务器的痛苦，免费额度足够支撑初期的流量。记住，一定要做好 SSR 兜底，确保 Google 能抓取到初始的静态框架。
如果你只是想在文章里插个图，不想折腾代码：
选择方案三（第三方 SaaS）。
理由：省时间是最大的价值。只要你不涉及敏感数据，且能接受免费版的限制，这是最快上线的方式。但长期来看，建议迁移到自研方案，以避免被第三方绑架。
避坑指南：那些没人告诉你的坑别用 Canvas 做 SEO：Canvas 是一张大图，搜索引擎看不懂里面的内容。除非你给 Canvas 加上详细的 aria-label 并提供 alt 文本，否则优先选 SVG。
注意 CORS 问题：如果你用方案二，前端调用 API 时，务必在后端设置 Access-Control-Allow-Origin 头，否则浏览器会拦截请求。
数据验证：用户输入的 overlap 值必须在 0 到 1 之间。在前端和后端都要做校验，防止恶意输入导致后端计算崩溃。
HTTPS 强制：无论哪种方案，都必须部署 SSL 证书。现在是 2026 年，HTTP 网站会被浏览器标记为“不安全”，严重影响点击率。写在最后
做韦恩图的网站，技术本身不是门槛，如何平衡开发成本、SEO 效果和用户体验才是。
我见过太多站长，花了三天时间研究 D3.js 的动画效果，结果页面加载慢了 2 秒，跳出率飙升。也见过站长直接嵌个 iframe，结果 SEO 权重全丢。
记住：简单，就是最高级的技术选型。
如果你还在纠结，不妨先问自己一个问题：我的用户，是真的需要“玩”这个韦恩图，还是只需要“看”懂这个关系？
如果是“看”，静态 SVG 永远的神。
如果是“玩”，Serverless 才是王道。
建站花了多少钱？留言说说真实价格，看看大家都是怎么控制成本的，或许能给你一些新的灵感。 3款免费工具实测：零代码做韦恩图网站，W3C标准保排名
想做个能画韦恩图的网站，但看着后台代码就头疼？这种“自己不会代码想做网站”的焦虑，我见过太多站长踩过坑。别慌，现在完全不需要你手写一行前端逻辑。
我花了两周时间，把市面上主流的免费工具和开源方案扒了个底朝天。从纯静态托管到动态后端渲染，再到直接嵌入第三方API，我把这三条路都走了一遍。
结论很直接：如果你追求极致的SEO友好和加载速度，选“静态生成+JS库”方案；如果你需要用户实时交互且不想维护服务器，选“Serverless函数”方案。
这篇文章不吹不黑，全是实操干货。我会对比三种技术栈的优劣，给出具体代码，告诉你怎么在遵守W3C 标准的前提下，让搜索引擎抓取你的韦恩图页面。
方案一：静态站点生成器 + D3.js 本地渲染
这是最推荐给独立站长的方案。为什么？因为你的韦恩图是数据驱动的，而数据通常变化不频繁（比如公司架构、产品功能对比）。
核心逻辑：
使用 Next.js 或 Astro 等静态站点生成器，在构建时（Build Time）将韦恩图的数据结构转换成 SVG 或 Canvas 代码，直接输出到 HTML 文件中。用户打开页面时，浏览器直接解析 SVG，无需等待复杂的 JS 执行。
优势：加载速度极快：首屏渲染无白屏，Lighthouse 性能分轻松破90。
SEO 友好：SVG 标签内的 title 和 desc 属性会被搜索引擎索引，这是纯 Canvas 方案做不到的。
维护成本低：无需数据库，部署到 Vercel 或 Netlify 即可，每月成本为零。劣势：动态交互受限：用户无法实时修改韦恩图的元素并立即看到结果，除非你重新提交表单触发新的静态页生成（体验较差）。
初始开发复杂度中等：需要理解 D3.js 的基本绑定逻辑。代码示例（Next.js + D3.js）：
// components/VennChart.jsx
import { useEffect, useRef } from 'react';
import * as d3 from 'd3';const VennChart = ({ data }) = {const svgRef = useRef(null);useEffect(() = {const width = 600;const height = 400;const svg = d3.select(svgRef.current).attr(viewBox, `0 0 ${width} ${height}`);// 清除旧数据svg.selectAll(*).remove();const radius = 100;const centers = [{ x: width / 2 - 50, y: height / 2 },{ x: width / 2 + 50, y: height / 2 }];// 绘制两个圆svg.selectAll(circle).data(centers).enter().append(circle).attr(cx, d = d.x).attr(cy, d = d.y).attr(r, radius).attr(fill, rgba(120, 144, 255, 0.5)).attr(stroke, black).attr(stroke-width, 2);// 添加文本标签，符合W3C无障碍标准svg.append(text).attr(x, width / 2 - 80).attr(y, height / 2 + 5).attr(text-anchor, middle).text(data.labelA);svg.append(text).attr(x, width / 2 + 80).attr(y, height / 2 + 5).attr(text-anchor, middle).text(data.labelB);}, [data]);return (svg ref={svgRef} role=img aria-label=韦恩图对比展示title{data.title}/title/svg);
};export default VennChart;适用场景：
企业官网的功能对比页、教育类网站的概念解释页、博客文章中的固定数据可视化。
方案二：Serverless 函数 + 动态 API 接口
如果你希望用户能在网站上输入自己的数据，点击按钮立即生成韦恩图，静态方案就够呛了。这时候需要后端介入，但为了省钱，我们不用买服务器，用 AWS Lambda 或 Vercel Edge Functions。
核心逻辑：
前端发送 JSON 数据到 Serverless 函数，函数计算韦恩图几何参数（圆心的距离、半径），返回 SVG 字符串或 Base64 图片，前端插入 DOM。
优势：真正的动态交互：用户输入什么，就画什么，体验流畅。
按量付费：免费额度内（如 AWS Lambda 每月100万次调用）几乎零成本。
逻辑解耦：计算逻辑在后端，前端只负责展示，安全性更好。劣势：冷启动延迟：第一次请求可能会有200-500ms的延迟。
SEO 风险：如果页面内容全靠 JS 动态加载，Google 的爬虫虽然能执行 JS，但权重分配不如静态 HTML 稳定。需要做好 SSR（服务端渲染）或 SSG（静态生成）兜底。代码示例（Vercel Edge Function + TypeScript）：
// api/generate-venn.ts
import { NextApiRequest, NextApiResponse } from 'next';export default function handler(req: NextApiRequest, res: NextApiResponse) {if (req.method !== 'POST') {res.setHeader('Allow', 'POST');res.status(405).end('Method Not Allowed');return;}const { labelA, labelB, overlap } = req.body;// 简单的几何计算：根据重叠程度调整圆心距离const maxDistance = 200;const distance = maxDistance * (1 - overlap); const cx1 = 150 - distance / 2;const cx2 = 150 + distance / 2;const cy = 100;const r = 80;const svgString = `svg xmlns=http://www.w3.org/2000/svg width=300 height=200 viewBox=0 0 300 200circle cx=${cx1} cy=${cy} r=${r} fill=rgba(120, 144, 255, 0.5) /circle cx=${cx2} cy=${cy} r=${r} fill=rgba(255, 120, 144, 0.5) /text x=${cx1 - 30} y=${cy + 5} font-family=Arial font-size=14${labelA}/texttext x=${cx2 + 30} y=${cy + 5} font-family=Arial font-size=14${labelB}/text/svg`;res.status(200).json({ svg: svgString });
}适用场景：
在线工具网站、SaaS 平台的配置页面、需要用户上传数据并即时反馈的场景。
方案三：第三方 SaaS API 嵌入（最快上手）
如果你连 Serverless 函数都不想写，只想花10分钟搞定，那就用现成的可视化平台 API。例如 Highcharts、Chart.js 的云服务，或者专门的 Infogram API。
核心逻辑：
注册账号，获取 API Key，在前端通过 script 标签引入 SDK，调用 chart.render() 方法。
优势：零开发成本：复制粘贴文档里的代码片段即可运行。
功能强大：自带动画、导出图片、主题切换等高级功能。
官方维护：无需担心浏览器兼容性，厂商已处理。劣势：依赖外部服务：如果对方 API 挂了，你的网站图表就挂了。
隐私顾虑：你的用户数据可能会经过第三方的服务器（需注意 GDPR 合规）。
免费版限制：通常有品牌水印、调用次数限制或功能阉割。代码示例（Chart.js + Highcharts API 风格模拟）：
!-- index.html --
script src=https://cdn.jsdelivr.net/npm/chart.js/script
scriptconst ctx = document.getElementById('vennChart').getContext('2d');// 注意：Chart.js 原生不支持韦恩图，这里模拟使用插件或简化版// 实际项目中建议使用专门的 Venn.js 库或 Highchartsnew Chart(ctx, {type: 'bubble', // 使用气泡图模拟重叠效果，仅作演示data: {datasets: [{data: [{x: 150, y: 100, r: 80, label: 'A'},{x: 200, y: 100, r: 80, label: 'B'}],backgroundColor: 'rgba(120, 144, 255, 0.5)'}]},options: {scales: {x: { display: false },y: { display: false }},plugins: {legend: { display: false },title: { display: true, text: '韦恩图示例' }}}});
/script
canvas id=vennChart/canvas适用场景：
快速原型验证、对数据隐私要求不高的小型项目、非核心功能的展示页面。
核心差异对比表
为了让你更直观地选择，我把三个方案的关键维度整理成了下表：维度
方案一：静态+D3.js
方案二：Serverless+API
方案三：第三方SaaS API开发难度
中等（需懂JS/React）
中等（需懂TS/HTTP）
低（复制粘贴）月成本
$0 (Vercel Free Tier)
$0 (Lambda Free Tier)
$0-$10 (视用量)SEO 友好度
极高 (SVG内联)
中等 (需SSR兜底)
低 (依赖JS执行)动态交互性
低 (仅构建时更新)
高 (实时计算)
高 (客户端渲染)维护复杂度
低
中
极低数据隐私
好 (数据本地)
好 (数据在云厂商)
差 (数据经第三方)W3C 合规性
易控制 (语义化标签)
易控制 (标准JSON)
依赖第三方SDK质量实操步骤与上线优化
不管选哪个方案，想要网站在 Google 和百度上获得好排名，以下细节必须做到：
1. 语义化 HTML 结构
很多站长为了省事，把图表放在一个空的 div 里。这是大忌。
务必使用 figure 和 figcaption 标签包裹你的韦恩图。
figuresvg.../svg !-- 你的图表代码 --figcaptionstrong图1：A产品与B功能的重叠分析/strong这张韦恩图展示了A产品在2026年的核心能力与B功能的交集部分，重点关注中间重叠区域的“智能推荐”模块。/figcaption
/figure这种结构完全符合 W3C 标准，不仅对人类读者友好，对屏幕阅读器（无障碍访问）也是加分项，间接提升 SEO 权重。
2. 图片替代方案 (No-JS Fallback)
万一用户浏览器禁用了 JavaScript，或者爬虫抓取时 JS 未执行，你应该提供一个静态图片作为备选。
在代码中，检测 window.navigator.userAgent 或监听 JS 错误，如果图表未渲染，则显示一张预生成的 PNG 图片，并加上 alt 属性：
img src=/fallback/venn-a-b.png alt=A产品与B功能韦恩图对比，显示重叠区域为智能推荐 loading=lazy /3. 性能优化：代码分割
韦恩图涉及的 JS 库（如 D3.js）体积不小。不要把它们打包进主 bundle。
在 Next.js 中，使用 dynamic import：
import dynamic from 'next/dynamic';const VennChart = dynamic(() = import('../components/VennChart'), {ssr: false, // 如果纯客户端渲染loading: () = p正在加载图表.../p
});这样，用户只有在滚动到图表区域时，才会加载这部分 JS，显著降低首屏时间。
4. 移动端适配
韦恩图在小屏幕上容易拥挤。务必设置 viewBox 并使用 CSS width: 100%; height: auto;。
同时，在小屏幕下，考虑将圆形缩小或允许用户横向滑动查看。
选型建议：你到底该选哪个？
回到最初的问题：你是独立站长，预算有限，想做一个做韦恩图的网站。
如果你是一个内容型博主或企业官网：
坚定选择方案一（静态站点 + D3.js）。
理由：你的韦恩图数据是固定的（比如对比自家产品）。静态生成的 HTML 对搜索引擎最友好，加载最快，而且你不需要维护任何后端服务。部署在 Vercel 上，全球 CDN 加速，用户体验极佳。这是性价比最高的选择。
如果你是一个工具型网站，用户需要自定义数据：
选择方案二（Serverless 函数）。
理由：动态交互是核心卖点。Serverless 架构让你免去了运维服务器的痛苦，免费额度足够支撑初期的流量。记住，一定要做好 SSR 兜底，确保 Google 能抓取到初始的静态框架。
如果你只是想在文章里插个图，不想折腾代码：
选择方案三（第三方 SaaS）。
理由：省时间是最大的价值。只要你不涉及敏感数据，且能接受免费版的限制，这是最快上线的方式。但长期来看，建议迁移到自研方案，以避免被第三方绑架。
避坑指南：那些没人告诉你的坑别用 Canvas 做 SEO：Canvas 是一张大图，搜索引擎看不懂里面的内容。除非你给 Canvas 加上详细的 aria-label 并提供 alt 文本，否则优先选 SVG。
注意 CORS 问题：如果你用方案二，前端调用 API 时，务必在后端设置 Access-Control-Allow-Origin 头，否则浏览器会拦截请求。
数据验证：用户输入的 overlap 值必须在 0 到 1 之间。在前端和后端都要做校验，防止恶意输入导致后端计算崩溃。
HTTPS 强制：无论哪种方案，都必须部署 SSL 证书。现在是 2026 年，HTTP 网站会被浏览器标记为“不安全”，严重影响点击率。写在最后
做韦恩图的网站，技术本身不是门槛，如何平衡开发成本、SEO 效果和用户体验才是。
我见过太多站长，花了三天时间研究 D3.js 的动画效果，结果页面加载慢了 2 秒，跳出率飙升。也见过站长直接嵌个 iframe，结果 SEO 权重全丢。
记住：简单，就是最高级的技术选型。
如果你还在纠结，不妨先问自己一个问题：我的用户，是真的需要“玩”这个韦恩图，还是只需要“看”懂这个关系？
如果是“看”，静态 SVG 永远的神。
如果是“玩”，Serverless 才是王道。
建站花了多少钱？留言说说真实价格，看看大家都是怎么控制成本的，或许能给你一些新的灵感。