Setting the Viewbox so that the inline SVG will "Snap" to the size of the containing element?

Question

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#">
     <g>
      <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"/>
     </g>
    </svg>

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

This is the codepen:

https://codepen.io/oleersoy/pen/dLxvEJ

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?

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:

https://codepen.io/oleersoy/pen/xevpOw

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.