title: How can I prepare an Inkscape SVG file for responsive web design?
body: <p>I've been doing a tutorial on Treehouse on responsive web design. At this point in the tutorial we are asked to convert an image to an svg so it can scale fully responsively.</p>
  
  <p>Rather than use Adobe Illustrator, which I don't own, I used the freeware Inkscape. Once the image is converted we are asked to open the image in a text editor and remove the height and width requirements from the svg declaration and add the object selector to our max width rule to our style css:</p>
  
  <pre><code>  img, object {
  max-width: 100%;
  }    
  </code></pre>
  
  <p>However, after removing height and width the image is not responsive but instead oddly clipped like so:</p>
  
  <p><img src="https://i.stack.imgur.com/rAfBm.jpg" alt="enter image description here"></p>
  
  <p>Does anyone know what error I have made? Or what I should have removed?</p>
  
  <p>Sorry if the question has been asked before, I can't find it.</p>
  
  <p>edit1, the code:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
  &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt;
  
  &lt;svg
     xmlns:dc="http://purl.org/dc/elements/1.1/"
     xmlns:cc="http://creativecommons.org/ns#"
     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     id="svg2985"
     version="1.1"
     inkscape:version="0.48.4 r9939"
     width="319"
     height="177"
     sodipodi:docname="logo.gif"&gt;
    &lt;metadata
       id="metadata2991"&gt;
      &lt;rdf:RDF&gt;
        &lt;cc:Work
           rdf:about=""&gt;
          &lt;dc:format&gt;image/svg+xml&lt;/dc:format&gt;
          &lt;dc:type
             rdf:resource="http://purl.org/dc/dcmitype/StillImage" /&gt;
          &lt;dc:title&gt;&lt;/dc:title&gt;
        &lt;/cc:Work&gt;
      &lt;/rdf:RDF&gt;
    &lt;/metadata&gt;
    &lt;defs
       id="defs2989" /&gt;
    &lt;sodipodi:namedview
       pagecolor="#ffffff"
       bordercolor="#666666"
       borderopacity="1"
       objecttolerance="10"
       gridtolerance="10"
       guidetolerance="10"
       inkscape:pageopacity="0"
       inkscape:pageshadow="2"
       inkscape:window-width="640"
       inkscape:window-height="480"
       id="namedview2987"
       showgrid="false"
       inkscape:zoom="0.94984326"
       inkscape:cx="159.5"
       inkscape:cy="88.5"
       inkscape:window-x="0"
       inkscape:window-y="0"
       inkscape:window-maximized="0"
       inkscape:current-layer="svg2985" /&gt;
    &lt;image
       width="319"
       height="177"
       xlink:href="
  </code></pre>
  
  <p>It is the "height" and "width" in the first SVG tag that I have removed.</p>