如何在没有标题和desc的情况下缩短svg文件的代码

时间:2018-11-30 12:46:48

标签: html xml svg title

这是我的svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="26px" height="25px" viewBox="0 0 26 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>942D01BD-6ABD-40A0-BDEA-7F90A7757FFA</title>
    <desc>Created with sketchtool.</desc>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Your-orders---empty" transform="translate(-1169.000000, -521.000000)" fill="#E05432">
            <g id="Message" transform="translate(838.000000, 248.000000)">
                <path d="M341.217177,294.432739 C345.070507,292.148372 348.717567,289.648004 351.270153,286.509453 C354.999898,281.923699 354.99812,276.812345 353.451987,271.727827 C353.07679,270.495316 350.505533,271.016989 350.88073,272.250155 C352.385965,277.204418 352.212592,282.00879 348.270353,286.325525 C346.026282,288.782693 343.055822,290.818988 339.927992,292.691645 C340.976233,289.816222 340.880211,286.761453 339.578579,283.813375 C339.049569,282.616864 336.473866,283.12872 337.006433,284.335704 C338.631695,288.017528 338.19515,291.739935 335.795488,295.070268 C335.791931,295.072886 335.787486,295.074849 335.78393,295.077468 C335.433627,295.273832 335.266477,295.534996 335.231803,295.800087 C335.069988,295.997106 334.905506,296.192815 334.729465,296.385906 C333.931949,297.262999 335.448742,298.131582 336.553884,297.729691 C340.873988,296.158124 345.383468,295.608305 350.164121,295.972233 C351.869402,296.101833 351.856954,294.137539 350.164121,294.008593 C347.076301,293.773611 344.104952,293.927429 341.217177,294.432739 Z" id="Fill-1" transform="translate(344.466634, 284.427408) rotate(15.000000) translate(-344.466634, -284.427408) "></path>
            </g>
        </g>
    </g>
</svg>

所以我想删除titledesc标签以清除代码,但是然后出现以下错误:

  

编译失败,出现1个错误13:43:56

     ./src/assets/img/arrow-red.svg中的

错误

     

模块构建失败(来自./node_modules/file-loader/dist/cjs.js):

     

错误:提示:没有此类文件或目录,请打开'/Users/user.name/Sites/client/src/assets/img/arrow-red.svg'

我的问题是,我们可以从SVG中删除titledesc标签吗?如果没有,有没有办法清除代码? 谢谢!

1 个答案:

答案 0 :(得分:2)

您至少可以像这样减少所有变换和组:

<?xml version="1.0" encoding="utf-8"?>
<svg width="26px" height="25px" viewBox="0 0 26 25" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <title>942D01BD-6ABD-40A0-BDEA-7F90A7757FFA</title>
  <desc>Created with sketchtool.</desc>
  <path d="M 7.7 20.2 C 12.1 19 16.2 17.5 19.5 15.2 C 24.3 11.7 25.6 6.8 25.5 1.5 C 25.4 0.2 22.8 0 22.8 1.4 C 23 6.5 21.6 11.1 16.7 14.2 C 13.8 16 10.5 17.2 6.9 18.2 C 8.7 15.7 9.4 12.8 8.9 9.6 C 8.7 8.2 6.1 8.1 6.3 9.4 C 6.9 13.4 5.5 16.8 2.3 19.5 C 2.3 19.5 2.3 19.5 2.3 19.5 C 1.9 19.6 1.7 19.8 1.6 20 C 1.4 20.2 1.2 20.3 0.9 20.5 C -0.1 21.1 1.2 22.3 2.4 22.2 C 7 21.9 11.5 22.5 16 24.1 C 17.6 24.6 18.1 22.7 16.5 22.2 C 13.6 21.2 10.7 20.5 7.7 20.2 Z" id="Fill-1" fill="#E05432" stroke="none" stroke-width="1" fill-rule="evenodd"/>
</svg>

但是,没有理由删除这些元素不会引起问题,除非您的代码对标题进行了特殊处理。运行下面的代码段...

<svg xmlns="http://www.w3.org/2000/svg" width="26" height="25" viewBox="0 0 26 25">
  <path d="M 7.7 20.2 C 12.1 19 16.2 17.5 19.5 15.2 C 24.3 11.7 25.6 6.8 25.5 1.5 C 25.4 0.2 22.8 0 22.8 1.4 C 23 6.5 21.6 11.1 16.7 14.2 C 13.8 16 10.5 17.2 6.9 18.2 C 8.7 15.7 9.4 12.8 8.9 9.6 C 8.7 8.2 6.1 8.1 6.3 9.4 C 6.9 13.4 5.5 16.8 2.3 19.5 C 2.3 19.5 2.3 19.5 2.3 19.5 C 1.9 19.6 1.7 19.8 1.6 20 C 1.4 20.2 1.2 20.3 0.9 20.5 C -0.1 21.1 1.2 22.3 2.4 22.2 C 7 21.9 11.5 22.5 16 24.1 C 17.6 24.6 18.1 22.7 16.5 22.2 C 13.6 21.2 10.7 20.5 7.7 20.2 Z" id="Fill-1" fill="#E05432" stroke="none" stroke-width="1" fill-rule="evenodd"/>
</svg>