Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/svg/custom/embedding-external-svgs.xhtml 

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
    <head>
        <title>SVG Tests</title>
        
        <style type="text/css" media="screen">
            p
            {
                margin-left: 50px;
            }
        </style>
    </head>
    <body style="margin: 0px; background-color: #bbb;">
        
        <p>SVG in a "transparent" EMBED tag: <embed src="resources/spinner.svg" type="image/svg+xml" width="40" height="40" wmode="transparent" /></p>
        
        <p>SVG in an IMG tag: <img src="resources/spinner.svg" width="30" height="30" /></p>
        
        <p style="">SVG in a background-image:</p><div style="position: relative; top: -3em; left: 250px; border: 1px solid #aaa; width: 40px; height: 40px; background-image: url(resources/spinner.svg); background-repeat: no-repeat;"></div>
        
        <p>SVG in a "transparent" iframe: <iframe src="resources/spinner.svg" frameborder="0" width="40" height="40" allowtransparency="true"></iframe></p>
                
        <p>Inline  
        
            <svg:svg width="30px" height="30px" viewBox="0 0 50 50">
                <svg:g id="spinner" >
                    <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(0,25,25)"   fill-opacity="0.04" />
                    <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(30,25,25)"  fill-opacity="0.08" />
                    <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(60,25,25)"  fill-opacity="0.12" />
                    <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(90,25,25)"  fill-opacity="0.16" />
                    <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(120,25,25)" fill-opacity="0.20" />
                    <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(150,25,25)" fill-opacity="0.24" />
                    <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(180,25,25)" fill-opacity="0.29" />
                    <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(210,25,25)" fill-opacity="0.33" />
                    <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(240,25,25)" fill-opacity="0.37" />
                    <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(270,25,25)" fill-opacity="0.41" />
                    <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(300,25,25)" fill-opacity="0.45" />
                    <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(330,25,25)" fill-opacity="0.50" />       
                </svg:g>
            </svg:svg>

        </p>
        
    </body>
</html>