Question

我只是Inline SVG的新手，从我的阅读中听起来真的很有趣。我特别喜欢它可以保持多种颜色的方式（目前丢失了ith图标字体）。

以下是在Adobe Illistrator中创建并导出为SVG的图形：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="265.427px" height="105.59px" viewBox="0 0 265.427 105.59" enable-background="new 0 0 265.427 105.59"
     xml:space="preserve">
<g id="Edit_Button_1_">
    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="132.7144" y1="10.8496" x2="132.7144" y2="90.4107">
        <stop  offset="0.099" style="stop-color:#F5F6F6"/>
        <stop  offset="0.8267" style="stop-color:#E9E9E9"/>
    </linearGradient>

        <rect x="0.474" y="0.474" fill="url(#SVGID_1_)" stroke="#CDCCCC" stroke-width="0.9479" stroke-miterlimit="10" width="264.479" height="104.643"/>
    <g>
        <g>
            <g>
                <g>
                    <polygon fill="#6F6F6F" points="27.945,62.067 20.953,83.479 42.234,76.368                   "/>
                </g>
                <g>
                    <path fill="#6F6F6F" d="M67.206,22.81c3.765-3.827,9.988-3.805,14.024,0.166c4.024,3.969,4.154,10.186,0.39,14.013
                        L67.206,22.81z"/>
                </g>
                <polygon fill="#6F6F6F" points="45.999,72.609 31.698,58.312 62.865,27.153 77.16,41.45               "/>
            </g>
        </g>
    </g>
    <text transform="matrix(1 0 0 1 100.8813 74.3232)" fill="#6F6F6F" font-family="'Verdana'" font-size="57.8802">EDIT</text>
</g>
</svg>

我很想知道如何把它放到HTML页面上。我是否只需将<svg>复制到</svg>代码？

是否需要转换/优化？

我还阅读了有关定义SVG文件供以后使用的内容：http://css-tricks.com/svg-sprites-use-better-icon-fonts/

这有什么优点/缺点？

非常感谢!!

Answer 1

是。您只需要复制<svg>部分。 <?xml>和<!DOCTYPE>）。

Demo here

内联SVG - 如何将image.svg放到页面上

1 个答案: