仅使用 SVG 开发整个网站答案

【问题标题】：Developing an entire website with only SVGs仅使用 SVG 开发整个网站
【发布时间】：2018-04-21 02:55:27
【问题描述】：

我一直在将 SVG 用于许多事情，并且能够得到我正在寻找的确切结果。这让我想知道为什么我们不能用它们构建整个网站......

我并不是说要用index.svg 替换index.html。更像是拥有基本的 HTML 框架（用于元标记、样式表、脚本等），然后给 <body> 一个单一的内联 <svg> 子级，其他一切都会发生。（文本、布局、缩放等）

我最初的假设是该网站在表单功能、搜索引擎优化和可访问性方面会有所不足。但话又说回来，如果可以以某种方式规避这些问题，则可以使用强大的 SVG 功能来呈现轻量级的图形效果，这些效果可以有效地扩展到任何设备尺寸。

之前有没有尝试过，用 SVG“替换” HTML 的潜在缺陷是什么？表单功能、SEO 和可访问性应该是一个有效的关注点吗？

【问题讨论】：

我相信这确实会给 SEO 带来问题，因为 google 无法在您的网页上看到有效的内容。但如果我错了，请纠正我。
以前也有人尝试过，但当时技术叫“Flash”。 :)
可能是stackoverflow.com/questions/10892659/… 的副本？
令人着迷！我也刚刚遇到这个：svg.nicubunu.ro 它完全是 SVG，但它缺乏响应能力。好消息是 Google 会抓取它：google.co.za/…
@RobertLongson 很可能是重复的，但它似乎也非常过时。

标签： html svg web accessibility

【解决方案1】：

也许是时候再次回答这个问题了。欢迎投稿和编辑。

辅助功能

SVG 内容是视觉内容。这本身就对可访问性造成了限制。尽管如此，即将发布的 SVG2 规范在ARIA attributes 上有一段试图提供至少一点帮助。如果您仔细观察，您会发现例如图形图元将获得默认的aria-role="graphics-symbol"，这并没有真正的帮助。

屏幕阅读器是否实现了这些我不知道。

SVG 让您有机会在任何地方添加<title> 和<desc> 标签。但是 HTML5 通过标签提供的标准语义丢失了。没有标题，没有部分，没有目录或导航。试着想象一下 Firefox Reader View 可以从这样的页面中得到什么：什么都没有。

即使linking to partial content of a page 也很难。虽然有规范，但语义仍然受到限制：您真的想通过将链接目标放大以覆盖整个视口来突出显示它吗？

SEO 说到底只是可访问性的一个特殊方面。拥有一个 HTML <header> 段，一些事情可能是可能的。也许其他人可以评论 Google 实施的内容。

响应能力

问题始于当前无法自动换行文本。 Layout facilities 仍然是一个没有工作实现的未来项目。（虽然 Firefox 知道 CSS inline-size，但它仅适用于 HTML，不适用于 SVG。）

CSS 在提供布局机制方面付出了很多努力，例如 flex 和网格布局。在 SVG 中，您失去了所有这些对内容重新排序的技术，取而代之的是简单的自动缩放。

互动

文本输入是一个可以解决的问题。您可以使用封装在 <foreignObject> 标记中的 HTML 输入，也可以通过将键盘输入捕获到 <text> 元素中来从头构建文本输入小部件。

对于大多数其他形式的用户输入，SVG 甚至可能是更好的平台。例如，点击/触摸某物来标记它，然后拖动它/滑动它，这只是基本相同交互的两个方面。

尤其是 Web 组件是 SVG 构建交互式小部件的完美补充。（尽管您仍然需要通过 polyfills 才能与 Firefox 兼容。）

表单提交

虽然可能不存在用于发起 HTTP 请求的 HTML 表单提交，但单页应用程序的出现表明，可以改为使用 XHR 请求。

结论

如果您的内容依赖或受益于 HTML5 提供的标准语义，那么 SVG 显然是不合适的。

如果您需要以响应式方式更改页面布局，SVG 将无济于事。

SVG 为创造性的、以视觉为导向的用户交互提供了许多额外的可能性。只要您为视障用户找到后备解决方案，您的网页就会从中受益。

总体而言，SVG 为您在页面上的特定区域和小部件提供了创造性的可能性，但未能解决网页必须回答的基本语义问题：您的页面如何与网络上的其他资源相关联？你的页面上什么是内容，什么是元信息，什么是装饰？

两全其美的方法是使用混合搭配方法：使用 HTML 构建页面，使用 SVG 图形装饰页面，使用 SVG 构建交互式/动画小部件，也许还有 Web 组件。

【讨论】：

另外，我使用一个带有脚本的大型 SVG 构建了整个 SVG 形状编辑器。作为一个小部件，它很棒，但不能有布局和其他东西。输入字段/表单等变得很痛苦。

【解决方案2】：

您可以使用 SVG 构建整个网站。我一直这样做，使用 Adobe Illustrator 创建页面。

您可以访问我的网站ozake.com 来查看一个很好的示例。即使与可能的情况相比，这也是相当基本的。

起初我都是手工完成的，但重复的部分很烦人，所以我构建了一个名为 Svija 的工具（svija.love，也仅限 SVG）。

基本上你只是在 html body 标签内放了一个 SVG。

有几点需要注意：

Microsoft 浏览器需要指定精确的像素尺寸，否则 SVG 将以错误的尺寸绘制。

Safari 浏览器无法平滑缩放字体（请参阅我在 this page 上的回答）。结果是如果你有两个相邻的文本块，如果 SVG 大小发生变化，它们之间的空间会随机变化。

如果您想要多个 SVG（例如，一个用于页面，一个用于页脚，一个用于菜单，一个用于特殊事件），您需要请注意内部 ID 不同。

否则，来自第二个 SVG 的颜色样式可能会应用于第一个 SVG，结果无法预测。

您可能需要更新 SVG 中的字体样式定义，以使它们与 Web 字体一起使用。我使用 Google 字体和上传的 WOFF。

您可以根据 Adobe Illustrator 坐标系统将表单制作为单独的 HTML 层。我只是在 Illustrator 中构建表单，然后将每个元素的位置和大小复制到绝对定位的 HTML 元素中。

为重复元素构建单独的 SVG 更容易，正如我在上面提到的。无需将页脚复制到每个 SVG，只需将页脚制作为单独的 SVG，绘制在主页顶部即可。

我构建 Svija 的部分原因是为了确保每个 SVG 都有唯一的内部 ID 并处理字体命名转换。

您可以像在 HTML 中一样链接到外部字体和图像。

您可以使用GSAP制作任何您想要的动画。

该网站通常由 Google 列出，但文本将按照其在 SVG 中出现的顺序排列。如果这是优先事项，则在构建 SVG 时需要注意。

为了处理可访问性，我将页面文本放在 SVG 之前的单独 DIV 中。从理论上讲，页面阅读器应该阅读内联 SVG 中的文本，但我无法确定是否是这种情况。

我不想给人以试图推动我的项目的印象。完全可以手动完成。

【讨论】：

ozake.com 网站在移动设备上非常难以阅读，并且辅助技术完全无法访问，这些技术将页面解释为一张未标记的图像。网站不应该这样建。
很抱歉，如果我给人的印象是 ozake.com 适合移动设备 - 不是，我从来没有时间做移动版本。你可以去 onecutstudio.com 查看一个适用于桌面和移动设备的 SVG 站点。如果您曾尝试使用辅助技术访问该站点，您应该会发现该文本是可读的。（如果您尝试过但没有成功，那就是有问题，我想知道，以便修复它）。
可读文本并不是可访问性所需的全部内容。没有标题或语义文档结构，没有任何图像有替代文本，没有任何链接有任何文本，没有悬停状态来帮助传达交互式内容......不应该这样构建网站。跨度>