内联SVG代码中的非必要属性有哪些？附剪贴板图标代码示例

Great question—when you’re building a password generator and want lean inline SVGs, stripping out unnecessary cruft is a smart move. Let’s go through exactly what you can safely remove from your clipboard icon code, and why:

可安全移除的非必要内容 #

• XML声明：<?xml version="1.0" encoding="iso-8859-1"?>
  浏览器处理内联SVG时完全忽略这个声明，留着只是增加代码体积。
• 生成器注释：<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
  这只是AI导出时留下的元数据，对图标渲染没有任何作用，删掉即可。
• 冗余SVG属性：
  • x="0px" y="0px"：viewBox已经定义了图标坐标系统的起始点，这两个属性默认就是0，无需保留。
  • style="enable-background:new 0 0 488.3 488.3;"：这个旧属性是为了兼容老版本SVG，现在viewBox已经完全替代它的作用，而且不会影响当前渲染。
  • xml:space="preserve"：控制空白字符的属性，内联SVG中浏览器会自动处理空白，不需要手动声明。
  • xmlns:xlink="http://www.w3.org/1999/xlink"：你的SVG里没有使用任何xlink相关功能（比如<use>标签或外部资源链接），所以这个命名空间可以移除。
  • id="Capa_1"：如果你的代码不需要通过这个ID选中或操作这个SVG元素，完全可以删掉；如果需要保留来做交互，那留着也没问题。
• 空的<g>元素：所有那些空的<g></g>标签都是AI导出时的残留，没有任何实际内容，全部删除。
• 多余的嵌套<g>：你的图标里有两层嵌套的<g>，可以直接合并成一层，甚至把<path>直接放在<svg>根元素下，不影响渲染。

精简后的最终代码 #

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488.3 488.3">
  <path d="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124 C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124 c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z"/>
  <path d="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227 c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6 V38.6C439.65,17.3,422.35,0,401.05,0z"/>
</svg>

这个版本保留了所有必要的部分（命名空间、viewBox、路径数据），同时砍掉了近一半的冗余代码，完全不影响图标的显示效果。

内容的提问来源于stack exchange，提问作者Felix Persson