我想从svg文件中提取不同的图标

时间:2017-07-03 18:01:05

标签: html css image svg

我有一个.svg文件,其中显示所有图标。 我试图通过检查chrome来提取图标。但是当我使用.svg代码时,图标显示得非常大。无法搞清楚。 任何帮助将不胜感激。

    <?xml version="1.0" encoding="UTF-8"?>
    <svg width="3693px" height="6570px" viewBox="0 0 3693 6570"
        version="1.1" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
        <g></g>
        <g></g>
        .
        .
        .
        <g xmlns="http://www.w3.org/2000/svg" id="Page-1"
            transform="translate(792.000000, 1270.000000)">
        <path
            d="M114.76328,77.3289486 L164.333813,33.7049757 L164.333813,120.950732 L114.76328,77.3289486 Z M64.8402696,82.9792459 L86.5875957,102.115678 L108.334922,82.9792459 L157.36727,126.125976 L15.8181174,126.125976 L64.8402696,82.9792459 Z M58.4119109,77.3289486 L8.84137826,120.950732 L8.84137826,33.7049757 L58.4119109,77.3289486 Z M86.5875957,90.8128946 L15.8603565,28.5698676 L157.32503,28.5698676 L86.5875957,90.8128946 Z M0.364421739,134.622949 L172.821693,134.622949 L172.821693,20.0750838 L0.364421739,20.0750838 L0.364421739,134.622949 Z"
            id="Fill-1" fill="#01D78F" />
        <g id="Group-7" transform="translate(0.000000, 0.717324)">
        <path
            d="M114.76328,76.6116243 L164.333813,32.9876514 L164.333813,120.233408 L114.76328,76.6116243 Z M64.8402696,82.2619216 L86.5875957,101.398354 L108.334922,82.2619216 L157.36727,125.408651 L15.8181174,125.408651 L64.8402696,82.2619216 Z M58.4119109,76.6116243 L8.84137826,120.233408 L8.84137826,32.9876514 L58.4119109,76.6116243 Z M86.5875957,90.0955703 L15.8603565,27.8525432 L157.32503,27.8525432 L86.5875957,90.0955703 Z M0.364421739,133.905624 L172.821693,133.905624 L172.821693,19.3577595 L0.364421739,19.3577595 L0.364421739,133.905624 Z"
            id="Stroke-2" stroke="#FFFFFF" stroke-width="3" />
        <g id="Group-6" transform="translate(136.913043, 0.000000)">
        <mask id="mask-12" fill="white">
        <use xmlns:xlink="http://www.w3.org/1999/xlink"
            xlink:href="#path-11" />
        </mask>
        <g id="Clip-5" />
        <path
            d="M63.909188,31.8700703 C63.909188,49.4645838 49.6746011,63.7278811 32.1155033,63.7278811 C14.5556772,63.7278811 0.321818478,49.4645838 0.321818478,31.8700703 C0.321818478,14.2755568 14.5556772,0.0122594595 32.1155033,0.0122594595 C49.6746011,0.0122594595 63.909188,14.2755568 63.909188,31.8700703"
            id="Fill-4" fill="#28B280" mask="url(#mask-12)" />
                    </g>
                </g>
                <text id="9" font-family="Helvetica" font-size="48.9436"
            font-weight="normal" fill="#FFFFFF">
                    <tspan x="157.116479" y="48.9249811">9</tspan>
                </text>
            </g>
        .
        .
        </svg>

1 个答案:

答案 0 :(得分:1)

您的SVG的宽度和高度非常大:

width="3693px" height="6570px"

如果您希望SVG扩展到其容器的大小,请将它们更改为"100%",或者完全删除这些属性(这是等效的)。