时间戳

首页 > 解决方案 > SVG文件导出到svg文件时如何调整大小

svg - SVG文件导出到svg文件时如何调整大小

问题描述

在此处输入图像描述

<svg xmlns="http://www.w3.org/2000/svg" id="e639df27-0e42-4de9-9d05-d37458211c8a" data-name="Layer 1" viewBox="0 0 22 22"><defs><style>.f8f45c5e-663e-4aeb-8eb8-bdc5b008c6ac{fill:none;}.aa350ddd-b404-42d7-ac7b-d7365a85c785{fill:#327fbf;}</style></defs><title>dsadasd</title><path class="f8f45c5e-663e-4aeb-8eb8-bdc5b008c6ac" d="M11,7a5.92,5.92,0,0,1,.79-3c-.26,0-.52,0-.79,0a9,9,0,1,0,9,9c0-.27,0-.53,0-.79A5.92,5.92,0,0,1,17,13,6,6,0,0,1,11,7Z" transform="translate(-1 -1)"/><path class="aa350ddd-b404-42d7-ac7b-d7365a85c785" d="M23,7A6,6,0,0,0,12.43,3.11,11.19,11.19,0,0,0,11,3,10,10,0,1,0,21,13a11.19,11.19,0,0,0-.11-1.43A6,6,0,0,0,23,7Zm-3,6a9,9,0,1,1-9-9c.27,0,.53,0,.79,0A5.92,5.92,0,0,0,11,7a6,6,0,0,0,6,6,5.92,5.92,0,0,0,3-.79C20,12.47,20,12.73,20,13Zm.65-2.6A5,5,0,1,1,22,7,5,5,0,0,1,20.65,10.4Z" transform="translate(-1 -1)"/><rect class="aa350ddd-b404-42d7-ac7b-d7365a85c785" x="13" y="3" width="6" height="1"/><rect class="aa350ddd-b404-42d7-ac7b-d7365a85c785" x="13" y="5" width="6" height="1"/><rect class="aa350ddd-b404-42d7-ac7b-d7365a85c785" x="13" y="7" width="6" height="1"/></svg>

请看这张图片。这就是我想要完成的

在此处输入图像描述

任何人都可以帮助我如何使用 svg 在图像上完成。我希望我的 svg 图标在图像上看起来很小。目前，我粘贴在我的代码片段上的 SVG 代码太大了。任何人都可以帮助我如何使它像我提供的图像一样小。谢谢

标签： svg

解决方案

好吧，在重新查看问题后，我想我明白了。唯一让你的 svg 太大的是那些奇怪的大型 css 类。没有它，你的 svg 的重量就会比它可能的小。查看清理后的版本

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
<defs><style>.fill {fill:none;}.fill2{fill:#327fbf;}</style></defs>
<path class="fill" d="M11,7a5.92,5.92,0,0,1,.79-3c-.26,0-.52,0-.79,0a9,9,0,1,0,9,9c0-.27,0-.53,0-.79A5.92,5.92,0,0,1,17,13,6,6,0,0,1,11,7Z" transform="translate(-1 -1)"/>
<path class="fill2" d="M23,7A6,6,0,0,0,12.43,3.11,11.19,11.19,0,0,0,11,3,10,10,0,1,0,21,13a11.19,11.19,0,0,0-.11-1.43A6,6,0,0,0,23,7Zm-3,6a9,9,0,1,1-9-9c.27,0,.53,0,.79,0A5.92,5.92,0,0,0,11,7a6,6,0,0,0,6,6,5.92,5.92,0,0,0,3-.79C20,12.47,20,12.73,20,13Zm.65-2.6A5,5,0,1,1,22,7,5,5,0,0,1,20.65,10.4Z" transform="translate(-1 -1)"/>
<rect class="fill2" x="13" y="3" width="6" height="1"/><rect class="fill2" x="13" y="5" width="6" height="1"/><rect class="fill2" x="13" y="7" width="6" height="1"/></svg>

如果你想让它更短一点，你必须在 Inkscape 中打开它并将矩形转换为路径，然后选择整个元素并将所有内容转换为一个路径。它还将删除转换翻译。

请注意，一旦您保存了您的图标，Inkscape 将向 svg 添加许多它自己的信息，这些信息对于 svg 显示或性能来说是不必要的。因此，您必须使用 SVGOMG 服务或手动进行清理。对于那个简单的图标，我更喜欢第二个。请记住用不同的名称保存您的图标。然后在文本编辑器中打开原始文件和重塑文件，然后从旧文件中删除除 svg 声明、样式和路径之外的所有内容。转到新的 svg，找到d="M2...Z"的东西，复制它并替换旧的 svg。这样，您将快速完成这项工作。

推荐阅读