3

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?

  • 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 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 at 21:13
  • This might be a lesson in not overthinking it :) – Ole May 2 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 at 21:16
  • Hmmm - Maybe - but I think you're trick works for what I want. I want it to be responsive - so that if I change the outer div, then the SVG shape also changes automatically - in other words I want to control the height and width of the SVG by controlling the containing dimensions of the html element. Sound OK? – Ole May 2 at 21:17
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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