Q:

Svg image using javascript and php

I want to display an image like below but if we increase the image height and width then image is distorted.How can we use svg image for it. 
How can we use svg image using javascript or jquery.
example
  <div id="dialog_up" title="Image upload dialog">
  <label class="filebutton" style="padding:0;">
  <img style="width:60px; height:60px;" id="up_img" src="http://i.stack.imgur.com/0CD2D.png" alt="upload" border="0"/> <span>
  <form method="post" enctype="multipart/form-data"  action="<?php echo Yii::app()->request->baseUrl?e">
    <input type="file" name="images" id="images" class="images"  style="width:20%;"/>
    <input type="hidden" id="img_name" name="img_name"/>
    <button type="submit" id="btn"></button>
  </form>
  </span>
  </label>
</div>

A:

You could just link to the svg using the img tag like this:
<img src="image.svg">

And if you're using php just link to the uploaded file.
Note: I have almost always had to adjust htaccess for svg files. 
<FilesMatch "\.(svg)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

AddType image/svg+xml svg
AddType image/svg+xml svgz

Also, here's svg code for the image recreated and output from Adobe Illustrator, and here's a very quick fiddle to test some kind of responsive behavior (in this case, window resize).
    <svg version="1.1" id="svgUpload" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve">
        <rect x="-20.994" y="-21.132" fill="#636464" width="101.987" height="101.987" />
        <g>
            <path fill="#FFFFFF" d="M46.978,26.747c0,0.156-0.013,0.288-0.048,0.42c-0.108,0.516-0.528,0.875-1.056,0.875
    c-0.756,0-1.247-0.624-1.247-1.619c0-0.923,0.432-1.667,1.259-1.667c0.563,0,0.96,0.408,1.067,0.899
    c0.012,0.096,0.024,0.228,0.024,0.324V26.747z M46.978,20.847v3.178h-0.024c-0.264-0.408-0.827-0.66-1.547-0.66
    c-1.403,0-2.639,1.139-2.627,3.118c0,1.823,1.115,3.01,2.507,3.01c0.756,0,1.463-0.336,1.835-0.995h0.024l0.084,0.863h1.619
    c-0.024-0.396-0.049-1.091-0.049-1.751v-6.764H46.978z M39.897,27.227c0,0.108-0.012,0.216-0.036,0.312
    c-0.119,0.372-0.491,0.672-0.947,0.672c-0.407,0-0.72-0.228-0.72-0.696c0-0.708,0.744-0.935,1.703-0.923V27.227z M41.757,29.362
    c-0.061-0.324-0.084-0.863-0.084-1.427v-2.039c0-1.379-0.624-2.53-2.579-2.53c-1.067,0-1.87,0.288-2.278,0.516l0.336,1.175
    c0.384-0.24,1.02-0.444,1.619-0.444c0.899,0,1.067,0.444,1.067,0.756v0.084c-2.075-0.012-3.442,0.719-3.442,2.243
    c0,0.936,0.708,1.799,1.896,1.799c0.695,0,1.295-0.252,1.679-0.72h0.036l0.107,0.588H41.757z M32.603,24.661
    c0.827,0,1.163,0.887,1.163,1.763c0,1.056-0.456,1.763-1.163,1.763c-0.78,0-1.2-0.756-1.2-1.763
    C31.402,25.56,31.727,24.661,32.603,24.661z M32.65,23.365c-1.883,0-3.131,1.211-3.131,3.106c0,1.895,1.319,3.022,3.034,3.022
    c1.571,0,3.095-0.983,3.095-3.13C35.648,24.601,34.449,23.365,32.65,23.365z M26.555,29.362h1.823v-8.515h-1.823V29.362z
     M21.202,26.04c0-0.108,0.012-0.228,0.036-0.324c0.12-0.54,0.575-0.923,1.091-0.923c0.815,0,1.235,0.708,1.235,1.643
    c0,0.995-0.468,1.655-1.259,1.655c-0.528,0-0.947-0.372-1.067-0.863c-0.024-0.108-0.036-0.24-0.036-0.384V26.04z M19.379,31.736
    h1.823v-2.914h0.023c0.265,0.384,0.816,0.671,1.523,0.671c1.308,0,2.663-1.007,2.663-3.142c0-1.871-1.151-2.986-2.435-2.986
    c-0.852,0-1.523,0.324-1.955,0.947h-0.024l-0.084-0.815h-1.583c0.024,0.54,0.048,1.199,0.048,1.967V31.736z M11.243,21.278v4.509
    c0,2.579,1.199,3.706,3.238,3.706c2.111,0,3.37-1.188,3.37-3.682v-4.534h-1.823v4.653c0,1.427-0.527,2.099-1.486,2.099
    c-0.936,0-1.464-0.708-1.464-2.099v-4.653H11.243z" />
            <path fill="#FFFFFF" d="M40.019,39.06c0.827,0,1.163,0.888,1.163,1.763c0,1.056-0.456,1.763-1.163,1.763
    c-0.78,0-1.2-0.756-1.2-1.763C38.818,39.96,39.143,39.06,40.019,39.06z M40.066,37.765c-1.883,0-3.131,1.211-3.131,3.106
    c0,1.895,1.319,3.022,3.034,3.022c1.571,0,3.095-0.983,3.095-3.13C43.064,39,41.865,37.765,40.066,37.765z M33.981,41.147
    c0,0.156-0.013,0.348-0.061,0.48c-0.12,0.432-0.491,0.744-0.959,0.744c-0.768,0-1.199-0.684-1.199-1.559
    c0-1.067,0.539-1.667,1.199-1.667c0.504,0,0.852,0.324,0.983,0.804c0.023,0.096,0.036,0.216,0.036,0.336V41.147z M34.269,37.897
    l-0.06,0.696h-0.024c-0.3-0.48-0.803-0.828-1.606-0.828c-1.439,0-2.663,1.199-2.663,3.082c0,1.691,1.031,2.867,2.482,2.867
    c0.672,0,1.235-0.276,1.584-0.768h0.023v0.384c0,1.079-0.659,1.547-1.523,1.547c-0.684,0-1.331-0.228-1.702-0.444l-0.36,1.379
    c0.527,0.3,1.344,0.456,2.111,0.456c0.863,0,1.738-0.168,2.387-0.72c0.659-0.588,0.887-1.511,0.887-2.639v-3.274
    c0-0.876,0.024-1.368,0.049-1.739H34.269z M26.039,39.06c0.827,0,1.163,0.888,1.163,1.763c0,1.056-0.456,1.763-1.163,1.763
    c-0.78,0-1.2-0.756-1.2-1.763C24.839,39.96,25.163,39.06,26.039,39.06z M26.087,37.765c-1.883,0-3.131,1.211-3.131,3.106
    c0,1.895,1.319,3.022,3.034,3.022c1.571,0,3.095-0.983,3.095-3.13C29.085,39,27.886,37.765,26.087,37.765z M17.328,43.762h5.049
    v-1.535h-3.214v-6.548h-1.835V43.762z" />
        </g>
    </svg> 

