3 篇文章带有标签 “svg”

SVG 渲染器是什么

SVG 渲染器是一款纯前端的在线 SVG 预览工具。它支持粘贴 SVG 代码或从 URL 加载 SVG 文件，右侧实时渲染预览，全部处理都在浏览器内完成，无需上传、无需后端。

核心功能

• 双模式输入：支持直接粘贴 SVG 代码，或输入 URL 从网络加载 SVG 文件。
• 实时预览：左侧编辑或粘贴代码，右侧即时渲染 SVG 图形，所见即所得。
• 安全沙箱渲染：使用 DOMPurify 对 SVG 进行安全过滤，并在沙箱 iframe 中渲染，防范 XSS 和恶意脚本。
• 智能宽高比：自动解析 SVG 的 viewBox 或 width/height 属性，保持正确的图形比例。
• URL 分享：通过 URL hash 加载的 SVG 地址可直接分享，他人打开即可查看同一图形。
• 响应式布局：桌面端左右分屏，移动端自动切换为上下堆叠，适配各种设备。
• 内置示例：首次打开自动加载示例 SVG，快速体验渲染效果。

使用方式

1. 打开 SVG 渲染器。
2. 点击 粘贴 标签，将 SVG 代码粘贴到左侧编辑区。
3. 或点击 URL 标签，输入 SVG 文件地址后点击 加载。
4. 右侧预览区即时显示渲染结果。

浏览器兼容性

SVG 渲染器为纯静态 HTML 页面，兼容所有现代浏览器。建议使用 Chrome、Edge、Safari 或 Firefox 最新版本。

技术栈

• HTML + CSS + JavaScript
• DOMPurify（SVG 安全过滤）
• 无后端、无依赖、纯静态页面

DOT 文件渲染器是什么

DOT 文件渲染器是一款纯前端的在线 Graphviz 图形预览工具。只需在浏览器中粘贴 DOT 语言描述的图结构代码，即可实时渲染为有向图或无向图 SVG，支持通过 URL 片段直接分享图形代码，无需安装任何本地软件。

核心功能

• 实时渲染：输入 DOT 代码后自动防抖渲染，500ms 内即时出图。
• URL 分享：图形代码自动编码到 URL 片段中，复制链接即可分享完整图形。
• 加载示例：内置完整流程图示例，一键体验渲染效果。
• 错误提示：DOT 语法错误时，在输出区显示详细错误信息。
• 纯浏览器运行：基于 Viz.js 在浏览器端完成全部渲染，无后端、无上传。

使用方式

1. 打开 DOT 文件渲染器。
2. 在输入区粘贴您的 .dot 文件内容。
3. 图形会自动渲染到下方的输出区。
4. 复制当前浏览器地址栏中的 URL 即可分享图形。

支持的图类型

• 有向图（digraph）
• 无向图（graph）
• 节点样式、边标签、布局方向（rankdir）等 Graphviz 标准属性

技术栈

• HTML + CSS + JavaScript
• Viz.js（WebAssembly 版 Graphviz）
• 无后端、无依赖、纯静态页面

提示词

我要设计一个WEB应用（HTML），在线渲染DOT文件。有什么好的思路？先分析需求，进行设计，再实现（一个html），存储到 @tools/ 目录。