17 October 2013

Design a Logo using SVG (Scalable Vector Graphics)

Hi  All,

Let see how can we create Java Logo using SVG.  If you are aware with basic of SVG else you can get basic SVG understand from this link.

To design a Logo you must know the basic path tag and curve etc. Open notepad and paste the following content and save the file and "JavaLogo.svg" and open it in any browser to see the Java Logo you just designed . :)

<svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" x="0px" y="0px"
      width="300px" height="550px" viewBox="0 0 300 550">
    <path style="fill:#5382A1;" 
             d="M102.681,291.324
                c0,0-14.178,8.245,10.09,11.035
                c29.4,3.354,44.426,2.873,76.825-3.259  
                c0,0,8.518,5.341,20.414,9.967
                C137.38,340.195,45.634,307.264,102.681,291.324"/>
             
    <path style="fill:#5382A1;" 
             d="M93.806,250.704
                c0,0-15.902,11.771,8.384,14.283
                c31.406,3.24,56.208,3.505,99.125-4.759 
                c0,0,5.936,6.018,15.27,9.309
                C128.771,295.215,30.962,271.562,93.806,250.704"/>
                
    <path style="fill:#E76F00;" 
             d="M168.625,181.799
                c17.896,20.604-4.702,39.145-4.702,39.145
                s45.441-23.458,24.572-52.833 
                c-19.491-27.394-34.438-41.005,46.479-87.934
                C234.974,80.177,107.961,111.899,168.625,181.799"/>
                
    <path style="fill:#5382A1;" 
             d="M264.684,321.369
                c0,0,10.492,8.645-11.555,15.333
                c-41.923,12.7-174.488,16.535-211.314,0.506 
                c-13.238-5.759,11.587-13.751,19.396-15.428
                c8.144-1.766,12.798-1.437,12.798-1.437
                c-14.722-10.371-95.157,20.364-40.857,29.166
                C181.236,373.524,303.095,338.695,264.684,321.369"/>
                
    <path style="fill:#5382A1;" 
             d="M109.499,208.617
                c0,0-67.431,16.016-23.879,21.832
                c18.389,2.462,55.047,1.905,89.193-0.956 
                c27.906-2.354,55.927-7.359,55.927-7.359
                s-9.84,4.214-16.959,9.075
                c-68.475,18.009-200.756,9.631-162.674-8.79
                C83.313,206.851,109.499,208.617,109.499,208.617"/>
                
    <path style="fill:#5382A1;" 
             d="M230.462,276.231
                c69.608-36.171,37.424-70.931,14.96-66.248
                c-5.506,1.146-7.961,2.139-7.961,2.139 
                s2.044-3.202,5.948-4.588
                c44.441-15.624,78.619,46.081-14.346,70.52
                C229.063,278.055,230.14,277.092,230.462,276.231"/>
                
    <path style="fill:#E76F00;" 
             d="M188.495,4.399c0,0,38.55,38.563-36.563,97.862
                c-60.233,47.568-13.735,74.69-0.025,105.678  
                c-35.159-31.722-60.961-59.647-43.651-85.637
                C133.663,84.151,204.049,65.654,188.495,4.399"/>
                
    <path style="fill:#5382A1;" 
             d="M116.339,374.246
                c66.815,4.277,169.417-2.373,171.847-33.988
                c0,0-4.671,11.985-55.219,21.503  
                c-57.028,10.732-127.364,9.479-169.081,2.601
                C63.887,364.361,72.426,371.43,116.339,374.246"/>
                
    <path style="fill:#E76F00;" 
             d="M105.389,495.048
                c-6.303,5.467-12.96,8.536-18.934,8.536
                c-8.527,0-13.134-5.113-13.134-13.314 
                c0-8.871,4.936-15.357,24.739-15.357
                h7.328
                V495.048 
                M122.781,514.671
                v-60.742
                c0-15.517-8.85-25.756-30.188-25.756 
                c-12.457,0-23.369,3.076-32.238,6.999l2.56,10.752
                c6.983-2.563,16.022-4.949,24.894-4.949
                c12.292,0,17.58,4.949,17.58,15.181
                v7.677
                h-6.135
                c-29.865,0-43.337,11.593-43.337,28.994
                c0,15.017,8.878,23.553,25.594,23.553
                c10.745,0,18.766-4.436,26.264-10.928
                l1.361,9.22
                H122.781z"/>
                
    <path style="fill:#E76F00;" 
             d="M180.825,514.671
                h-21.692
                l-26.106-84.96
                h18.943
                l16.199,52.2l3.601,15.699 
                c8.195-22.698,13.991-45.726,16.89-67.899
                h18.427
                C202.15,457.688,193.266,488.396,180.825,514.671"/>
                
    <path style="fill:#E76F00;" 
             d="M264.038,495.048
                c-6.315,5.467-12.984,8.536-18.958,8.536
                c-8.512,0-13.131-5.113-13.131-13.314 
                c0-8.871,4.948-15.357,24.749-15.357h7.34
                V495.048 
                M281.428,514.671
                v-60.742
                c0-15.517-8.872-25.756-30.185-25.756
                c-12.466,0-23.382,3.076-32.247,6.999l2.556,10.752
                c6.986-2.563,16.042-4.949,24.907-4.949
                c12.283,0,17.579,4.949,17.579,15.181
                v7.677
                h-6.145
                c-29.874,0-43.34,11.593-43.34,28.994
                c0,15.017,8.871,23.553,25.584,23.553
                c10.751,0,18.769-4.436,26.28-10.928
                l1.366,9.22
                H281.428z"/>
                
    <path style="fill:#E76F00;" 
             d="M36.847,529.099
                c-4.958,7.239-12.966,12.966-21.733,16.206
                l-8.587-10.105 
                c6.673-3.424,12.396-8.954,15.055-14.105
                c2.3-4.581,3.252-10.485,3.252-24.604
                v-96.995
                h18.478
                v95.666 
                C43.311,514.038,41.802,521.663,36.847,529.099"/>
</svg>

And the output will be this Java Logo  - 


To understand the basic of SVG follow the link SVG and Tags.

Happy Knowledge sharing.. :)


No comments:

Post a Comment