title: How do I resize the canvas in Raphael.js?
body: <p>I'm having difficulty resizing the canvas in Raphael.js. I thought I could simply use:</p>
  
  <pre class="lang-js prettyprint-override"><code>var paper = Raphael("paper", 100, 100);
  </code></pre>
  
  <p>and this would create a canvas using the ID "paper" with a width and height of 100 pixels. However when I try this the canvas doesn't initialize with these settings. I'm using some of the free icons on the Raphael.js website and I was wondering how I would change the size of the icons? Do I have to use the transform function as well? If so could somebody please create a jsfiddle example.</p>
  
  <p>Thanks in advance.</p>
  
  <p>Sorry if I haven't explained myself very well, but Raphael.js is completely new to me.</p>
  
  <p>EDIT:</p>
  
  <p>I tried your suggestions, but to no avail. Here's the code I'm working on. Maybe I have a conflict or something. Any ideas?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Logo Experiment&lt;/title&gt;
          &lt;link rel="stylesheet" href="css/960_16_col.css"/&gt;
          &lt;link rel="stylesheet" href="css/stylesheet.css"/&gt;
          &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/raphael-min.js"&gt;&lt;/script&gt;
          &lt;script src="js/script.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container_16"&gt;  
              &lt;div class="grid_4"&gt;
                  &lt;div id="design"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="grid_2"&gt;
                  &lt;div class="arrow"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="grid_4"&gt;
                  &lt;div id="build"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="grid_2"&gt;
                  &lt;div class="arrow"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="grid_4"&gt;
                  &lt;div id="deliver"&gt;&lt;/div&gt;
              &lt;/div&gt;  
              &lt;div class="clear"&gt;&lt;/div&gt;    
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>window.onload = function() {
      var design = Raphael("design");
      design.path("M24.359,18.424l-2.326,1.215c0.708,1.174,1.384,2.281,1.844,3.033l2.043-1.066C25.538,20.822,24.966,19.652,24.359,18.424zM19.143,14.688c0.445,0.84,1.342,2.367,2.274,3.926l2.414-1.261c-0.872-1.769-1.72-3.458-2.087-4.122c-0.896-1.621-1.982-3.108-3.454-5.417c-1.673-2.625-3.462-5.492-4.052-4.947c-1.194,0.384,1.237,4.094,1.876,5.715C16.73,10.147,17.991,12.512,19.143,14.688zM26.457,22.673l-1.961,1.022l1.982,4.598c0,0,0.811,0.684,1.92,0.213c1.104-0.469,0.81-1.706,0.81-1.706L26.457,22.673zM24.35,15.711c0.168,0.339,2.924,5.93,2.924,5.93h1.983v-5.93H24.35zM18.34,15.704h-4.726l-3.424,5.935h11.66C21.559,21.159,18.771,16.479,18.34,15.704zM3.231,21.613l3.437-5.902H2.083v5.93h1.133L3.231,21.613zM15.048,10.145c0-0.93-0.754-1.685-1.685-1.685c-0.661,0-1.231,0.381-1.507,0.936l2.976,1.572C14.97,10.725,15.048,10.444,15.048,10.145zM14.343,12.06l-3.188-1.684L9.62,13.012l3.197,1.689L14.343,12.06zM3.192,26.886l-0.384,1.108v0.299l0.298-0.128l0.725-0.896l2.997-2.354l-3.137-1.651L3.192,26.886zM9.02,14.044l-4.757,8.17l3.23,1.706l4.728-8.186L9.02,14.044z").attr({fill: "#666", stroke: "#000"});
  
      var build = Raphael("build");
      build.path("M28.537,9.859c-0.473-0.259-1.127-0.252-1.609-0.523c-0.943-0.534-1.186-1.316-1.226-2.475c-2.059-2.215-5.138-4.176-9.424-4.114c-1.162,0.017-2.256-0.035-3.158,0.435c-0.258,0.354-0.004,0.516,0.288,0.599c-0.29,0.138-0.692,0.147-0.626,0.697c2.72-0.383,7.475,0.624,7.116,2.966c-0.08,0.521-0.735,1.076-1.179,1.563c-1.263,1.382-2.599,2.45-3.761,3.667l0.336,0.336c0.742-0.521,1.446-0.785,2.104-0.785c0.707,0,1.121,0.297,1.276,0.433c0.575-0.618,1.166-1.244,1.839-1.853c0.488-0.444,1.047-1.099,1.566-1.178l0.949-0.101c1.156,0.047,1.937,0.29,2.471,1.232c0.27,0.481,0.262,1.139,0.521,1.613c0.175,0.324,0.937,1.218,1.316,1.228c0.294,0.009,0.603-0.199,0.899-0.49l1.033-1.034c0.291-0.294,0.501-0.6,0.492-0.896C29.754,10.801,28.861,10.035,28.537,9.859zM13.021,15.353l-0.741-0.741c-3.139,2.643-6.52,5.738-9.531,8.589c-0.473,0.443-1.452,1.021-1.506,1.539c-0.083,0.781,0.95,1.465,1.506,2c0.556,0.533,1.212,1.602,1.994,1.51c0.509-0.043,1.095-1.029,1.544-1.502c2.255-2.374,4.664-4.976,6.883-7.509c-0.312-0.371-0.498-0.596-0.498-0.596C12.535,18.451,11.779,17.272,13.021,15.353zM20.64,15.643c-0.366-0.318-1.466,0.143-1.777-0.122c-0.311-0.266,0.171-1.259-0.061-1.455c-0.482-0.406-0.77-0.646-0.77-0.646s-0.862-0.829-2.812,0.928L7.44,6.569C7.045,6.173,7.203,4.746,7.203,4.746L3.517,2.646L2.623,3.541l2.1,3.686c0,0,1.428-0.158,1.824,0.237l7.792,7.793c-1.548,1.831-0.895,2.752-0.895,2.752s0.238,0.288,0.646,0.771c0.196,0.23,1.188-0.249,1.455,0.061c0.264,0.312-0.196,1.41,0.12,1.777c2.666,3.064,6.926,7.736,8.125,7.736c0.892,0,2.021-0.724,2.948-1.64c0.925-0.917,1.639-2.055,1.639-2.947C28.377,22.567,23.704,18.309,20.64,15.643z").attr({fill: "#666", stroke: "#000"});
  
      var deliver = Raphael("deliver");
      deliver.path("M17.078,22.004l-1.758-4.129l-2.007,4.752l-7.519-3.289l0.174,3.905l9.437,4.374l10.909-5.365l-0.149-4.989L17.078,22.004zM29.454,6.619L18.521,3.383l-3.006,2.671l-3.091-2.359L1.546,8.199l3.795,3.048l-3.433,5.302l10.879,4.757l2.53-5.998l2.257,5.308l11.393-5.942l-3.105-4.709L29.454,6.619zM15.277,14.579l-9.059-3.83l9.275-4.101l9.608,3.255L15.277,14.579z").attr({fill: "#666", stroke: "#000"});
  
      $('.arrow').each(function(i) {
          arrow = Raphael($(this)[0]);
          arrow.path("M10.129,22.186 16.316,15.999 10.129,9.812 13.665,6.276 23.389,15.999 13.665,25.725z").attr({fill: "#666", stroke: "#000"});
      });
  };
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>#design {
      width: 100px;
      height: 100px;
  }
  </code></pre>