Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Creating logo using SVG in HTML 5

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 440
    Comment on it

    Hell Readers,

    If you want to create a logo using SVG in HTML 5, it's not a big deal, you can refer below simple example

    <!doctype>
    <html>
    <head>
    </head>
    <body>
    <?xml version="1.0" encoding="utf-8"?>
    <svg version="1.1" id="Evon_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_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_1_)" cx="228.708" cy="16.958" r="15.958"/>
    </g>
    <g>
            <linearGradient id="SVGID_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_2_)" cx="182.375" cy="97.625" r="29.625"/>
    </g>
    <g>
            <linearGradient id="SVGID_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_3_)" cx="196.542" cy="44.792" r="19.458"/>
    </g>
    <g>
            <linearGradient id="SVGID_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_4_)" cx="256.708" cy="38.958" r="12.958"/>
    </g>
    <g>
            <linearGradient id="SVGID_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_5_)" cx="253.875" cy="71.125" r="10.125"/>
    </g>
    </svg>
    </body>
    </html>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: