17

免责声明

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

语境

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

问题

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

5 回答 5

10

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

但是，至少在目前，存在一些明显的缺点：

  • 当前的 Web 浏览器将 SVG 视为图像，并且可能无法向用户呈现良好的 UI。例如，我认为 Firefox 不允许用户选择 SVG 文件中的文本。
  • 你失去了内容和表现的分离。虽然 SVG 确实使用 CSS，并且如果您手动编辑原则上可以保持分离，但您可能正在设计布局和内容。这有几个缺点：
    • 作为推论，将结果页面调整为其他格式更加困难。特别：
    • 更改文本大小时的行为是什么？文件打印了吗？窗口调整大小？很难设计一个复杂的绘图来很好地支持回流（如果你的绘图不复杂，你还不如只使用 HTML+CSS）。
    • 屏幕阅读器支持：由于顺序不明确（如下），屏幕阅读器可能会给出难以理解的混乱输出。更基本的是，屏幕阅读器可能会认为 SVG 是图像，甚至不会尝试阅读文本。
  • SVG 完全基于 XML，因此需要非常严格地遵守规则。使用 (X)HTML，您可以选择使用纯 HTML 序列化。然后，这些规则中的许多规则都放宽了，如果您向浏览器提供虚假输入（而不是XML PARSING ERROR如果您有一个 misplaced >），浏览器就会更加健壮。
  • 当前的搜索引擎可能不会索引您的页面（他们只会将它们视为整体图像）。 没关系
  • 内容顺序不明确。像 Inkscape 这样的工具不需要关心元素的输出顺序，只要它们在输出中的位置正确并且 z 顺序正确。但是如果你正在制作一个网页，这确实很重要，因为屏幕阅读器并不确定哪个元素在语义上是第一的。如果您只是手动编辑 SVG，这不是问题，但通常的 SVG 工具可能会打乱您的订单。使用 HTML，它通常很清楚。
  • 很难#id_of_some_element很好地实现片段标识符（在 URL 的末尾）。下面的演示程序使用它们，但我认为它取决于 Javascript（对搜索引擎和禁用 javascript 的人不利）。(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 元素，因此您可以在不脱离浏览器/搜索引擎的情况下获得一些好处。

现有用法

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

于 2012-06-05T07:55:51.670 回答
3

在不知道任何 html 的情况下，可以使用 .svg 图像文件来创建网页，这真是太酷了。考虑到 html 标准的混乱程度，对于天生具有艺术天赋的人来说，使用 Inkscape .svg 文件可能会容易得多。当您想到 Inkscape 和 Openclipart 对从事桌面出版、剪贴簿等工作的人来说最有用时，能够直接从 Inkscape 导出网页将是一个强大的工具。

至于 600 年的排版，我们正处于 21 世纪，媒体出版不必遵循中世纪的排版理念。排版确实有它的宫殿，但我们正在谈论一个强大的实验，它可以帮助“普通乔”用户在不了解 CSS 或 HTML 的情况下将他们的艺术作品转化为网页。

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

于 2012-06-05T06:52:17.107 回答
1

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

SVG 网站的优势在于你可以做任何你想做的事；您不仅限于使用 HTML 的矩形行。

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

要实现的主要内容是：

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

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

于 2020-11-10T15:25:49.773 回答
0

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

于 2012-06-05T07:05:06.023 回答
-1

你确实可以用 SVG 制作整个网站，我已经做了很多年了。如果您愿意改变您对设计页面（思考卡）的看法，那么这只是一个反复试验的问题。

于 2016-04-29T18:05:28.650 回答