html - 使用 SVG 代替 html/css

Question

我一直在 Adob​​e Illustrator 中模拟登录页面，我即将开始对其进行编码。

有没有理由我不应该将整个页面导出为 SVG 并使用它来代替在 html/css 中重新创建所有内容？

我能想到的唯一缺点是:

1. SEO，因为我不会有常规文本(非常简单，只需从 SVG 中删除文本并在 html 中重新创建)

2. 用户交互(按钮等)(与 SEO 问题相同的解决方案)

3. 在不同视口(viewport)尺寸下重新定位元素的响应能力。(比较棘手；但已经为不同的设备尺寸模拟了一些不同的布局，所以我可以只提供不同的版本)

我怀疑我遗漏了什么，因为我无法在网上找到任何解决这种方法的方法。

一些说明:

• 我认为 SVG 兼容性在 IE9 左右之前变得不可靠，但我的产品涉及 chrome 扩展，所以这不是一个大问题

• 我的设计灵感来自 Material Design，因此有很多彩色 div 等。这是一个很好的近似值(source):

  

虽然按钮和文本最好用 HTML/CSS/JS 处理，但我对其余部分(即图像和布局组件)不能用单个 SVG 处理的原因感兴趣.

Answer 1

如何在 SVG 中始终在具有动态页面内容的页面底部添加页脚？

我认为主要区别在于 SVG 是具有固定高度和宽度的 Canvas ，而 html 文档具有动态大小的窗口。