批量调整 SVG Canvas 从 14px 到 16px
Bulk Resize SVG Canvas from 14px to 16px
我正在寻找一种方法来批量调整大约 600 个 svg 图标的大小。
这是一个示例图标:
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"/></svg>
网格是 14px 的倍数。我想保持图标本身(路径)的大小,但是 canvas 本身需要成为 16px 的倍数,并且路径需要保持完美地以 canvas 为中心。原因是这些图标将用于例如。 16px 并且应该仍然像在 14px 时一样清晰明了。
我知道我可以简单地调整 canvas 本身的大小,但是我的 svg 知识有限,我不知道如何才能可靠地将 canvas 上的路径居中如上所述。
有什么想法吗?
我终于通过偏移 viewBox 参数来解决尺寸变化的问题。 IE。 viewbox 会变成:`viewBox="-128 -128 2048 2048".
这是与之前相同的图标,在 16 像素的网格上,同时保留了实际图标的尺寸:
<svg width="2048" height="2048" viewBox="-128 -128 2048 2048" xmlns="http://www.w3.org/2000/svg"><path d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"/></svg>
您也可以使用 IcoMoon 来做到这一点。导入 SVG 后,按图标集右上角的菜单按钮,然后选择 "Get Info"。从那里,您可以为所有图标添加填充。负填充也有效。
我正在寻找一种方法来批量调整大约 600 个 svg 图标的大小。
这是一个示例图标:
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"/></svg>
网格是 14px 的倍数。我想保持图标本身(路径)的大小,但是 canvas 本身需要成为 16px 的倍数,并且路径需要保持完美地以 canvas 为中心。原因是这些图标将用于例如。 16px 并且应该仍然像在 14px 时一样清晰明了。
我知道我可以简单地调整 canvas 本身的大小,但是我的 svg 知识有限,我不知道如何才能可靠地将 canvas 上的路径居中如上所述。
有什么想法吗?
我终于通过偏移 viewBox 参数来解决尺寸变化的问题。 IE。 viewbox 会变成:`viewBox="-128 -128 2048 2048".
这是与之前相同的图标,在 16 像素的网格上,同时保留了实际图标的尺寸:
<svg width="2048" height="2048" viewBox="-128 -128 2048 2048" xmlns="http://www.w3.org/2000/svg"><path d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"/></svg>
您也可以使用 IcoMoon 来做到这一点。导入 SVG 后,按图标集右上角的菜单按钮,然后选择 "Get Info"。从那里,您可以为所有图标添加填充。负填充也有效。