将带有掩码和符号的 SVG 转换为纯 SVG 文件?

Posted

技术标签:

【中文标题】将带有掩码和符号的 SVG 转换为纯 SVG 文件?【英文标题】:Turn SVG with Mask and Symbols to a plain SVG file? 【发布时间】:2020-01-24 21:03:51 【问题描述】:

我试图从一个页面中获取一个 SVG,但这个并不那么容易。它包含<mask><symbol> 标签,出于某种原因,它位于<html> 标签内。

这是我得到的 SVG:

https://pastebin.com/fF0U2TLw(从这里测试)

<html>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0" id="__SVG_SPRITE_NODE__">
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" fill="none" id="f_icon_1f2d0f1a">
        <g filter="url(#f_icon_1f2d0f1a_filter0_i)">
            <path d="M13.865 4.666a.936.936 0 0 1 .662-.274h12.924c.249 0 .487.098.662.274l9.14 9.139a.936.936 0 0 1 .273.662V27.39a.936.936 0 0 1-.274.662l-9.139 9.139a.936.936 0 0 1-.662.274H14.527a.936.936 0 0 1-.662-.274l-9.139-9.139a.936.936 0 0 1-.274-.662V14.467c0-.248.099-.487.274-.662l9.14-9.139z" fill="url(#f_icon_1f2d0f1a_paint0_linear)"></path>
        </g>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.222 4.636l-9.585 9.586v13.556l9.585 9.585h13.556l9.585-9.585V14.222l-9.585-9.586H14.222zM13.447.892c-.497 0-.973.197-1.324.548L1.44 12.122a1.872 1.872 0 0 0-.548 1.324v15.107c0 .497.197.973.548 1.324l10.683 10.682c.35.351.827.549 1.324.549h15.106c.497 0 .973-.198 1.324-.549L40.56 29.877c.35-.351.548-.827.548-1.324V13.446c0-.496-.197-.973-.548-1.324L29.877 1.44a1.872 1.872 0 0 0-1.324-.548H13.446z" fill="url(#f_icon_1f2d0f1a_paint1_linear)"></path>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.222 4.636l-9.585 9.586v13.556l9.585 9.585h13.556l9.585-9.585V14.222l-9.585-9.586H14.222zM13.447.892c-.497 0-.973.197-1.324.548L1.44 12.122a1.872 1.872 0 0 0-.548 1.324v15.107c0 .497.197.973.548 1.324l10.683 10.682c.35.351.827.549 1.324.549h15.106c.497 0 .973-.198 1.324-.549L40.56 29.877c.35-.351.548-.827.548-1.324V13.446c0-.496-.197-.973-.548-1.324L29.877 1.44a1.872 1.872 0 0 0-1.324-.548H13.446z" fill="url(#f_icon_1f2d0f1a_paint2_linear)" fill-opacity=".3"></path>
        <g filter="url(#f_icon_1f2d0f1a_filter1_d)">
            <path d="M32.324 17.505l-5.943 4.349-1.203-3.722a.559.559 0 0 1 .532-.731h6.58c.056 0 .079.071.034.104z" fill="url(#f_icon_1f2d0f1a_paint3_linear)"></path>
            <path d="M32.324 17.505l-5.943 4.349-1.203-3.722a.559.559 0 0 1 .532-.731h6.58c.056 0 .079.071.034.104z" fill="url(#f_icon_1f2d0f1a_paint4_linear)" fill-opacity=".2"></path>
            <path d="M32.324 17.505l-5.943 4.349-1.203-3.722a.559.559 0 0 1 .532-.731h6.58c.056 0 .079.071.034.104z" fill="url(#f_icon_1f2d0f1a_paint5_linear)" fill-opacity=".3"></path>
            <path d="M21.06 9.26c.021-.065.098.006.12.072l6.896 21.344.001.006c.01.05-.045.089-.088.06v-.002L9.903 17.505c-.044-.033-.021-.104.034-.104h8.455a.057.057 0 0 0 .054-.04l2.613-8.1z" fill="url(#f_icon_1f2d0f1a_paint6_linear)"></path>
            <path d="M21.06 9.26c.021-.065.098.006.12.072l6.896 21.344.001.006c.01.05-.045.089-.088.06v-.002L9.903 17.505c-.044-.033-.021-.104.034-.104h8.455a.057.057 0 0 0 .054-.04l2.613-8.1z" fill="url(#f_icon_1f2d0f1a_paint7_linear)" fill-opacity=".2"></path>
            <path d="M21.06 9.26c.021-.065.098.006.12.072l6.896 21.344.001.006c.01.05-.045.089-.088.06v-.002L9.903 17.505c-.044-.033-.021-.104.034-.104h8.455a.057.057 0 0 0 .054-.04l2.613-8.1z" fill="url(#f_icon_1f2d0f1a_paint8_linear)" fill-opacity=".3"></path>
            <path d="M17.033 24.138a.559.559 0 0 0-.862.28l-2.018 6.258c-.017.053.043.097.087.064l5.907-4.323-3.114-2.279z" fill="url(#f_icon_1f2d0f1a_paint9_linear)"></path>
            <path d="M17.033 24.138a.559.559 0 0 0-.862.28l-2.018 6.258c-.017.053.043.097.087.064l5.907-4.323-3.114-2.279z" fill="url(#f_icon_1f2d0f1a_paint10_linear)" fill-opacity=".2"></path>
            <path d="M17.033 24.138a.559.559 0 0 0-.862.28l-2.018 6.258c-.017.053.043.097.087.064l5.907-4.323-3.114-2.279z" fill="url(#f_icon_1f2d0f1a_paint11_linear)" fill-opacity=".3"></path>
        </g>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M32.324 17.505c.045-.033.022-.104-.033-.104H25.71c-.38 0-.649.37-.532.73l1.203 3.723 5.943-4.35zm-1.29.364H25.71a.09.09 0 0 0-.087.119l1.005 3.106 4.406-3.225zM21.06 9.26l-2.613 8.101a.057.057 0 0 1-.054.04H9.938c-.055 0-.078.071-.034.104L27.947 30.71l.007.005.034.025.002.001c.042.03.098-.01.087-.059v-.003l-.001-.003-.013-.038L21.18 9.331a.172.172 0 0 0-.018-.04c-.032-.049-.084-.084-.101-.032zm.049 1.375l6.131 18.978-16.045-11.744h7.198c.23 0 .43-.15.5-.364M14.24 30.74c-.044.033-.104-.011-.087-.064l.012-.039 2.006-6.22a.559.559 0 0 1 .862-.279l3.114 2.279-5.907 4.323zm.747-1.127l4.368-3.196-2.598-1.901a.09.09 0 0 0-.14.045l-1.63 5.052z" fill="url(#f_icon_1f2d0f1a_paint12_linear)" fill-opacity=".2"></path>
        <defs>
            <filter id="f_icon_1f2d0f1a_filter0_i" x="4.452" y="4.392"   filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
                <feOffset dy="1.404"></feOffset>
                <feGaussianBlur stdDeviation=".936"></feGaussianBlur>
                <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"></feComposite>
                <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0"></feColorMatrix>
                <feBlend in2="shape" result="effect1_innerShadow"></feBlend>
            </filter>
            <filter id="f_icon_1f2d0f1a_filter1_d" x="7.541" y="7.362"   filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix>
                <feOffset dy=".468"></feOffset>
                <feGaussianBlur stdDeviation="1.17"></feGaussianBlur>
                <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0"></feColorMatrix>
                <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend>
                <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"></feBlend>
            </filter>
            <linearGradient id="f_icon_1f2d0f1a_paint0_linear" x1="14.139" y1="4.392" x2="14.139" y2="39.645" gradientUnits="userSpaceOnUse">
                <stop stop-color="#732600"></stop>
                <stop offset="1" stop-color="#260D00"></stop>
                <stop offset="1" stop-color="#401500"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint1_linear" x1="12.671" y1=".892" x2="29.329" y2="41.108" gradientUnits="userSpaceOnUse">
                <stop stop-color="#FD6E35"></stop>
                <stop offset="1" stop-color="#F50"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint2_linear" x1="-1.82" y1="-2.013" x2="21.114" y2="20.922" gradientUnits="userSpaceOnUse">
                <stop stop-color="red"></stop>
                <stop offset="1" stop-color="red" stop-opacity="0"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint3_linear" x1="21.114" y1="9.221" x2="21.114" y2="30.751" gradientUnits="userSpaceOnUse">
                <stop stop-color="#FD6E35"></stop>
                <stop offset="1" stop-color="#F50"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint4_linear" x1="21.114" y1="9.221" x2="21.114" y2="15.54" gradientUnits="userSpaceOnUse">
                <stop stop-color="#fff"></stop>
                <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint5_linear" x1="14.778" y1="5.151" x2="20.733" y2="20.152" gradientUnits="userSpaceOnUse">
                <stop stop-color="red"></stop>
                <stop offset="1" stop-color="red" stop-opacity="0"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint6_linear" x1="21.114" y1="9.221" x2="21.114" y2="30.751" gradientUnits="userSpaceOnUse">
                <stop stop-color="#FD6E35"></stop>
                <stop offset="1" stop-color="#F50"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint7_linear" x1="21.114" y1="9.221" x2="21.114" y2="15.54" gradientUnits="userSpaceOnUse">
                <stop stop-color="#fff"></stop>
                <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint8_linear" x1="14.778" y1="5.151" x2="20.733" y2="20.152" gradientUnits="userSpaceOnUse">
                <stop stop-color="red"></stop>
                <stop offset="1" stop-color="red" stop-opacity="0"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint9_linear" x1="21.114" y1="9.221" x2="21.114" y2="30.751" gradientUnits="userSpaceOnUse">
                <stop stop-color="#FD6E35"></stop>
                <stop offset="1" stop-color="#F50"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint10_linear" x1="21.114" y1="9.221" x2="21.114" y2="15.54" gradientUnits="userSpaceOnUse">
                <stop stop-color="#fff"></stop>
                <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint11_linear" x1="14.778" y1="5.151" x2="20.733" y2="20.152" gradientUnits="userSpaceOnUse">
                <stop stop-color="red"></stop>
                <stop offset="1" stop-color="red" stop-opacity="0"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint12_linear" x1="27.901" y1="10.859" x2="14.093" y2="30.751" gradientUnits="userSpaceOnUse">
                <stop stop-color="#fff"></stop>
                <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
            </linearGradient>
        </defs>
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 16" fill="none" id="f_icon_efa5fa29">
        <path d="M21.82 0H2.18C.977 0 0 .97 0 2.165v11.67C0 15.03.976 16 2.18 16h19.64c1.204 0 2.18-.97 2.18-2.165V2.165A2.173 2.173 0 0 0 21.82 0z" fill="#4758A9"></path>
        <path d="M4.457 0h12.686v16L4.457 0z" fill="#FFC700"></path>
        <path d="M2.5 1.617c-.093-.027-.097-.082 0-.123l.342-.15a.317.317 0 0 0 .168-.248v-.34c0-.096.059-.113.12-.041l.23.272c.07.075.177.102.274.068l.37-.146c.09-.038.124 0 .07.082l-.213.34a.267.267 0 0 0 0 .286l.222.29c.059.074.028.122-.065.105l-.363-.068a.303.303 0 0 0-.274.109l-.189.259c-.058.078-.113.064-.123-.031l-.038-.34a.287.287 0 0 0-.189-.222L2.5 1.617zM3.98 3.49c-.092-.028-.095-.082 0-.123l.343-.15a.313.313 0 0 0 .168-.248v-.34c0-.096.059-.113.12-.042l.23.273c.07.075.178.102.274.068l.37-.147c.09-.034.12 0 .07.082l-.213.34a.267.267 0 0 0 0 .287l.223.289c.058.075.027.123-.066.105l-.363-.068a.303.303 0 0 0-.274.11l-.189.258c-.058.078-.113.065-.123-.03l-.041-.341a.286.286 0 0 0-.189-.221l-.34-.102zm1.485 1.872c-.093-.028-.096-.082 0-.123l.343-.15a.313.313 0 0 0 .168-.248V4.5c0-.096.058-.113.12-.041l.23.275c.07.075.177.102.274.068l.37-.146c.09-.037.12 0 .069.082l-.213.34a.267.267 0 0 0 0 .286l.223.29c.058.074.027.122-.065.105l-.364-.068a.303.303 0 0 0-.274.109l-.188.259c-.055.078-.114.064-.124-.031l-.038-.34a.287.287 0 0 0-.188-.222l-.343-.105zM6.95 7.234c-.093-.027-.096-.081 0-.122l.342-.15a.313.313 0 0 0 .168-.249v-.34c0-.095.059-.112.12-.04l.23.275c.07.075.178.102.274.068l.37-.146c.09-.035.12 0 .07.081l-.213.34a.267.267 0 0 0 0 .287l.223.289c.058.075.027.123-.066.106l-.363-.069a.303.303 0 0 0-.274.11l-.189.258c-.058.078-.113.065-.123-.03l-.041-.341a.283.283 0 0 0-.189-.221l-.34-.106zm1.484 1.872c-.092-.027-.096-.081 0-.122l.343-.15a.317.317 0 0 0 .168-.249v-.34c0-.095.058-.112.12-.04l.23.275c.07.075.177.102.274.068l.37-.146c.09-.038.12 0 .069.081l-.213.34a.267.267 0 0 0 0 .287l.223.29c.058.074.028.122-.065.105l-.363-.069a.303.303 0 0 0-.275.11l-.188.258c-.058.078-.113.065-.124-.03l-.04-.34a.283.283 0 0 0-.19-.222l-.339-.106zm1.485 1.873c-.093-.027-.096-.082 0-.123l.343-.15a.317.317 0 0 0 .168-.248v-.34c0-.096.058-.113.12-.041l.23.275a.26.26 0 0 0 .274.069l.37-.147c.09-.037.12 0 .069.082l-.213.34a.267.267 0 0 0 0 .286l.223.29c.058.075.027.122-.065.105l-.364-.068a.303.303 0 0 0-.274.109l-.189.259c-.058.078-.113.064-.123-.03l-.041-.341a.287.287 0 0 0-.189-.222l-.34-.105zm1.484 1.875c-.092-.027-.096-.081 0-.122l.343-.15a.317.317 0 0 0 .168-.248v-.341c0-.095.059-.116.12-.04l.23.275c.07.075.177.102.274.068l.37-.146c.09-.038.12 0 .07.081l-.213.34a.267.267 0 0 0 0 .287l.223.29c.058.074.027.122-.066.105l-.363-.069a.303.303 0 0 0-.274.11l-.189.258c-.058.079-.113.065-.123-.03l-.042-.34a.286.286 0 0 0-.188-.222l-.34-.106zm1.272 1.604c-.092-.027-.096-.082 0-.123l.343-.15a.317.317 0 0 0 .168-.248v-.34c0-.096.059-.113.12-.041l.23.276c.07.074.177.101.274.068l.37-.147c.09-.037.12 0 .073.082l-.213.34a.268.268 0 0 0 0 .286l.223.29c.058.075.03.122-.065.105l-.364-.068a.303.303 0 0 0-.274.109l-.189.259c-.054.078-.113.064-.123-.03l-.041-.341a.286.286 0 0 0-.189-.222l-.343-.105z" fill="#fff"></path>
    </symbol>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" fill="none" id="f_icon_1f2d0f1a">
    <g filter="url(#f_icon_1f2d0f1a_filter0_i)">
        <path d="M13.865 4.666a.936.936 0 0 1 .662-.274h12.924c.249 0 .487.098.662.274l9.14 9.139a.936.936 0 0 1 .273.662V27.39a.936.936 0 0 1-.274.662l-9.139 9.139a.936.936 0 0 1-.662.274H14.527a.936.936 0 0 1-.662-.274l-9.139-9.139a.936.936 0 0 1-.274-.662V14.467c0-.248.099-.487.274-.662l9.14-9.139z" fill="url(#f_icon_1f2d0f1a_paint0_linear)"></path>
    </g>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.222 4.636l-9.585 9.586v13.556l9.585 9.585h13.556l9.585-9.585V14.222l-9.585-9.586H14.222zM13.447.892c-.497 0-.973.197-1.324.548L1.44 12.122a1.872 1.872 0 0 0-.548 1.324v15.107c0 .497.197.973.548 1.324l10.683 10.682c.35.351.827.549 1.324.549h15.106c.497 0 .973-.198 1.324-.549L40.56 29.877c.35-.351.548-.827.548-1.324V13.446c0-.496-.197-.973-.548-1.324L29.877 1.44a1.872 1.872 0 0 0-1.324-.548H13.446z" fill="url(#f_icon_1f2d0f1a_paint1_linear)"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.222 4.636l-9.585 9.586v13.556l9.585 9.585h13.556l9.585-9.585V14.222l-9.585-9.586H14.222zM13.447.892c-.497 0-.973.197-1.324.548L1.44 12.122a1.872 1.872 0 0 0-.548 1.324v15.107c0 .497.197.973.548 1.324l10.683 10.682c.35.351.827.549 1.324.549h15.106c.497 0 .973-.198 1.324-.549L40.56 29.877c.35-.351.548-.827.548-1.324V13.446c0-.496-.197-.973-.548-1.324L29.877 1.44a1.872 1.872 0 0 0-1.324-.548H13.446z" fill="url(#f_icon_1f2d0f1a_paint2_linear)" fill-opacity=".3"></path>
    <g filter="url(#f_icon_1f2d0f1a_filter1_d)">
        <path d="M32.324 17.505l-5.943 4.349-1.203-3.722a.559.559 0 0 1 .532-.731h6.58c.056 0 .079.071.034.104z" fill="url(#f_icon_1f2d0f1a_paint3_linear)"></path>
        <path d="M32.324 17.505l-5.943 4.349-1.203-3.722a.559.559 0 0 1 .532-.731h6.58c.056 0 .079.071.034.104z" fill="url(#f_icon_1f2d0f1a_paint4_linear)" fill-opacity=".2"></path>
        <path d="M32.324 17.505l-5.943 4.349-1.203-3.722a.559.559 0 0 1 .532-.731h6.58c.056 0 .079.071.034.104z" fill="url(#f_icon_1f2d0f1a_paint5_linear)" fill-opacity=".3"></path>
        <path d="M21.06 9.26c.021-.065.098.006.12.072l6.896 21.344.001.006c.01.05-.045.089-.088.06v-.002L9.903 17.505c-.044-.033-.021-.104.034-.104h8.455a.057.057 0 0 0 .054-.04l2.613-8.1z" fill="url(#f_icon_1f2d0f1a_paint6_linear)"></path>
        <path d="M21.06 9.26c.021-.065.098.006.12.072l6.896 21.344.001.006c.01.05-.045.089-.088.06v-.002L9.903 17.505c-.044-.033-.021-.104.034-.104h8.455a.057.057 0 0 0 .054-.04l2.613-8.1z" fill="url(#f_icon_1f2d0f1a_paint7_linear)" fill-opacity=".2"></path>
        <path d="M21.06 9.26c.021-.065.098.006.12.072l6.896 21.344.001.006c.01.05-.045.089-.088.06v-.002L9.903 17.505c-.044-.033-.021-.104.034-.104h8.455a.057.057 0 0 0 .054-.04l2.613-8.1z" fill="url(#f_icon_1f2d0f1a_paint8_linear)" fill-opacity=".3"></path>
        <path d="M17.033 24.138a.559.559 0 0 0-.862.28l-2.018 6.258c-.017.053.043.097.087.064l5.907-4.323-3.114-2.279z" fill="url(#f_icon_1f2d0f1a_paint9_linear)"></path>
        <path d="M17.033 24.138a.559.559 0 0 0-.862.28l-2.018 6.258c-.017.053.043.097.087.064l5.907-4.323-3.114-2.279z" fill="url(#f_icon_1f2d0f1a_paint10_linear)" fill-opacity=".2"></path>
        <path d="M17.033 24.138a.559.559 0 0 0-.862.28l-2.018 6.258c-.017.053.043.097.087.064l5.907-4.323-3.114-2.279z" fill="url(#f_icon_1f2d0f1a_paint11_linear)" fill-opacity=".3"></path>
    </g>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M32.324 17.505c.045-.033.022-.104-.033-.104H25.71c-.38 0-.649.37-.532.73l1.203 3.723 5.943-4.35zm-1.29.364H25.71a.09.09 0 0 0-.087.119l1.005 3.106 4.406-3.225zM21.06 9.26l-2.613 8.101a.057.057 0 0 1-.054.04H9.938c-.055 0-.078.071-.034.104L27.947 30.71l.007.005.034.025.002.001c.042.03.098-.01.087-.059v-.003l-.001-.003-.013-.038L21.18 9.331a.172.172 0 0 0-.018-.04c-.032-.049-.084-.084-.101-.032zm.049 1.375l6.131 18.978-16.045-11.744h7.198c.23 0 .43-.15.5-.364M14.24 30.74c-.044.033-.104-.011-.087-.064l.012-.039 2.006-6.22a.559.559 0 0 1 .862-.279l3.114 2.279-5.907 4.323zm.747-1.127l4.368-3.196-2.598-1.901a.09.09 0 0 0-.14.045l-1.63 5.052z" fill="url(#f_icon_1f2d0f1a_paint12_linear)" fill-opacity=".2"></path>
</svg>

我怎样才能把它变成一个有效的.svg?这样它就可以像其他svg一样使用?基本上将掩码和符号合并在一起,或者至少使其 .svg 可压缩。

【问题讨论】:

【参考方案1】:

显然我可以取出 &lt;symbol&gt; 并将其转换为 &lt;svg&gt; 但也许有不同的方式可以使用掩码和符号,现在我猜这里没有掩码。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" fill="none" id="f_icon_1f2d0f1a">
        <g filter="url(#f_icon_1f2d0f1a_filter0_i)">
            <path d="M13.865 4.666a.936.936 0 0 1 .662-.274h12.924c.249 0 .487.098.662.274l9.14 9.139a.936.936 0 0 1 .273.662V27.39a.936.936 0 0 1-.274.662l-9.139 9.139a.936.936 0 0 1-.662.274H14.527a.936.936 0 0 1-.662-.274l-9.139-9.139a.936.936 0 0 1-.274-.662V14.467c0-.248.099-.487.274-.662l9.14-9.139z" fill="url(#f_icon_1f2d0f1a_paint0_linear)"></path>
        </g>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.222 4.636l-9.585 9.586v13.556l9.585 9.585h13.556l9.585-9.585V14.222l-9.585-9.586H14.222zM13.447.892c-.497 0-.973.197-1.324.548L1.44 12.122a1.872 1.872 0 0 0-.548 1.324v15.107c0 .497.197.973.548 1.324l10.683 10.682c.35.351.827.549 1.324.549h15.106c.497 0 .973-.198 1.324-.549L40.56 29.877c.35-.351.548-.827.548-1.324V13.446c0-.496-.197-.973-.548-1.324L29.877 1.44a1.872 1.872 0 0 0-1.324-.548H13.446z" fill="url(#f_icon_1f2d0f1a_paint1_linear)"></path>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.222 4.636l-9.585 9.586v13.556l9.585 9.585h13.556l9.585-9.585V14.222l-9.585-9.586H14.222zM13.447.892c-.497 0-.973.197-1.324.548L1.44 12.122a1.872 1.872 0 0 0-.548 1.324v15.107c0 .497.197.973.548 1.324l10.683 10.682c.35.351.827.549 1.324.549h15.106c.497 0 .973-.198 1.324-.549L40.56 29.877c.35-.351.548-.827.548-1.324V13.446c0-.496-.197-.973-.548-1.324L29.877 1.44a1.872 1.872 0 0 0-1.324-.548H13.446z" fill="url(#f_icon_1f2d0f1a_paint2_linear)" fill-opacity=".3"></path>
        <g filter="url(#f_icon_1f2d0f1a_filter1_d)">
            <path d="M32.324 17.505l-5.943 4.349-1.203-3.722a.559.559 0 0 1 .532-.731h6.58c.056 0 .079.071.034.104z" fill="url(#f_icon_1f2d0f1a_paint3_linear)"></path>
            <path d="M32.324 17.505l-5.943 4.349-1.203-3.722a.559.559 0 0 1 .532-.731h6.58c.056 0 .079.071.034.104z" fill="url(#f_icon_1f2d0f1a_paint4_linear)" fill-opacity=".2"></path>
            <path d="M32.324 17.505l-5.943 4.349-1.203-3.722a.559.559 0 0 1 .532-.731h6.58c.056 0 .079.071.034.104z" fill="url(#f_icon_1f2d0f1a_paint5_linear)" fill-opacity=".3"></path>
            <path d="M21.06 9.26c.021-.065.098.006.12.072l6.896 21.344.001.006c.01.05-.045.089-.088.06v-.002L9.903 17.505c-.044-.033-.021-.104.034-.104h8.455a.057.057 0 0 0 .054-.04l2.613-8.1z" fill="url(#f_icon_1f2d0f1a_paint6_linear)"></path>
            <path d="M21.06 9.26c.021-.065.098.006.12.072l6.896 21.344.001.006c.01.05-.045.089-.088.06v-.002L9.903 17.505c-.044-.033-.021-.104.034-.104h8.455a.057.057 0 0 0 .054-.04l2.613-8.1z" fill="url(#f_icon_1f2d0f1a_paint7_linear)" fill-opacity=".2"></path>
            <path d="M21.06 9.26c.021-.065.098.006.12.072l6.896 21.344.001.006c.01.05-.045.089-.088.06v-.002L9.903 17.505c-.044-.033-.021-.104.034-.104h8.455a.057.057 0 0 0 .054-.04l2.613-8.1z" fill="url(#f_icon_1f2d0f1a_paint8_linear)" fill-opacity=".3"></path>
            <path d="M17.033 24.138a.559.559 0 0 0-.862.28l-2.018 6.258c-.017.053.043.097.087.064l5.907-4.323-3.114-2.279z" fill="url(#f_icon_1f2d0f1a_paint9_linear)"></path>
            <path d="M17.033 24.138a.559.559 0 0 0-.862.28l-2.018 6.258c-.017.053.043.097.087.064l5.907-4.323-3.114-2.279z" fill="url(#f_icon_1f2d0f1a_paint10_linear)" fill-opacity=".2"></path>
            <path d="M17.033 24.138a.559.559 0 0 0-.862.28l-2.018 6.258c-.017.053.043.097.087.064l5.907-4.323-3.114-2.279z" fill="url(#f_icon_1f2d0f1a_paint11_linear)" fill-opacity=".3"></path>
        </g>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M32.324 17.505c.045-.033.022-.104-.033-.104H25.71c-.38 0-.649.37-.532.73l1.203 3.723 5.943-4.35zm-1.29.364H25.71a.09.09 0 0 0-.087.119l1.005 3.106 4.406-3.225zM21.06 9.26l-2.613 8.101a.057.057 0 0 1-.054.04H9.938c-.055 0-.078.071-.034.104L27.947 30.71l.007.005.034.025.002.001c.042.03.098-.01.087-.059v-.003l-.001-.003-.013-.038L21.18 9.331a.172.172 0 0 0-.018-.04c-.032-.049-.084-.084-.101-.032zm.049 1.375l6.131 18.978-16.045-11.744h7.198c.23 0 .43-.15.5-.364M14.24 30.74c-.044.033-.104-.011-.087-.064l.012-.039 2.006-6.22a.559.559 0 0 1 .862-.279l3.114 2.279-5.907 4.323zm.747-1.127l4.368-3.196-2.598-1.901a.09.09 0 0 0-.14.045l-1.63 5.052z" fill="url(#f_icon_1f2d0f1a_paint12_linear)" fill-opacity=".2"></path>
        <defs>
            <filter id="f_icon_1f2d0f1a_filter0_i" x="4.452" y="4.392"   filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
                <feOffset dy="1.404"></feOffset>
                <feGaussianBlur stdDeviation=".936"></feGaussianBlur>
                <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"></feComposite>
                <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0"></feColorMatrix>
                <feBlend in2="shape" result="effect1_innerShadow"></feBlend>
            </filter>
            <filter id="f_icon_1f2d0f1a_filter1_d" x="7.541" y="7.362"   filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix>
                <feOffset dy=".468"></feOffset>
                <feGaussianBlur stdDeviation="1.17"></feGaussianBlur>
                <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0"></feColorMatrix>
                <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend>
                <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"></feBlend>
            </filter>
            <linearGradient id="f_icon_1f2d0f1a_paint0_linear" x1="14.139" y1="4.392" x2="14.139" y2="39.645" gradientUnits="userSpaceOnUse">
                <stop stop-color="#732600"></stop>
                <stop offset="1" stop-color="#260D00"></stop>
                <stop offset="1" stop-color="#401500"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint1_linear" x1="12.671" y1=".892" x2="29.329" y2="41.108" gradientUnits="userSpaceOnUse">
                <stop stop-color="#FD6E35"></stop>
                <stop offset="1" stop-color="#F50"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint2_linear" x1="-1.82" y1="-2.013" x2="21.114" y2="20.922" gradientUnits="userSpaceOnUse">
                <stop stop-color="red"></stop>
                <stop offset="1" stop-color="red" stop-opacity="0"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint3_linear" x1="21.114" y1="9.221" x2="21.114" y2="30.751" gradientUnits="userSpaceOnUse">
                <stop stop-color="#FD6E35"></stop>
                <stop offset="1" stop-color="#F50"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint4_linear" x1="21.114" y1="9.221" x2="21.114" y2="15.54" gradientUnits="userSpaceOnUse">
                <stop stop-color="#fff"></stop>
                <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint5_linear" x1="14.778" y1="5.151" x2="20.733" y2="20.152" gradientUnits="userSpaceOnUse">
                <stop stop-color="red"></stop>
                <stop offset="1" stop-color="red" stop-opacity="0"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint6_linear" x1="21.114" y1="9.221" x2="21.114" y2="30.751" gradientUnits="userSpaceOnUse">
                <stop stop-color="#FD6E35"></stop>
                <stop offset="1" stop-color="#F50"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint7_linear" x1="21.114" y1="9.221" x2="21.114" y2="15.54" gradientUnits="userSpaceOnUse">
                <stop stop-color="#fff"></stop>
                <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint8_linear" x1="14.778" y1="5.151" x2="20.733" y2="20.152" gradientUnits="userSpaceOnUse">
                <stop stop-color="red"></stop>
                <stop offset="1" stop-color="red" stop-opacity="0"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint9_linear" x1="21.114" y1="9.221" x2="21.114" y2="30.751" gradientUnits="userSpaceOnUse">
                <stop stop-color="#FD6E35"></stop>
                <stop offset="1" stop-color="#F50"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint10_linear" x1="21.114" y1="9.221" x2="21.114" y2="15.54" gradientUnits="userSpaceOnUse">
                <stop stop-color="#fff"></stop>
                <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint11_linear" x1="14.778" y1="5.151" x2="20.733" y2="20.152" gradientUnits="userSpaceOnUse">
                <stop stop-color="red"></stop>
                <stop offset="1" stop-color="red" stop-opacity="0"></stop>
            </linearGradient>
            <linearGradient id="f_icon_1f2d0f1a_paint12_linear" x1="27.901" y1="10.859" x2="14.093" y2="30.751" gradientUnits="userSpaceOnUse">
                <stop stop-color="#fff"></stop>
                <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
            </linearGradient>
        </defs>
    </svg>

【讨论】:

【参考方案2】:

您所拥有的是内联 SVG。在 HTML5 下,&lt;svg&gt; 是一个有效标签,可用于在标记中的该点添加图像(或滤镜效果等)。要将其制作成 SVG 文件,您只需要做一件事:删除封闭的 &lt;html&gt; 标签。

您可能希望通过从根元素中删除现在无关的styleid 属性来进一步清理它,但这并不是绝对必要的。至于 mask 和 symbol 元素,它们是有效的 svg 标记,你不能指望在不改变 SVG 图像显示方式的情况下删除它们。

【讨论】:

以上是关于将带有掩码和符号的 SVG 转换为纯 SVG 文件?的主要内容,如果未能解决你的问题,请参考以下文章

如何将 SVG 文件转换为 JPEG?

带有 png 文件的掩码图像

如何将带有 SVG 的 div#WareHouse 转换为图像

svg-sprite:符号转换为单个 svg 图标

如何在 Google Maps API v3 中使用 SVG 标记

在 android studio 中使用复杂的 SVG