How can I prepare an Inkscape SVG file for responsive web design?

Tags:

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.

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:

  img, object { max-width: 100%; }

However, after removing height and width the image is not responsive but instead oddly clipped like so:

enter image description here

Does anyone know what error I have made? Or what I should have removed?

Sorry if the question has been asked before, I can't find it.

edit1, the code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) -->  <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">   <metadata      id="metadata2991">     <rdf:RDF>       <cc:Work          rdf:about="">         <dc:format>image/svg+xml</dc:format>         <dc:type            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />         <dc:title></dc:title>       </cc:Work>     </rdf:RDF>   </metadata>   <defs      id="defs2989" />   <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" />   <image      width="319"      height="177"      xlink:href="

It is the "height" and "width" in the first SVG tag that I have removed.