Wednesday 25 March 2015

Creating logo using SVG in HTML 5



        <!doctype>
        <html>
        <head>
        </head>
        <body>
        <?xml version="1.0" encoding="utf-8"?>
        <svg version="1.1" id="Evon&#95;Text" xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="296.086px" height="132.092px" viewBox="0 0 296.086 132.092" enable-

background="new 0 0 296.086 132.092"
             xml:space="preserve">
        <path d="M-0.166,93.833l66.749,0.417L66.333,83H12C12,83,3.002,84.082-0.166,93.833z"/>
        <path d="M67,114v10l-51.25-0.167c0,0-18.75,1.167-14.417-23.833H66v8l-47.917,0.334c0,0

-6.749-0.334-6.707,2.416
            c0.035,2.333,2.146,2.917,7.313,2.917S67,114,67,114z"/>
        <polygon points="72.917,83.542 102.084,123.521 113.042,124.01 140.084,84 128,84

107.168,113.084 85.334,83.459 "/>
        <path d="M229.625,82.188l-0.313,41.655L241,124.125V95h32c0,0,12-

0.563,12.125,9.938c0.125,10.5-0.25,19.062-0.25,19.062H295V96
            c0,0,0.5-11.5-10.75-13.5L229.625,82.188L229.625,82.188z"/>
        <g>
                <linearGradient id="SVGID&#95;1_" gradientUnits="userSpaceOnUse" x1="858.7485"

y1="4.7109" x2="890.6646" y2="4.7109" gradientTransform="matrix(-4.371139e-008 1 1 4.371139e-

008 223.9977 -857.7482)">
                <stop  offset="0" style="stop-color:#BFE5FF"/>
                <stop  offset="1" style="stop-color:#002655"/>
            </linearGradient>
            <circle fill="url(#SVGID&#95;1_)" cx="228.708" cy="16.958" r="15.958"/>
        </g>
        <g>
                <linearGradient id="SVGID&#95;2_" gradientUnits="userSpaceOnUse" x1="925.7485"

y1="-41.6221" x2="984.9985" y2="-41.6221" gradientTransform="matrix(-4.371139e-008 1 1

4.371139e-008 223.9977 -857.7482)">
                <stop  offset="0" style="stop-color:#BFE5FF"/>
                <stop  offset="1" style="stop-color:#002655"/>
            </linearGradient>
            <circle fill="url(#SVGID&#95;2_)" cx="182.375" cy="97.625" r="29.625"/>
        </g>
        <g>
                <linearGradient id="SVGID&#95;3_" gradientUnits="userSpaceOnUse" x1="883.0825"

y1="-27.4551" x2="921.9985" y2="-27.4551" gradientTransform="matrix(-4.371139e-008 1 1

4.371139e-008 223.9977 -857.7482)">
                <stop  offset="0" style="stop-color:#BFE5FF"/>
                <stop  offset="1" style="stop-color:#002655"/>
            </linearGradient>
            <circle fill="url(#SVGID&#95;3_)" cx="196.542" cy="44.792" r="19.458"/>
        </g>
        <g>
                <linearGradient id="SVGID&#95;4_" gradientUnits="userSpaceOnUse" x1="883.7485"

y1="32.7109" x2="909.6646" y2="32.7109" gradientTransform="matrix(-4.371139e-008 1 1

4.371139e-008 223.9977 -857.7482)">
                <stop  offset="0" style="stop-color:#BFE5FF"/>
                <stop  offset="1" style="stop-color:#002655"/>
            </linearGradient>
            <circle fill="url(#SVGID&#95;4_)" cx="256.708" cy="38.958" r="12.958"/>
        </g>
        <g>
                <linearGradient id="SVGID&#95;5_" gradientUnits="userSpaceOnUse" x1="918.7485"

y1="29.8779" x2="938.9985" y2="29.8779" gradientTransform="matrix(-4.371139e-008 1 1

4.371139e-008 223.9977 -857.7482)">
                <stop  offset="0" style="stop-color:#BFE5FF"/>
                <stop  offset="1" style="stop-color:#002655"/>
            </linearGradient>
            <circle fill="url(#SVGID&#95;5_)" cx="253.875" cy="71.125" r="10.125"/>
        </g>
        </svg>
        </body>
        </html>

For such more Blogs you can visit to http://findnerd.com/NerdDigest/Html/

No comments:

Post a Comment