I created this simple inline SVG by saving as "Optimized SVG" in inkscape. Prior to saving I set the size to 200X200px.

    <div style="width: 200px; background-color: red;">
      <?xml version="1.0" encoding="UTF-8"?>
    <svg viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <path class="fs-logo-fill" d="m71.679 40.782v52.917h52.917v-52.917zm26.458 7.2166a19.242 19.242 0 0 1 19.242 19.242 19.242 19.242 0 0 1-19.242 19.242 19.242 19.242 0 0 1-19.242-19.242 19.242 19.242 0 0 1 19.242-19.242z"/>

I then put it inside a the div element seen that has a width of 200px.

This is the codepen:


As can be seen the red div is a lot larger than the inline svg rendering. How do we set the viewbox parameters so that the inline SVG will always fit the size of the containing element?

Also asked this question on SO and we are getting closer. Anyone know if we can set the viewbox parameters we want while saving?

  • 1
    I would just scale the object so it fits the 200x200px artboard. Is there a reason why you can't do that?
    – Wolff
    May 2, 2019 at 21:00
  • Hm @Wolff - You may have a perfectly valid point here! I tried saving with a 200X200px square to a 200X200px artboard, and then removing the height and width attributes on the svg element so it looks like this <svg viewBox="0 0 52.916665 52.916668" version="1.1" id="svg1434"> and I think that works. Do you want to provide the answer and I can give you credit?
    – Ole
    May 2, 2019 at 21:13
  • This might be a lesson in not overthinking it :)
    – Ole
    May 2, 2019 at 21:15
  • Thanks, but that's not really what i meant. I would select the artwork (the blue shape) and scale it so it's 200x200px.
    – Wolff
    May 2, 2019 at 21:16
  • 1
    That's more of a css question? Can't you just use the svg as background-image and set background-size to cover? Only works if your artwork is the same size as the svg.
    – Wolff
    May 2, 2019 at 21:19

1 Answer 1


Per @Wolff hint as long as we set the canvas size to the same size as the drawing, then viewbox takes care of itself. In other words it has the right parameters to fit inside a div responsively and we are done. Here's a codepen:


Note that we are setting the color of the SVG using the css class fs-logo-fill. If we change the width and height of the containing div, the inline SVG resizes itself automatically, so now we have inline SVG that resizes automatically and we can set CSS classes on the paths to control fill and stroke colors, effects, etc.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.