Question

在基于CMS的网站的验证，可访问性和可维护性方面使用SVG有什么缺点？

在一个项目中，我需要使导航流体可扩展，而不会失去文本和渐变的质量。并且只能使用HTML，CSS。

这样的按钮：

screenshot of desired button

所以我找到了this example（尽管它不像我想要的那样）。

但它无效：

validator screenshot

这个按钮是由SVG代码制作的 - 这里没有HTML和CSS。

SVG代码：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 480 360"
  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="button_surface" gradientUnits="objectBoundingBox"
      x1="1" x2="1" y1="0" y2="1">
      <stop stop-color="#434343" offset="0"/>
      <stop stop-color="#000000" offset="0.67"/>
    </linearGradient>

    <linearGradient id="virtual_light" gradientUnits="objectBoundingBox"
      x1="0" x2="0" y1="0" y2="1">
      <stop stop-color="#EEEEEE" offset="0" stop-opacity="1"/>
      <stop stop-color="#EEEEEE" offset="0.4" stop-opacity="0"/>
    </linearGradient>
  </defs>

  <!-- button content -->
  <rect x="10" y="10" rx="15" ry="15" width="150" height="80"
    fill="url(#button_surface)" stroke="#363636"/>

  <text x="30" y="55" fill="white"
    font-family="Tahoma" font-size="20" font-weight="500">
    SVG Button
  </text>

  <!-- vitual lighting effect -->
  <rect x="12" y="12" rx="15" ry="15" width="146" height="76"
    fill="url(#virtual_light)" stroke="#FFFFFF" stroke-opacity="0.4"/>
</svg>

我的问题出现了，因为这个网站将使用WordPress制作。使用SVG代码而不是HTML，CSS和JavaScript有什么缺点？

修改：我在微软的网站上找到this article，其中说由于UI代码较少，SVG优于Canvas制作UI元素。

Answer 1

您将遇到的最大问题是浏览器兼容性。如果您需要支持旧版本的IE（并且大多数公共网站都需要），那么您不能使用SVG而不诉诸Javascript黑客，因为浏览器不支持它。

此外，在3.0版本之前的Android浏览器中不支持SVG，除了少数平板电脑之外，目前几乎所有Android手机都占据了这一点。如果您需要支持这些，那么SVG不再是解决方案。

如果您不支持这些浏览器（或者如果您可以制定一个后备解决方案），那就去吧。

在可维护性方面，我建议使用可导出到SVG的矢量图形编辑器创建按钮。如果您有一个可以在图形环境中编辑的源文件，那么与您尝试直接编辑SVG标记相比，它将更容易维护。

在验证方面，您遇到错误的原因是因为您将SVG嵌入HTML中的方式。当SVG像这样嵌入时，你不应该为SVG定义XML头，因为XML头只应该作为XML文档的第一行出现。

如果整个文档是XML（即xhtml），那么您需要将xhtml和SVG的命名空间定义放在文档的顶部。如果文档是非XML（即纯HTML），那么根本不需要XML声明。

以下内容适用于所有支持嵌入式SVG的浏览器：

<html>
  <head>...</head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      ....svg content here....
    </svg>
  </body>
</html>

这应该可以解决您的验证问题。

如果要从外部文件加载SVG，那么它应该包含XML声明。

在基于CMS的网站的验证，可访问性和可维护性方面使用SVG有什么缺点？

1 个答案: