制作具有自定义字体的SVG文件，该字体可供未安装字体的用户查看

Question

我已经在svg-edit上实现了svg-font-loader的自定义版本。当用户编辑SVG文件时，自定义字体可以正常使用svg-font-loader（我只是在加载SVG字符串之前在编辑器上预加载必要的自定义字体）。

用户完成编辑后，我将新的SVG字符串保存到文件系统（使用XDocument's Parse()和Save()。

然后，我需要在<img>标记内向用户显示此SVG文件，但除非用户在其计算机上安装这些字体，否则字体不起作用。

如何在保存到文件系统之前对SVG字符串（Base64或？）进行编码，以便正确显示？我是否需要解析SVG字符串并仅编码某些部分？我有可以使用的工具吗？

编辑或者，如果我在服务器上安装字体，是否有办法在服务器端将SVG序列化为PNG，然后显示？这会有用吗？

Answer 1

您可以在svg中使用webfonts来完成此操作。当您保存svg时，只需使用自定义字体base64编码写出@ font-face stylerule。

这是一个example。