html - 我可以用什么替代 SVG 文字云？

Question

最近，我在 Illustrator 中为一位客户设计了一个词云。它在徽标路径的彩色背景上使用大约 5,000 个白色人名，并包含一些矢量徽标。每个名字都小得离谱，我们希望能够在云端搜索并找到我们的名字。

我们已经成功地将它作为 SVG 放到网上 - 但是 20M 的文件可能会导致问题！

所以一切都会好起来的，直到我们同时达到 10,000 名访问者，并使我们所有的服务器崩溃并让每个人都超时。

那么，我们有什么替代方案可以让访问者快速、易于使用且无延迟？我们考虑 Canvas，但不确定用 [真的（关于遵循徽标路径的事情）] 自定义形状制作文字云是否简单。

Answer 1

听起来您有 20Mb，因为名称是用路径存储/表示的。如果您将它们表示为文本，您将大大减小文件的大小，并使其可适当搜索。

假设每个名称有 13 个字符（包括中间的空格）、UTF-8 编码和 10,000 个名称，那么名称本身应该只占用 127Kb。您可能希望尝试传输 SVG 的背景和名称（JSON？），并使用脚本在浏览器中构建云。

编辑：即使您创建一个完全静态的 SVG，将文本表示为文本也会比使用路径节省大量空间。