2

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?

1

2 Answers 2

1

In order to get the viewBox right you need to get the size of the bounding box of the path, and use the values you get to define the viewBox.

console.log(thePath.getBBox())
<div style="width: 200px; background-color: red;">
          
        <svg viewBox="71.68 40.782 52.92 52.92" style="display:block;">
         <g>
          <path id="thePath" 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>
</div>

In this case the bounding box of the path is:

let BB = {
  "x": 71.67900085449219,
  "y": 40.78200149536133,
  "width": 52.91699981689453,
  "height": 52.9170036315918
}

The viewBox will have this aspect:

viewBox=`${BB.x} ${BB.y} ${BB.width} ${BB.height}`
7
  • Do you know if a more deterministic way exists ... for example setting parameters when saving in Inkscape?
    – Ole
    May 2, 2019 at 19:32
  • I don't work with Inkscape. However in Illustrator I would set the artboard to fit the artwork bounds. There must be something similar in Inkscape. I think you may ask this in graphicdesign.stackexchange.com
    – enxaneta
    May 2, 2019 at 20:04
  • 1
    You need to get the bounding box of the path or group of paths. I've added some explanation in my answer. Please take a look.
    – enxaneta
    May 2, 2019 at 20:26
  • 1
    OK - I asked on graphicdesign as well, and I think it's as simple as just setting the artboard correctly like this: graphicdesign.stackexchange.com/questions/124220/…
    – Ole
    May 2, 2019 at 21:14
  • 1
    Also left an answer.
    – Ole
    May 3, 2019 at 1:50
1

So we investigated this here to and 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.

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.