Find svg viewbox that trim whitespace around

by

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.

More Related Contents:

  1. svg text wrapping issues
  2. Circle drawing with SVG’s arc path
  3. How to convert a PNG image to a SVG? [closed]
  4. Removing transforms in SVG files
  5. How to use the viewBox attribute?
  6. Remove the host HTML element selectors created by angular component
  7. How many levels of recursion does SVG support?
  8. SVG Line with Gradient Stroke Won’t Display if vertical or horizontal
  9. semantic zooming of the force directed graph in d3
  10. Catmull-Rom interpolation on SVG Paths
  11. Default background color of SVG root element
  12. How to convert/save d3.js graph to pdf/jpeg
  13. Scale and mirror SVG object
  14. How to convert a SVG to a PNG with ImageMagick?
  15. vertical alignment of text element in SVG
  16. SVG shadow cut off
  17. Crop to fit an svg pattern
  18. Do SVG docs support custom data- attributes?
  19. SVG angular gradient
  20. Avoiding lines between adjecent svg rectangles
  21. Can I apply a gradient along an SVG path?
  22. Adding feDropShadow to a vertical line in SVG makes it disappear
  23. SVG Scaling Text to fit container
  24. Converting an svg arc to lines
  25. Simple fill pattern in svg : diagonal hatching
  26. Pure SVG way to fit text to a box
  27. SVG images blocked by gmail proxy
  28. Why can’t I reference an SVG linear gradient defined in an external file (paint server)?
  29. is it possible to make SVG circle fill color from bottom to top based on percentage? [duplicate]
  30. Convert SVG polygon to path

Leave a Comment