对于基于 CMS 的网站，使用 SVG 在验证、可访问性和可维护性方面有哪些缺点？
对于基于 CMS 的网站，使用 SVG 在验证、可访问性和可维护性方面有哪些缺点？
在一个项目中，我需要使导航流畅可扩展，而不损失文本和渐变的质量。仅使用 HTML、CSS 是不可能的。
像这样的按钮：
所以我找到了这个例子（虽然它并不完全像我想要的）。
但它无效：
此按钮是由 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 制作的。与 HTML、CSS 和 JavaScript 相比，使用 SVG 代码有哪些缺点？
编辑：我发现微软网站上的这篇文章，其中说SVG比Canvas更好地制作UI元素，因为UI代码更少。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您遇到的最大问题是浏览器兼容性。如果您需要支持旧版本的 IE（大多数公共网站都需要），那么您必须借助 Javascript hack 才能使用 SVG，因为浏览器不支持它。
此外，3.0 版本之前的 Android 浏览器不支持 SVG，目前除了少数平板电脑外，几乎所有 Android 手机都支持 SVG。如果您需要支持这些，那么 SVG 也不是解决方案。
如果您可以不支持这些浏览器（或者您可以制定后备解决方案），那么就继续吧。
在可维护性方面，我建议使用可以导出到 SVG 的矢量图形编辑器创建按钮。如果您有一个可以在图形环境中编辑的源文件，那么维护起来会比尝试直接编辑 SVG 标记容易得多。
在验证方面，出现错误的原因在于将 SVG 嵌入 HTML 的方式。当 SVG 像这样嵌入时，您不应该为其定义 XML 标头，因为 XML 标头应该只作为 XML 文档的第一行出现。
如果整个文档是 XML（即 xhtml），那么您需要将 xhtml 和 SVG 的命名空间定义放在文档的顶部。如果文档是非 XML（即纯 HTML），则根本不需要 XML 声明。
以下内容适用于所有支持嵌入式 SVG 的浏览器：
这应该可以解决您的验证问题。
如果要从外部文件加载 SVG，则它应该包含 XML 声明。
The biggest problem you'll have is browser compatibility. If you need to support older versions of IE (and most public web sites will need to) then you can't use SVG without resorting to Javascript hacks because the browser doesn't support it.
In addition, SVG isn't supported in the Android browser prior to version 3.0, which currently accounts for virtually all Android mobiles out there apart from a few tablets. If you need to support these, then again SVG isn't the solution.
If you're okay with not supporting those browsers (or if you can work out a fall-back solution) then go for it.
In terms of maintainability, I recommend creating your button using a vector graphic editor that can export to SVG. It will be a lot easier to maintain if you have a source file which you can edit in a graphical environment than if you are trying to edit the SVG markup directly.
In terms of validation, the reason you're getting errors is because of the way you're embedding the SVG into your HTML. You shouldn't be defining an XML header for the SVG when it's embedded like this, be cause an XML header should only ever appear as the first line of an XML document.
If the whole document is XML (ie xhtml) then you need to put the namespace definitions for both xhtml and SVG at the top of the document. If the document is non-XML (ie plain HTML), then you don't need the XML declaration at all.
The following will work in all browsers that support embedded SVG:
This should solve your validation issues.
If the SVG is to be loaded from an an external file, then it should include the XML declaraion.