9

Assuming I have an svg that draws some paths, what tools should I use to find a viewbox that perfectly fits those paths so that all redundant space around is trimmed?

KwiZ
  • 1,364
  • 2
  • 15
  • 25

1 Answers1

24

You can simply set your svg's viewBox to its Bounding Box.

function setViewbox(svg) {
  var bB = svg.getBBox();
  svg.setAttribute('viewBox', bB.x + ',' + bB.y + ',' + bB.width + ',' + bB.height);
  }

document.querySelector('button').addEventListener('click', function() {
  setViewbox(document.querySelector('svg'));
  });
svg {  border: 1px solid }
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 300" enable-background="new 0 0 500 300" xml:space="preserve" width="250" height="150">
  <path fill="none" stroke="#B2E230" d="M413.7,276.5c0,0,67-37,116,0c-24.1-33,16.4-53,0-34s-100-2-75-38" transform="translate(-75,-75)" />
</svg>
<button>setViewbox</button>

Note: It will also take into account the non-visible anchors of your pathes.

Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • Thank you sir, it works! :D Anw, this seems not working properly with the svgs that has transformation, for example: http://codepen.io/KwiZ/pen/pvxdNw. Do you have any solution for this? – KwiZ Mar 12 '15 at 09:24
  • your workaround gets trouble with my example http://codepen.io/KwiZ/pen/pvxdNw :) It's fine when I manually wrap elements around each myself and use your old code. – KwiZ Mar 12 '15 at 09:40
  • @KwiZ Sorry misplaced the `removeChild()` now works with your codepen – Kaiido Mar 12 '15 at 09:40
  • @Kaiido, Can't seem to get this one to work http://jsbin.com/mukowi/1/edit?html,js,output. Could you let me know what the issue could be? – Abishek Oct 13 '15 at 15:50
  • @AbishekRSrikaanth interesting case. I will dig into it when I'll have more time but at first glance, I would say that the problem is that the `x` position of your path is negative. So a quick fix would be to add some check when substracting vB.x from vB.w (l24 of my snippet) `if(vB.x>0)vB.w-=vB.x if(vB.y>0)vB.h-=vB.y` http://jsfiddle.net/vbrnuoj2/ But I will rewrite the whole thing as I find it quite ugly now... – Kaiido Oct 13 '15 at 16:26
  • @Kaiido, thnx for the quick fix. I will look forward to your rewrite function. Thanks once again. – Abishek Oct 13 '15 at 16:36
  • @AbishekRSrikaanth I can't remember why I did something so complicated at first, please have a look at the edit and tell me if it broke something. – Kaiido Oct 14 '15 at 03:17
  • @Kaiido, Can you take a look at this example http://jsbin.com/mukowi/edit?html,js,output The very first time the page loads it doesn't work and any dynamic changes to svg it then starts to work. any idea why? It behaves the same with the previous function as well – Abishek Oct 14 '15 at 22:30
  • It seems that the font hasn't loaded yet when the `.ready` fires. Then the BBox is `0 0 0 0`. On reload though, the font is cached and everything is loaded in the ready function. Use the `load()` event handler instead. – Kaiido Oct 15 '15 at 00:58