免责声明

我意识到鉴于标题的荒谬，这听起来像一个巨魔。然而，这是一个真正的问题。我的背景涉及OpenGL / x86 汇编。我最近开始学习网络编程。我真的很喜欢 SVG + CSS，并且想知道——为什么人们不使用 SVG 设计整个网页？

Context

• SVG提供漂亮的图元：二次+三次贝塞尔曲线；线条+填充——全部为矢量图形
• SVG 提供文本
• SVG 提供仿射变换

问题

• 有没有人将整个网站设计为巨大的 SVG 文件的例子？
• 如果不是，有什么限制？
• 使用 SVG 原语而不是 div/表格时是否会影响性能？

有可能的;例如，您可以在 SVG 文档中嵌入 HTML 片段以获得超链接等内容。

然而，至少目前存在一些显着的缺点：

• 当前的 Web 浏览器将 SVG 视为图像，并且可能无法向用户呈现良好的 UI。例如，我认为 Firefox 不允许用户选择 SVG 文件中的文本。
• You lose separation of content and presentation. While SVG does use CSS, and you can in principle maintain the separation if you edit by hand, you are probably designing the layout together with the content. This has several drawbacks:
  • 因此，将结果页面调整为其他格式会更加困难。特别：
  • 更改文本大小时会有什么行为？文件被打印了吗？窗口大小已调整？设计一张支持的复杂绘图是很困难的reflow很好（如果你的绘图不复杂，你也可以只使用 HTML+CSS）。
  • 屏幕阅读器支持：由于顺序不明确（如下），屏幕阅读器可能会给出难以理解的、混乱的输出。更基本的是，屏幕阅读器可能会假设 SVG 是图像，甚至不会尝试阅读文本。
• SVG 完全基于 XML，因此需要非常严格地遵守规则。对于 (X)HTML，您可以选择使用纯 HTML 序列化。然后，许多规则都会被放宽，并且如果您向浏览器提供虚假输入（而不是XML PARSING ERROR如果您有一个放错地方>).
• Current search engines probably won't index your pages (they'll just treat them as monolithic images). Never mind https://www.google.com/search?q=filetype%3Asvg
• 内容顺序不清楚。像 Inkscape 这样的工具不需要关心元素的输出顺序，只要它们在输出中的位置正确并且 z 顺序正确即可。但如果您正在制作网页，这确实很重要，因为屏幕阅读器无法确定哪个元素在语义上是第一位的。如果您只是手动编辑 SVG，这不是问题，但常用的 SVG 工具可能会打乱您的顺序。对于 HTML，通常是很清楚的。
• It's difficult to implement fragment identifiers (#id_of_some_element at end of URL) well. The presentation program below uses them, but I think it depends on Javascript (bad for search engines and people with javascript disabled). (I'm not sure about this one) *̶ ̶I̶t̶'̶s̶ ̶d̶i̶f̶f̶i̶c̶u̶l̶t̶ ̶t̶o̶ ̶c̶o̶n̶v̶e̶r̶t̶ ̶t̶o̶ ̶t̶e̶x̶t̶ ̶(̶f̶o̶r̶ ̶s̶e̶a̶r̶c̶h̶ ̶e̶n̶g̶i̶n̶e̶s̶,̶ ̶s̶c̶r̶e̶e̶n̶ ̶r̶e̶a̶d̶e̶r̶s̶,̶ ̶c̶o̶p̶y̶-̶a̶n̶d̶-̶p̶a̶s̶t̶e̶,̶ ̶e̶t̶c̶.̶)̶,̶ ̶p̶a̶r̶t̶i̶c̶u̶l̶a̶r̶l̶y̶ ̶w̶h̶e̶n̶ ̶g̶e̶n̶e̶r̶a̶t̶e̶d̶ ̶w̶i̶t̶h̶ ̶g̶r̶a̶p̶h̶i̶c̶a̶l̶ ̶t̶o̶o̶l̶s̶.̶ ̶F̶o̶r̶ ̶e̶x̶a̶m̶p̶l̶e̶,̶ ̶h̶t̶t̶p̶:̶/̶/̶w̶w̶w̶.̶a̶f̶r̶o̶k̶a̶d̶a̶n̶s̶.̶c̶o̶m̶/̶P̶a̶g̶e̶_̶0̶1̶.̶s̶v̶g̶ ̶s̶h̶o̶w̶s̶ ̶u̶p̶ ̶i̶n̶ ̶G̶o̶o̶g̶l̶e̶ ̶a̶s̶ ̶̶D̶A̶N̶S̶E̶ ̶E̶T̶ ̶M̶I̶S̶E̶ ̶E̶N̶ ̶F̶O̶R̶M̶E̶ ̶B̶I̶E̶N̶V̶E̶N̶U̶E̶ ̶D̶ ̶a̶ ̶n̶ ̶s̶ ̶e̶ ̶r̶ ̶p̶o̶ ̶u̶ ̶r̶ ̶c̶é̶ ̶l̶ ̶é̶b̶ ̶r̶ ̶e̶ ̶r̶ ̶l̶ ̶a̶ ̶v̶ ̶i̶e̶.̶ ̶E̶ ̶n̶ ̶v̶e̶ ̶l̶ ̶o̶p̶p̶ ̶é̶ ̶e̶ ̶d̶ ̶e̶ ̶t̶ ̶a̶ ̶m̶ ̶b̶ ̶o̶ ̶u̶r̶ ̶s̶ ̶i̶n̶ ̶d̶o̶ ̶c̶ ̶i̶l̶ ̶e̶ ̶s̶ ̶e̶ ̶t̶ ̶i̶ ̶n̶ ̶c̶e̶ ̶s̶s̶ ̶a̶ ̶n̶t̶s̶̶.̶ ̶I̶n̶ ̶c̶o̶n̶t̶r̶a̶s̶t̶,̶ ̶e̶v̶e̶n̶ ̶c̶r̶a̶p̶p̶y̶ ̶W̶Y̶S̶I̶W̶Y̶G̶ ̶H̶T̶M̶L̶ ̶g̶e̶n̶e̶r̶a̶t̶o̶r̶s̶ ̶w̶o̶n̶'̶t̶ ̶s̶p̶l̶i̶t̶ ̶u̶p̶ ̶r̶u̶n̶s̶ ̶o̶f̶ ̶t̶e̶x̶t̶ ̶l̶i̶k̶e̶ ̶t̶h̶a̶t̶.̶

需要考虑的一点是，可以在 XHTML 和 HTML 5 中嵌入 SVG 元素，因此您可以在不抛弃浏览器/搜索引擎的情况下获得一些好处。

现有用途

我听说过它用于演示（在某些方面更接近绘图，因此上述一些缺点不适用）：

• “Jessyink 是一种 JavaScript，可以合并到包含多个图层的 Inkscape SVG 图像中。每个图层都将转换为演示文稿的一张幻灯片。” http://code.google.com/p/jessyink/
• 另一个实现 http://adityab.github.com/Awwation/; info http://adityabhatt.wordpress.com/2012/04/06/writing-a-prezi-clone-with-html5-svg-and-javascript/ and 一个例子 http://dl.dropbox.com/u/40496552/awwation-intro.svg