title: Transparent background for SVG
body: <p>I am working with SVGs, and would like to create one with a transparent background. The following example, should appear as just a white circle with a path in it. However, the whole 300px white canvas appears as a square, how do I get the result I want, as I can't really see where the canvas is defined?</p>
  
  <pre><code>&lt;?xml version="1.0"?&gt;
  &lt;svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" height="300" width="300" version="1.1" xml:space="preserve"&gt;
  &lt;circle fill="#FFFFFF" cx="150.267" cy="149.854" r="111.303" fill-opacity="1"/&gt;
  &lt;g transform="translate(0.000000,632.000000) scale(0.100000,-0.100000)" fill-opacity="1"&gt;
  &lt;path fill="#54534A" d="M2204.344,4414.691v-122.67h81.643h81.642l-1.237,6.804c-0.619,3.505-1.649,10.515-2.474,15.462l-1.443,8.659
          h-61.438h-61.644v38.141v38.141h54.635h54.635v16.493v16.494h-54.635h-54.635v36.079v36.08h60.613h60.407l1.443,10.515
          c0.825,5.979,2.062,13.401,2.68,16.493l1.237,5.979h-80.818h-80.612V4414.691z"/&gt;
  
  &lt;!-- Other paths omitted --&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>