logo标签列表

将整个网页设计为SVG文件

htmlsvg
18

免责声明

我知道，考虑到标题的荒谬性，这听起来像个恶作剧。但是，这是一个真正的问题。我的背景包括OpenGL / x86汇编语言。最近我开始学习web编程。我非常喜欢SVG + CSS，并且想知道——为什么人们不用SVG设计整个网页呢？

背景

  • SVG提供美丽的基本图形：二次和三次贝塞尔曲线； 线条和填充——全部作为矢量图形。
  • SVG提供文本
  • SVG提供仿射变换

问题

  • 有没有人将整个网站设计为一个巨大的SVG文件的示例？
  • 如果没有，那么有什么限制吗？
  • 使用SVG基元与使用divs/tables相比是否会影响性能？
SVG比HTML要复杂得多。限制在于浏览器的实现（是否还存在这些限制，就不得而知了）。 - CapelliC
5个回答
10

这是可能的；例如，您可以将HTML片段嵌入SVG文档中，以获得诸如超链接之类的内容。

然而，目前存在一些显着的缺点：

  • 当前的网络浏览器将SVG视为图像，在向用户呈现方面可能不够好。例如，我认为Firefox不允许用户在SVG文件中选择文本。
  • 您会失去内容和表现之间的分离。虽然SVG确实使用CSS，并且在原则上可以通过手工编辑来维护分离，但您可能正在设计布局和内容。这有几个缺点：
    • 因此，更难将所得到的页面适应其他格式。特别是：
    • 当文本大小改变时的行为是什么？文档被打印出来时？窗口被调整大小时？很难设计一个支持良好重新排版的复杂绘图（如果您的绘图不复杂，那么就可以直接使用HTML+CSS）。
    • 屏幕阅读器支持：由于顺序不清楚（下面详述），屏幕阅读器可能会给出难以理解、混乱的输出。更基本的是，屏幕阅读器可能会假定SVG是图像，甚至不尝试阅读文字。
  • SVG完全基于XML，因此需要相当严格地遵守规则。使用（X）HTML，则可以选择使用纯HTML序列化。然后，许多这些规则都放松了，并且如果您向浏览器提供虚假输入（而不是 XML解析错误 ），浏览器更具有鲁棒性。
  • 当前的搜索引擎可能不会索引您的页面（它们只会将它们视为整块图像）。 没关系
  • 内容顺序不清晰。像Inkscape这样的工具不需要关心元素的输出顺序，只要它们在输出中正确定位并且z-order正确即可。但是如果您正在制作网页，则这很重要，因为屏幕阅读器无法确定哪个元素语义上是第一个。如果您仅手动编辑SVG，则没有问题，但通常的SVG工具可能会打乱您的顺序。使用HTML时，通常很清楚。
  • 实现片段标识符（URL结尾处的#id_of_some_element）很困难。下面的演示程序使用它们，但我认为它依赖于JavaScript（对搜索引擎和禁用JavaScript的人不利）。（我不确定这一点）
    • 转换为文本（供搜索引擎、屏幕阅读器、复制粘贴等使用）特别是当使用图形工具生成时非常困难。例如，http://www.afrokadans.com/Page_01.svg 出现在Google中作为。相比之下，即使是糟糕的WYSIWYG HTML生成器也不会分割这样的文本段落。需要考虑的一点是，可以将SVG元素嵌入XHTML和HTML 5中，因此您可以获得某些好处，而不会影响浏览器/搜索引擎。

    现有用法

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

    1
    “SVG is exclusively based on XML”这句话已经不完全准确了。现在可以将Svg内联包含在HTML5中，并遵循指定的解析规则。甚至可以通过在文档顶部添加<!DOCTYPE html>来将完整的SVG文件解析为HTML。此外，自2010年以来，Google一直在索引SVG文件，详情请见http://googlewebmastercentral.blogspot.com/2010/08/google-now-indexes-svg.html。 - Erik Dahlström
    1
    我不理解你最后一条要点。你不必使用JavaScript来处理片段标识符，你也可以使用CSS进行样式设置，或者将其用于声明式动画、自定义文档视图等方面。 - Erik Dahlström
    1
    @ErikDahlström：我试过了，即使你指定HTML 5 doctype，Firefox仍然会在XML错误上出错。无论如何，感谢您的更正。 - Mechanical snail
    @Mechanicalsnail 测试本地 SVG 文件？你需要给 SVG 命名为 *.html。在 web 服务器上，你需要使用 'text/html' 媒体类型来提供服务。 - Erik Dahlström
    内容的顺序不清楚。像Inkscape这样的工具不需要关心元素输出的顺序，只要它们在输出中正确定位即可。您指定元素的顺序就是它们被绘制的顺序（也称为画家算法），因此它确实非常重要。所有SVG查看器都遵循该规则（如规范中定义的）或者事情就无法正确呈现。我很遗憾地同意您的观点，即屏幕阅读器对SVG的支持很差或根本不存在，希望这种情况会得到改善。 - Erik Dahlström
    显示剩余2条评论
    3
    使用 .svg 图像文件创建网页而不需要了解任何 html 真的很酷。考虑到 html 标准有多么混乱，能够使用 Inkscape .svg 文件可能会更容易让天生具有艺术才能的人使用。当您考虑到 Inkscape 和 Openclipart 大多数情况下对于从事桌面出版、拼贴画等活动的人非常有用时，直接从 Inkscape 导出网页将是一个强大的工具。
    至于 600 年的排版历史，我们已经进入了 21 世纪，媒体出版不必遵循中世纪的格式想法。排版确实有其宫殿，但我们正在谈论一种强大的实验，可以帮助“普通人”用户将他们的艺术转化为网页，而无需了解 CSS 或 HTML。
    供参考，Opera 团队已经在使用 SVG 用于网页方面做了相当多的工作 - http://dev.opera.com/articles/svg/。
    不错的参考资料 (+1)，但URL应该被更正。 - CapelliC
    1
    有一个平台专门用于创建基于SVG的网站：Svija（免责声明：这是我的项目）。
    SVG网站的优点是你可以做任何你想做的事情；你不像使用HTML那样受到矩形行的限制。
    最大的问题是可访问性。现在，Google可以抓取SVG文本，但根据源文件，它很容易被打乱顺序。此外，通常由HTML标签传达的语义信息（H1比P更重要）不存在。
    需要注意的主要事项是：
    • 您可以在SVG文件中使用外部字体和图像
    • 必须正确指定宽度和高度，以便微软的浏览器以正确的大小显示SVG
    • 如果组合不同的SVG文件，冲突的ID可能会导致CSS样式被错误应用
    我发现唯一一个能够正确链接到图像和字体的程序是Adobe Illustrator。这里有一个我发现的所有可以创建SVG文件的程序列表，其中包含一些关于哪些程序支持哪些功能的信息。
    0

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

    -1

    你确实可以使用SVG制作整个网站，我已经这样做了好几年。如果你愿意改变设计页面的方式（考虑卡片式设计），那么只是一个试错的过程。

    5
    请注意在不同网站上链接到您自己的内容时要小心，您不希望成为垃圾邮件发送者。您应该在此处包含大部分内容，并仅将链接用作参考。 - NathanOliver
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接