答案 0 :(得分：2)
您需要决定您的基本技术：Flash，Silverlight，Canvas，客户端SVG，服务器端SVG或服务器端位图。还有商业解决方案可以使用Adobe InDesign文档（可能还有许多其他专有格式），但我希望这些解决方案不便宜。
Flash / Silverlight需要插件，有些人认为它是一种垂死的技术 - 尽管我确信这是有争议的。 Canvas是'非常HTML5'，本质上是在客户端上构建/呈现的位图，但如果您最终渲染为PDF，则可能无法提供所需的分辨率。同样的限制也会影响构建图像服务器端 - 你可能应该处理矢量元素和位图，而不是在你去的时候将所有内容渲染成像素。
将SVG放在我的列表中，无论是在客户端（请参阅RaphaelJS）还是在服务器上（请参阅Inkscape）。我目前正在做服务器端SVG渲染的一些工作，这很有希望;虽然受到比客户端更多的可伸缩性问题，但它不会受到浏览器兼容性问题或浏览器呈现限制的影响。
浏览器SVG渲染中最大的问题是路径中/段落上的段落文本和文本 - 我不确定这些在现代浏览器中实现得多好，或者它们之间有多少协议。特别是在这种情况下，其中一些需要SVG1.2，并且浏览器（afaik）在多年后才刚刚解决SVG1.1问题。但是，如果你只想做标准的文本块，位图和矢量元素，基于浏览器的SVG应该适合你。
您提供的示例使用服务器端技术（SVG，或者可能是商业格式），并在客户端上呈现低分辨率PNG。
在您的情况下，一旦您考虑过如何“进行编辑”，您就需要考虑如何渲染到PDF，这将在服务器上完成。您可以使用FPDF，使用像Jasper这样的报表渲染器，或使用GhostScript，Inkscape，Scribus，ps2pdf，svg2pdf等图形系统。
旁白：如果没有明显的先前研究，我通常不回答问题。但是，既然你已表明你确实会这样做，我很乐意帮助你开始。