前端图形学【免费下载链接】svgeditPowerful SVG-Editor for your browser项目地址https://gitcode.com/gh_mirrors/sv/svgedit点击查看免费下载导读本文围绕 SVG-edit 项目历史文档 RoundtripTests.md 展开系统讲解往返测试Roundtrip Tests这一质量保障手段它的目标是把 SVG 文档载入 SVG-edit 后立即保存再与原文档做像素级对比以此量化编辑器对 SVG 文档的还原保真度。文章不仅还原了该项目最初的托管测试架构与已知问题清单还结合当前仓库中的源码如packages/svgcanvas/core/sanitize.js、tests/unit/sanitize.test.js与测试用例说明这些问题在现代代码库中的处理进展。读完本文你将理解往返测试的评分原理、历史上暴露的三大缺陷并掌握在自有服务器上搭建一套 Roundtrip 测试环境的完整步骤。一、往返测试是什么为什么需要它1.1 背景让 SVG-edit 适合 Wikipedia往返测试最初是为了让 SVG-edit 适用于 Wikipedia而设计的。Wikimedia Commons 上存放着超过 60 万张 SVG 图片如果这些免费内容都能直接在浏览器里通过 SVG-edit 编辑将释放巨大的协作潜力这一设想记录在 Wikipedia.md 中该文档同时确认了往返测试由 Mike Baynton 负责开发基于 Brion Vibber 的初始思路。要实现这个目标编辑器必须先回答一个关键问题当一个 SVG 文档被载入 SVG-edit 并原样保存回来后它还是不是原来那个文档往返测试Roundtrip Tests正是为回答这一问题而生——它的核心操作流程是将一个原始 SVG 文档加载进 SVG-edit立即执行保存得到 SVG-edit 的输出对比原始文档与输出文档的差异量化保真度。1.2 误差评分Error Score以像素论成败误差评分是往返测试的核心指标其计算方式为统计原始 SVG 文档栅格化rasterized后的位图与经过 SVG-edit 往返处理后再栅格化的位图之间像素不一致的数量。分数越接近 0 越好——0 意味着两次渲染逐像素完全一致。除了数值测试界面还会提供两类可视化辅助差异高亮视图直接在栅格图像上高亮显示哪些像素不一致规范化 XML 逐行对比将原始输入与 SVG-edit 输出分别做 C14NCanonical XML规范化处理后以并排 diff 的方式展示差异。这种双通道像素 XML的对比设计很有价值像素对比回答看起来一不一样XML 对比回答结构上差在哪里两者互补。二、托管测试与已知问题2.1 托管测试众包贡献算力托管测试是项目历史上运行的一套自动化体系它自动驱动 SVG-edit 对从 Wikimedia Commons 随机选取的 SVG 文档执行加载—保存操作序列然后把 SVG-edit 的输出回传服务器进行分析与永久存储。任何人都可以访问测试入口贡献自己的浏览器算力与带宽来帮助运行测试——因为同一批 SVG 需要在许多浏览器和多个 SVG-edit 代码修订版本上反复测试总是不缺可跑的用例。文档同时提醒在当时的版本中第一个测试编号 352会在uploading saved source...上传已保存源阶段停留很长时间原因是 SVG-edit 上报给服务器的图片尺寸严重不准确属于已知问题详见下文遇到时只需耐心等待。2.2 往返测试暴露出的问题往返测试的价值很快得到了验证——它实实在在地暴露了以下问题内联 style 属性未被保留Inline style attributes are not preserved往返一次后元素上以style...形式存在的内联样式丢失或改写直接影响文档的还原保真度。保存文档的尺寸严重不准确以测试 352 为代表SVG-edit 保存后向服务器报告的文档尺寸与原始文档偏差巨大进而拖慢测试流程。2013-10-03 Firefox on Windows 内存耗尽崩溃由 marclaporte 报告Windows 平台上的 Firefox 在运行往返测试时内存占用超过 2GB 并最终崩溃——这暴露出当时编辑器在处理某些文档时的性能与稳定性短板。2.3 现代代码库中的对应处理这些历史问题在当前仓库的代码中已有明确回应最典型的是sanitize 模块对内联样式属性的处理在 packages/svgcanvas/core/sanitize.js 中svgGenericWhiteList白名单里包含style属性见 第 23 行但 sanitize 逻辑随后会对style属性做一次规范化重写把style中声明的内容改写为对应的 XML 表现属性presentational attributes例如stylefill:red会被展开为fillred然后在允许的属性集合之外移除多余的style属性见 第 221-234 行。换句话说内联 style 未保留这一历史缺陷的现代解决方案是不保留内联 style而是将其等价地展开为标准表现属性从而在保证结构规范化的同时维持视觉保真。这一行为也被单元测试明确锁定tests/unit/sanitize.test.js 中的sanitizeSvg() strips ws from style attr、sanitizeSvg() removes disallowed attributes but keeps>?php $dbhost localhost; $dbuser www; $dbpass ; $dbschema svg-edit-test; // name of database you created $baseURL http://www.mbaynton.com/svg-edit-test/2.6/test/roundtrip-test-src; ?各变量含义变量含义说明$dbhost数据库主机本机一般为localhost$dbuser数据库用户名需具备读写权限$dbpass数据库密码按实际填写$dbschema数据库名必须与步骤一创建的库名一致$baseURL测试脚本的基础 URL供测试页面定位脚本资源使用3.3 步骤三用 Tests-generator.php 装载测试用例通过命令行脚本Tests-generator.php从 Wikimedia Commons 加载一批 SVG 文件即tests进入数据库。先验证环境是否正常只需加载单个文档$ php Tests-generator.php如果执行成功即可批量加载 n 个 SVG 文档$ php Tests-generator.php n重要建议一旦对已加载的测试集感到满意就不要再改动它们了——保持测试集固定才能让多次测试运行之间的结果具有可比性。这是保证回归对比有效性的关键纪律。3.4 服务器依赖清单文档列出的服务器依赖注明可能不完整包括PHP cURL 扩展用于与 Wikimedia Commons 等服务进行 HTTP 通信SVN Functions for PHP用于与代码仓库交互获取待测的 SVG-edit 修订版本ImageMagick 及其 PHP 扩展用于将 SVG 栅格化为位图这是像素级误差评分的基础可选W3C 标记校验器该校验器基于 Web 服务因此无需本地部署文档指出校验器地址本应配置在settings.php中但当时被硬编码在helper-functions.php的testSvgStrictValidity函数里。3.5 面向现代架构的迁移提示值得说明的是文档描述的是一套 PHP MySQL 的经典 LAMP 架构测试台这是 2.6 时代的设计。若要在当前仓库的现代架构packages/svgcanvas模块化 SVG 引擎 Vite 构建 Playwright 端到端测试下重建往返测试可以合理推断栅格化与像素对比环节可用现代图像处理库替代 ImageMagick 的 PHP 扩展浏览器驱动环节可复用仓库现成的 Playwright 测试体系例如 tests/e2e/unit/svgcore-utilities.spec.js 中已有utilities XML and base64 helpers escape and roundtrip correctly这类往返性质用例数据存储可保留 MySQL也可换用任意数据库。但请注意以上迁移思路属于基于代码结构的合理推断仓库中并未内置完整的现代往返测试服务器实现如要落地仍需自行开发。四、未来增强方向文档在最后给出了明确的演进规划采用 Mergely 提供文本 diff用更成熟的 Web 文本对比组件替换自研 diff 界面提升 XML 对比的可读性允许测试运行在任意服务器托管的 SVG-edit 上让开发者在自己分支/环境的变更合入主干之前就能先行评估其往返保真度影响把质量门禁前移更多增强Plenty more...文档并未列出全部规划属于持续演进中的开放清单。其中第 2 条与当代预览部署 自动化验证的开发实践思路一致也是往返测试从项目专用工具走向通用回归防线的关键一步。五、总结往返测试为 SVG-edit 提供了一个客观、可量化的保真度标尺以像素差异数衡量看起来差多少以 C14N 规范化后的 XML diff 衡量结构上差在哪。它验证了编辑器在 Wikipedia 场景下的可用性也真实暴露了内联 style 丢失、尺寸上报失真、特定浏览器内存崩溃等缺陷。从当前仓库源码看内联 style 展开为表现属性等处理逻辑已在 sanitize.js 中落地并被 sanitize.test.js 全面覆盖历史问题在现代版本中得到了架构性回应。如果你需要为自己的 SVG 处理链路建立类似的保真度回归体系本文第三节提供的数据库建表、settings.php配置、Tests-generator.php装载与依赖清单就是一套可以直接参考的完整方案骨架。延伸阅读仓库内测试总体策略archive/from-old-wiki/Testing.mdWikipedia 集成背景archive/from-old-wiki/Wikipedia.md现代 sanitize 实现packages/svgcanvas/core/sanitize.jssanitize 单元测试tests/unit/sanitize.test.jsSVG 序列化/加载 APIpackages/svgcanvas/svgcanvas.js赞分享前端图形学【免费下载链接】svgeditPowerful SVG-Editor for your browser项目地址https://gitcode.com/gh_mirrors/sv/svgedit点击查看免费下载相关推荐Pandoc Org 往返转换测试深度解析以 7810 号命令测试为例Pandoc Org 往返转换测试深度解析以 7810 号命令测试为例 导读 本文以 Pandoc 仓库中的命令测试用例 test/command/7810.文档开发工具CLIServerless Framework 测试体系解析从单元测试到 AWS 集成测试环境搭建TESTING.md 深度指南Serverless Framework 测试体系解析从单元测试到 AWS 集成测试环境搭建TESTING.md 深度指南 本文基于仓库根目录的 TEST开发工具CLI云原生后端如何选择最佳交易员Polymarket Copy Bot交易者筛选完全指南如何选择最佳交易员Polymarket Copy Bot交易者筛选完全指南 Polymarket Copy Bot是一款强大的交易复制工具帮助用户自动跟随顶上一篇Bagisto Flutter iOS 推送通知配置指南Firebase Cloud Messaging 与 APNs 全流程实战下一篇Guice高级特性解析作用域、多绑定与可选依赖创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考