Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Creating logo using SVG in HTML 5

    @sunil.chatterji
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 741
    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

    1. <!doctype>
    2. <html>
    3. <head>
    4. </head>
    5. <body>
    6. <?xml version="1.0" encoding="utf-8"?>
    7. <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"
    8.      width="296.086px" height="132.092px" viewBox="0 0 296.086 132.092" enable-background="new 0 0 296.086 132.092"
    9.      xml:space="preserve">
    10. <path d="M-0.166,93.833l66.749,0.417L66.333,83H12C12,83,3.002,84.082-0.166,93.833z"/>
    11. <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
    12.     c0.035,2.333,2.146,2.917,7.313,2.917S67,114,67,114z"/>
    13. <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 "/>
    14. <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
    15.     c0,0,0.5-11.5-10.75-13.5L229.625,82.188L229.625,82.188z"/>
    16. <g>
    17.         <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)">
    18.         <stop  offset="0" style="stop-color:#BFE5FF"/>
    19.         <stop  offset="1" style="stop-color:#002655"/>
    20.     </linearGradient>
    21.     <circle fill="url(#SVGID_1_)" cx="228.708" cy="16.958" r="15.958"/>
    22. </g>
    23. <g>
    24.         <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)">
    25.         <stop  offset="0" style="stop-color:#BFE5FF"/>
    26.         <stop  offset="1" style="stop-color:#002655"/>
    27.     </linearGradient>
    28.     <circle fill="url(#SVGID_2_)" cx="182.375" cy="97.625" r="29.625"/>
    29. </g>
    30. <g>
    31.         <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)">
    32.         <stop  offset="0" style="stop-color:#BFE5FF"/>
    33.         <stop  offset="1" style="stop-color:#002655"/>
    34.     </linearGradient>
    35.     <circle fill="url(#SVGID_3_)" cx="196.542" cy="44.792" r="19.458"/>
    36. </g>
    37. <g>
    38.         <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)">
    39.         <stop  offset="0" style="stop-color:#BFE5FF"/>
    40.         <stop  offset="1" style="stop-color:#002655"/>
    41.     </linearGradient>
    42.     <circle fill="url(#SVGID_4_)" cx="256.708" cy="38.958" r="12.958"/>
    43. </g>
    44. <g>
    45.         <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)">
    46.         <stop  offset="0" style="stop-color:#BFE5FF"/>
    47.         <stop  offset="1" style="stop-color:#002655"/>
    48.     </linearGradient>
    49.     <circle fill="url(#SVGID_5_)" cx="253.875" cy="71.125" r="10.125"/>
    50. </g>
    51. </svg>
    52. </body>
    53. </html>

    HTML5 css3 Svg
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: