【发布时间】：2016-06-11 23:09:00
【问题描述】：
我一直在 Adobe Illustrator 中模拟一个登录页面，我即将开始编写代码。
是否有理由我不应该将整个页面导出为 SVG 并使用它来代替在 html/css 中重新创建所有内容？
我能想到的唯一缺点是：
SEO，因为我没有常规文本 （很简单，只需从 SVG 中删除文本并在 html 中重新创建）
用户交互（按钮等） （与 SEO 问题相同的解决方案）
对于在不同视口大小处重新定位的元素的响应能力。 （比较棘手；但已经为不同的设备尺寸模拟了一些不同的布局，所以我可以提供不同的版本）
我怀疑我遗漏了一些东西，因为我无法在网上找到任何解决这种方法的东西。
一些澄清：
- 我认为 SVG 兼容性在 IE9 左右之前就变得不可靠了，但我的产品涉及 chrome 扩展，所以这不是一个大问题
-
我的设计是受 Material Design 启发的，所以有很多彩色 div 之类的。这是一个很好的近似值 (source)：
虽然按钮和文本最好使用 HTML/CSS/JS 处理，但我对无法使用单个 SVG 处理其余部分（即图像和布局组件）的原因感兴趣.
【问题讨论】：
-
因为这是你下地狱的事情。 8SVG 代表可缩放矢量图形；
image/svg+xml8。这就像使用 png 作为您的网站一样。更重要的是 - 将兼容性、渲染时间和缓存/加载添加到您的列表中。 -
如果我的永恒诅咒的想法是必须让所有 IE8 兼容怎么办？ :) 我认为 svg 会比 PNG 更好地考虑文件大小（由于压缩等），但你是对的，这绝对是我必须关注的事情。就我而言，目前，我假设文件大小可以使用任一选项进行管理
-
关于您的编辑：使用 SVG 作为图像或站点组件。等待。你为什么还要问？这就是为什么它是通过 HTML5 带给我们的（让我们假装之前不可能）。
-
我的问题不是我是否可以使用 svgs 作为图像/网站组件，而是使用 single SVG 的不足之处。这与使用 html/css 进行网站布局、部分等以及对图像使用单独的 SVG 不同——即，就像您使用 PNG 或 GIF 一样。
-
你想如何将
html嵌套在svg中？与foreignObejct？问题是 svg 根本不打算用作网站。