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

Question

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:

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.

Answer 1

The fact that you have just put a raster image in your SVG isn't the actual reason for what you are seeing.

All it means is that when the scaling of the SVG works properly (see below), you won't see the benefits of using vector artwork. When you scale up vector artwork, you don't get the "jaggies" (blockiness) that you get when scaling up bitmaps. If your SVG just contains a bitmap, it is pretty much the same as just using the bitmap.

The actual problem here is that Inkscape doesn't include a viewBox attribute in the SVGs it saves.

When you remove the "width" and "height" attributes, they default to "100%". Which tells the browser to scale the SVG to fit the parent container. Unfortunately for this scaling to work, the browser needs to know what the dimensions of the SVG content are. That is what the viewBox attribute is for.

Illustrator adds the viewBox attribute, Inkscape does not.

To see what I mean, add the following to your <svg> tag after removing width and height:

viewBox="0 0 319 177"

You should find that your image is no longer clipped, and will resize when the page is resized.

Answer 2

Inkscape now provides an option to enable viewbox if you save the file as "optimized svg". Very handy!

Answer 3

As you can read it here ( and for completing qed's answer):

1. Select the object(s) to export
2. Open the document properties window ( Ctrl+Shift+D)
3. Select "Resize page to drawing or selection"
4. File > Save As Copy...
5. Select Optimized SVG as the format

Answer 4

• You've done something wrong if you're "converting" raster to vector graphics. Not having used Inkscape, I can't say, but at least according to Wikipedia it's not capable of performing conversions.

• You haven't converted anything, your image is in Graphics Interchange Format!

To see what a "real" SVG file looks like, open up the example from the wiki page.