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?

enxaneta
  • 31,608
  • 5
  • 29
  • 42
Ole
  • 41,793
  • 59
  • 191
  • 359
  • 1
    Possible duplicate of [Find svg viewbox that trim whitespace around](https://stackoverflow.com/questions/29002472/find-svg-viewbox-that-trim-whitespace-around) – Kaiido May 03 '19 at 01:54

2 Answers2

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}`
enxaneta
  • 31,608
  • 5
  • 29
  • 42
  • Do you know if a more deterministic way exists ... for example setting parameters when saving in Inkscape? – Ole May 02 '19 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 https://graphicdesign.stackexchange.com – enxaneta May 02 '19 at 20:04
  • I noticed that the parameters being logged are essentially are contained in the `path` like this: `m71.679 40.782v52.917h52.917v-52.917` ... so maybe its as simple as just always using those ... – Ole May 02 '19 at 20:06
  • 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 02 '19 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: https://graphicdesign.stackexchange.com/questions/124220/setting-the-viewbox-so-that-the-inline-svg-will-snap-to-the-size-of-the-contai?noredirect=1#comment184619_124220 – Ole May 02 '19 at 21:14
  • Might be a lesson in not over thinking it :) – Ole May 02 '19 at 21:15
  • 1
    Also left an answer. – Ole May 03 '19 at 01: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.

Ole
  • 41,793
  • 59
  • 191
  • 359