如何 trim markdown 文件中的 svg 图片
How to trim a svg image in markdown file
我有一个 svg 文件，由 Google 绘图制作。 （png版本如下图
svg代码如下
<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"/><path fill="#999999" d="m393.1811 309.8189l0 0c0 -37.33795 30.268372 -67.60631 67.60632 -67.60631l0 0c17.930298 0 35.12622 7.1227875 47.80487 19.801437c12.67865 12.678619 19.801392 29.874542 19.801392 47.80487l0 0c0 37.33792 -30.268341 67.60629 -67.60626 67.60629l0 0c-37.33795 0 -67.60632 -30.268372 -67.60632 -67.60629z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m393.1811 309.8189l0 0c0 -37.33795 30.268372 -67.60631 67.60632 -67.60631l0 0c17.930298 0 35.12622 7.1227875 47.80487 19.801437c12.67865 12.678619 19.801392 29.874542 19.801392 47.80487l0 0c0 37.33792 -30.268341 67.60629 -67.60626 67.60629l0 0c-37.33795 0 -67.60632 -30.268372 -67.60632 -67.60629z" fill-rule="evenodd"/></g></svg>
我的目的是将此 svg 图像插入降价文件 my_work.md。如您所见，图像中有很多白色 space，我想 trim 关闭它们，只显示有用的部分。在这个例子中，有用的部分就是灰色圆圈。
我有一些大概的想法，但不知道如何实现。
- 直接法：使用一些降价技巧trim它。
- 间接方法：使用一些Python库在Python和trim中加载此图像，导出trimmed svg-image并在md-中使用它文件。
- 间接方法：trim它在Google图中。
你能告诉我怎么做吗？欢迎任何方法。我只需要显示图像的有用部分。请注意，我有很多svg文件，有用的部分可能不在图像的中心。
我为您的示例添加了 ids 以便能够讨论您的路径。
路径 a 和 b 相同，它们是覆盖整个 svg canvas 的大矩形。路径 a 不可见，因为它位于 clipPath 内，而路径 b 是透明的：fill-opacity="0.0"
路径 c 和路径 d 也相同。您可以删除其中一个，然后将描边和填充添加到同一路径。或者，您将路径 c 放在 <defs> 中并使用它两次：一次用于填充，一次用于描边（如果这是您需要的）。
<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<clipPath id="p.0">
<path id="a" d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"/></clipPath>
<g clip-path="url(#p.0)">
<path id="b" fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"/>
<path id="c" fill="#999999" d="m393.1811 309.8189l0 0c0 -37.33795 30.268372 -67.60631 67.60632 -67.60631l0 0c17.930298 0 35.12622 7.1227875 47.80487 19.801437c12.67865 12.678619 19.801392 29.874542 19.801392 47.80487l0 0c0 37.33792 -30.268341 67.60629 -67.60626 67.60629l0 0c-37.33795 0 -67.60632 -30.268372 -67.60632 -67.60629z" fill-rule="evenodd"/>
<path id="d" stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m393.1811 309.8189l0 0c0 -37.33795 30.268372 -67.60631 67.60632 -67.60631l0 0c17.930298 0 35.12622 7.1227875 47.80487 19.801437c12.67865 12.678619 19.801392 29.874542 19.801392 47.80487l0 0c0 37.33792 -30.268341 67.60629 -67.60626 67.60629l0 0c-37.33795 0 -67.60632 -30.268372 -67.60632 -67.60629z" fill-rule="evenodd"/>
</g>
</svg>
为了去除白色space你可以删除路径b，得到路径c的大小并用于viewBox 属性：在本例中为 viewBox="391 240 139 139"
<svg version="1.1" viewBox="391 240 139 139" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<path fill="#999999" stroke="black" d="m393.1811 309.8189l0 0c0 -37.33795 30.268372 -67.60631 67.60632 -67.60631l0 0c17.930298 0 35.12622 7.1227875 47.80487 19.801437c12.67865 12.678619 19.801392 29.874542 19.801392 47.80487l0 0c0 37.33792 -30.268341 67.60629 -67.60626 67.60629l0 0c-37.33795 0 -67.60632 -30.268372 -67.60632 -67.60629z" fill-rule="evenodd"/>
</svg>
我有一个 svg 文件，由 Google 绘图制作。 （png版本如下图
svg代码如下
<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"/><path fill="#999999" d="m393.1811 309.8189l0 0c0 -37.33795 30.268372 -67.60631 67.60632 -67.60631l0 0c17.930298 0 35.12622 7.1227875 47.80487 19.801437c12.67865 12.678619 19.801392 29.874542 19.801392 47.80487l0 0c0 37.33792 -30.268341 67.60629 -67.60626 67.60629l0 0c-37.33795 0 -67.60632 -30.268372 -67.60632 -67.60629z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m393.1811 309.8189l0 0c0 -37.33795 30.268372 -67.60631 67.60632 -67.60631l0 0c17.930298 0 35.12622 7.1227875 47.80487 19.801437c12.67865 12.678619 19.801392 29.874542 19.801392 47.80487l0 0c0 37.33792 -30.268341 67.60629 -67.60626 67.60629l0 0c-37.33795 0 -67.60632 -30.268372 -67.60632 -67.60629z" fill-rule="evenodd"/></g></svg>
我的目的是将此 svg 图像插入降价文件 my_work.md。如您所见，图像中有很多白色 space，我想 trim 关闭它们，只显示有用的部分。在这个例子中，有用的部分就是灰色圆圈。
我有一些大概的想法，但不知道如何实现。
- 直接法：使用一些降价技巧trim它。
- 间接方法：使用一些Python库在Python和trim中加载此图像，导出trimmed svg-image并在md-中使用它文件。
- 间接方法：trim它在Google图中。
你能告诉我怎么做吗？欢迎任何方法。我只需要显示图像的有用部分。请注意，我有很多svg文件，有用的部分可能不在图像的中心。
我为您的示例添加了 ids 以便能够讨论您的路径。
路径 a 和 b 相同，它们是覆盖整个 svg canvas 的大矩形。路径 a 不可见，因为它位于 clipPath 内，而路径 b 是透明的：fill-opacity="0.0"
路径 c 和路径 d 也相同。您可以删除其中一个，然后将描边和填充添加到同一路径。或者，您将路径 c 放在 <defs> 中并使用它两次：一次用于填充，一次用于描边（如果这是您需要的）。
<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<clipPath id="p.0">
<path id="a" d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"/></clipPath>
<g clip-path="url(#p.0)">
<path id="b" fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"/>
<path id="c" fill="#999999" d="m393.1811 309.8189l0 0c0 -37.33795 30.268372 -67.60631 67.60632 -67.60631l0 0c17.930298 0 35.12622 7.1227875 47.80487 19.801437c12.67865 12.678619 19.801392 29.874542 19.801392 47.80487l0 0c0 37.33792 -30.268341 67.60629 -67.60626 67.60629l0 0c-37.33795 0 -67.60632 -30.268372 -67.60632 -67.60629z" fill-rule="evenodd"/>
<path id="d" stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m393.1811 309.8189l0 0c0 -37.33795 30.268372 -67.60631 67.60632 -67.60631l0 0c17.930298 0 35.12622 7.1227875 47.80487 19.801437c12.67865 12.678619 19.801392 29.874542 19.801392 47.80487l0 0c0 37.33792 -30.268341 67.60629 -67.60626 67.60629l0 0c-37.33795 0 -67.60632 -30.268372 -67.60632 -67.60629z" fill-rule="evenodd"/>
</g>
</svg>
为了去除白色space你可以删除路径b，得到路径c的大小并用于viewBox 属性：在本例中为 viewBox="391 240 139 139"
<svg version="1.1" viewBox="391 240 139 139" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<path fill="#999999" stroke="black" d="m393.1811 309.8189l0 0c0 -37.33795 30.268372 -67.60631 67.60632 -67.60631l0 0c17.930298 0 35.12622 7.1227875 47.80487 19.801437c12.67865 12.678619 19.801392 29.874542 19.801392 47.80487l0 0c0 37.33792 -30.268341 67.60629 -67.60626 67.60629l0 0c-37.33795 0 -67.60632 -30.268372 -67.60632 -67.60629z" fill-rule="evenodd"/>
</svg>