整个网站都是用SVG构建的

Question

我一直在使用SVG进行大量的事情,我能够得到我想要的确切结果.这让我想知道为什么我们不能用它们构建整个网站......

我的意思并不是像替换index.html用index.svg.更像是拥有基本的HTML框架(用于元标记,样式表,脚本等),然后给出<body>一个内联<svg>子项,其他所有内容都会发生.(文字,布局,缩放等)

我最初的假设是,在形式功能,搜索引擎优化和可访问性方面,网站将会很短.但是,如果那些可以以某种方式被规避,那么强大的SVG功能可以用于渲染轻量级图形效果,可以有效地扩展到任何设备尺寸.

之前有没有尝试过这种方法？用SVG "替换" HTML有哪些潜在的缺陷？应该形成功能,搜索引擎优化和可访问性是一个有效的问题吗？

Answer 1

也许是时候再回答这个问题了.欢迎提供和编辑.

无障碍

SVG内容是可视内容.这本身就限制了可访问性.尽管如此,即将推出的SVG 2规范还有一个关于ARIA属性的段落,试图给出至少一些帮助.如果你更仔细,你会发现,例如grafics元将获得一个默认aria-role="graphics-symbol",这是不是真的有帮助.

屏幕阅读器是否实现了这一点我不知道.

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

甚至链接到页面的部分内容也很困难.虽然规范存在,但语义仍然受到限制:您是否真的希望通过将其扩展以覆盖整个视口来突出显示链接目标？

搜索引擎优化最终只是可访问性的一个专门方面.有一个HTML <header>段,可能有一些事情.也许其他人可以评论Google实施的内容.

问题始于当前无法自动换行文本.布局设施仍然是未来工程实施的未来项目.(虽然Firefox知道CSS inline-size,它只针对HTML实现,但在SVG中不起作用.)

CSS在提供flex和网格布局等布局机制方面投入了大量精力.在SVG中,您放弃了所有这些重新排序内容的技术,转而使用简单的自动缩放.

文本输入是一个可解决的问题.您可以使用包含在<foreighObject>标记中的HTML输入,也可以通过将keybord输入捕获到<text>元素中来从头开始构建文本输入窗口小部件.

对于大多数其他形式的用户输入,SVG甚至可能是优越的平台.例如,单击/触摸某些内容以对其进行标记并将其拖动/滑动,结果只是基本相同交互的两个方面.

特别是Web组件是构建交互式小部件的SVG的完美补充.(尽管你仍然需要通过polyfill来兼容Firefox.)

虽然可能缺少用于启动HTTP请求的HTML表单提交,但单页应用程序的出现表明可以使用XHR请求.

如果您的内容依赖于HTML5提供的标准语义或受益,则SVG显然不合适.

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

SVG为创造性的,以视觉为导向的用户交互提供了许多额外的可能性.只要您为视力不佳的用户找到后备解决方案,您的页面就可以从中获益.

总的来说,SVG为您的页面上的专业区域和小部件提供了创造性的可能性,但是不能满足网页必须回答的基本语义问题:您的页面如何与Web上的其他资源相关？您网页上的内容是什么,元信息是什么,装饰是什么？

通过使用混合匹配方法可以获得两全其美:使用HTML构建页面,使用SVG grafics进行装饰,以及使用SVG和Web组件构建交互式/动画小部件.