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: ```

Accepted Answer

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.

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

Solution

Problem