将整个网页设计为SVG文件

Question

放弃

我意识到,鉴于标题的荒谬,这听起来像一个巨魔.但是,这是一个真正的问题.我的背景涉及OpenGL/x86程序集.我最近开始学习网络编程.我真的很喜欢SVG + CSS,并且想知道 - 为什么人们不在SVG中设计整个网页？

上下文

• SVG提供漂亮的原始:二次+三次贝塞尔曲线; 线条+填充 - 全部作为矢量图形
• SVG提供文本
• SVG提供仿射变换

问题

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

Answer 1

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

但是,至少目前存在一些明显的缺点:

• 当前的Web浏览器将SVG视为图像,并且可能不会向用户呈现良好的UI.例如,我认为Firefox不允许用户在SVG文件中选择文本.
• 您失去了内容和演示文稿的分离.虽然SVG确实使用CSS,但如果您手动编辑,原则上可以保持分离,您可能正在设计布局和内容.这有几个缺点:
  • 作为必然结果,将生成的页面调整为其他格式更加困难.尤其:
  • 更改文本大小时的行为是什么？文件被打印？窗口调整大小？设计一个很好地支持回流的复杂绘图很困难(如果你的绘图不复杂,你也可以使用HTML + CSS).
  • 屏幕阅读器支持:由于订单不明确(下图),屏幕阅读器可能会给出难以理解的混乱输出.更基本的是,屏幕阅读器可能认为SVG是图像,甚至没有尝试阅读文本.
• SVG完全基于XML,因此需要非常严格地遵守规则.使用(X)HTML,您可以选择使用纯HTML序列化.然后,这些规则中的许多规则都会放松,如果您提供虚假输入,则浏览器会更加强大(相反,XML PARSING ERROR如果您只有一个错位>).
• 当前的搜索引擎可能不会索引您的页面(他们只会将它们视为单片图像). 没关系
• 内容的顺序不明确.像Inkscape这样的工具不需要关心输出的顺序元素,只要它们在输出中正确定位并且z顺序正确即可.但是如果你正在创建一个网页,这很重要,因为屏幕阅读器不能确定哪个元素在语义上是第一位的.如果您只是手动编辑SVG,这不是问题,但通常的SVG工具可能会扰乱您的订单.使用HTML,通常很清楚.
• 很难实现片段标识符(#id_of_some_element在URL的末尾).下面的演示程序使用它们,但我认为这取决于Javascript(对搜索引擎和禁用javascript的人有害).(我不知道这一个)*̶̶I̶t̶'̶s̶难以转化为文本̶(搜索引擎,̶屏幕阅读器,̶拷贝和粘贴,̶等)̶,̶特别是当产生与图形̶t̶o̶o̶l̶s̶.̶例如,HTTP̶:̶/̶/̶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̶显示出来在谷歌作为̶ ?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?,相反,甚至̶蹩脚WYSIWYG HTML发生器不会致使分裂运行文本那样的.

需要考虑的是,可以在XHTML和HTML 5中嵌入SVG元素,因此您可以获得一些好处而不会丢失浏览器/搜索引擎.

现有用途

我听说它用于演示(在某些方面更接近图纸,所以上述一些缺点不适用):

• "Jessyink是一个可以合并到包含多个图层的Inkscape SVG图像的JavaScript.每个图层都将被转换为一个演示文稿的幻灯片."
• 另一个实施 ; 信息和一个例子