开发者

How to Inline SVG?

开发者 https://www.devze.com 2023-03-11 17:09 出处：网络

I\'m trying to add inline SVG to an HTML file, but it doesn\'t show anything, while it\'s fine if separate. Why?

相关专题：inline svg

I'm trying to add inline SVG to an HTML file, but it doesn't show anything, while it's fine if separate. Why?

<html>
    <head></head>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            xmlns:inkscape="http://www.inkscape.org/namespaces/inkscap开发者_运维知识库e"
            width="16px" height="16px">

            <defs>
              <linearGradient id="lg1">
                <stop style="stop-color:#ffffff;stop-opacity:0.50;" offset="0"/>
                <stop style="stop-color:#00ff00;stop-opacity:0.75;" offset="1"/>
              </linearGradient>
              <linearGradient xlink:href="#lg1" id="lg2"
                x1="0" y1="0" x2="16" y2="0" gradientUnits="userSpaceOnUse" />
            </defs>
            <g>
              <rect style="fill:url(#lg2);fill-opacity:1" id="rect3001"
                width="48" height="48" x="0" y="0" />
            </g>
        </svg>
    </body>
</html>

Add <!DOCTYPE html> - looks like IE9 requires it, but FF and Chrome didn't.

Alternately, use XHTML.