将整个网页设计为SVG文件

Question

声明

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

上下文

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

问题

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

Answer 1

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

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

• 当前的网络浏览器将SVG视为图像，并且可能无法为用户提供良好的UI。例如，我认为Firefox不允许用户在SVG文件中选择文本。
• 您失去了内容和演示文稿的分离。虽然SVG确实使用CSS，但如果您手动编辑，原则上可以保持分离，您可能正在设计布局和内容。这有几个缺点：
  • 作为必然结果，将结果页面调整为其他格式更加困难。特别：
  • 更改文字大小时的行为是什么？文件被打印？窗口调整大小？很难设计一个很好地支持 reflow 的复杂绘图（如果你的绘图不复杂，你也可以使用HTML + CSS）。
  • 屏幕阅读器支持：由于订单不明确（如下），屏幕阅读器可能会给出难以理解的混乱输出。更基本的是，屏幕阅读器可能会认为SVG是图像，甚至不会尝试阅读文本。
• SVG完全基于XML，因此需要非常严格地遵守规则。使用（X）HTML，您可以选择使用纯HTML序列化。然后，这些规则中的许多规则都是放宽的，如果您提供虚假输入，浏览器会更加健壮（如果您只有一个错位的XML PARSING ERROR，则与>相反。）
• 当前的搜索引擎可能不会将您的网页编入索引（他们只会将它们视为整体图片）。 Never mind
• 内容顺序不明确。像Inkscape这样的工具不需要关心输出的顺序元素，只要它们在输出中正确定位并且z顺序正确即可。但是如果你正在创建一个网页，这很重要，因为屏幕阅读器不能确定哪个元素在语义上是第一位的。如果您只是手动编辑SVG，这不是问题，但通常的SVG工具可能会扰乱您的订单。使用HTML，通常很清楚。
• 很难在URL末尾实现片段标识符（#id_of_some_element）。下面的演示程序使用它们，但我认为这取决于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发生器不会致使分裂运行文本等̶t̶h̶a̶t̶.̶

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

现有用途

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

• "Jessyink is a JavaScript that can be incorporated into an Inkscape SVG image containing several layers. Each layer will be converted into one slide of a presentation."
• Another implemetation; info和an example

Answer 2

认为.svg图像文件可以在不知道任何html的情况下创建网页真的很酷。考虑到HTML标准的混乱程度，能够使用Inkscape .svg文件对于自然艺术的人来说可能要容易得多。当您认为Inkscape和Openclipart对于正在进行桌面排版的人来说非常有用时，Scrapbooking等能够直接从Inkscape导出网页将是一个强大的工具。

至于600年的排版，我们处于21世纪，媒体出版不必遵循中世纪的格式化思想。排版确实有它的宫殿，但我们正在谈论一个强大的实验，可以帮助'普通乔'用户将他们的艺术变成网页而不知道CSS或HTML。

作为参考，Opera团队在将SVG用于网页方面做了大量工作 - http://dev.opera.com/articles/svg/

Answer 3

实际上，有些页面严重依赖SVG;使用诸如Raphaël之类的Javascript库是一种常见的方法。 Paper.js也值得一看，尽管他们选择了not to use SVG。

Answer 4

有一个专门用于创建基于SVG的网站的平台：Svija（免责声明：这是我的项目）。

SVG网站的优点是您可以做任何您想做的事；您并不仅限于HTML中的矩形行。

最大的问题是可访问性。目前，Google已抓取了SVG文本，但根据源文档，它很容易乱序。另外，通常不存在HTML标记（H1比P更重要）传达的语义信息。

要实现的主要事情是：

• 您可以在SVG文件中使用外部字体和图像
• 必须正确指定宽度和高度，Microsoft的浏览器才能以正确的大小显示SVG
• 如果您组合了不同的SVG文件，则ID冲突可能会导致CSS样式被错误应用

我发现的唯一可以正确链接到图像和字体的程序是Adobe Illustrator。我找到了可以创建SVG文件here的所有程序的列表，其中包含有关哪些程序支持哪些功能的一些信息。

Answer 5

你确实可以用SVG创建整个网站，我已经做了多年。如果你愿意改变你对设计页面（智能卡）的看法，那就只是试错了。