White Space Around Adobe Illustrator Generated SVG - svg

Question

Thank you in advance for all the help, I have been trying various resources on the web but is still not able to make this work.
I am trying to create a 3D rectangle box using svg. I prepared the graphic in Adobe Illustrator by apply the 3D feature in the software to a regular rectangle shape and finally exported it as a SVG file. While it looks ok on the screen of illustrator, on browser; the object appears to have a small white border around each of its polygon.
The following is the svg code generated by illustrator. You Can see the whitespace around the polygon after running the snippet. I have to remove the whitespace around it.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="965px" height="720.3px" viewBox="0 0 965 720.3" enable-background="new 0 0 965 720.3" xml:space="preserve">
<g id="sections_2_">
<g>
<g enable-background="new ">
<g>
<polygon fill="#836EA6" points="595.6,337.1 596.8,344.9 581.8,357.8 580.6,349.9 "/>
</g>
<g>
<polygon fill="#8670A9" points="532,311.5 595.6,337.1 580.6,349.9 568.3,360.1 "/>
</g>
<g>
<polygon fill="#736092" points="568.3,360.1 569.4,368 533.1,319.3 532,311.5 "/>
</g>
<g>
<polygon fill="#BF4142" points="568.3,360.1 569.4,368 508,340.3 506.9,332.5 "/>
</g>
<g>
<polygon fill="#836EA6" points="580.6,349.9 581.8,357.8 569.4,368 568.3,360.1 "/>
</g>
<g>
<polygon fill="#DE4D4E" points="531.9,311.5 568.3,360.1 506.9,332.5 511.7,328.6 524.8,317.8 "/>
</g>
</g>
</g>
</g>
</svg>
The following image is how it look like on the screen which is the desired look. It has to be a .svg file, so exporting it as jpeg or png is not an option.

Answer 1

That white space is because your SVG viewBox attribute is set to an area much bigger than your design.
You can think of the viewBox in SVG as defining the page size. In Illustrator, that corresponds to what it calls the "Artboard".
Before you save in Illustrator, go to the Artboard settings (where you set the page size) and choose the option "Fit to Artwork Bounds". Now when you save, the viewBox should match the size of your design, and the white space should be gone.

Answer 2

Adjust the viewBox to get rid of the whitespace. I've added a black background rect so the whitespace around the shape is visible but you can remove that.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="400px" height="200.3px" viewBox="502 307 98 63" enable-background="new 0 0 965 720.3" xml:space="preserve" overflow="hidden">
<rect x="502" y="307" width="98" height="63"/>
<g id="sections_2_">
<g>
<g enable-background="new ">
<g>
<polygon fill="#836EA6" points="595.6,337.1 596.8,344.9 581.8,357.8 580.6,349.9 "/>
</g>
<g>
<polygon fill="#8670A9" points="532,311.5 595.6,337.1 580.6,349.9 568.3,360.1 "/>
</g>
<g>
<polygon fill="#736092" points="568.3,360.1 569.4,368 533.1,319.3 532,311.5 "/>
</g>
<g>
<polygon fill="#BF4142" points="568.3,360.1 569.4,368 508,340.3 506.9,332.5 "/>
</g>
<g>
<polygon fill="#836EA6" points="580.6,349.9 581.8,357.8 569.4,368 568.3,360.1 "/>
</g>
<g>
<polygon fill="#DE4D4E" points="531.9,311.5 568.3,360.1 506.9,332.5 511.7,328.6 524.8,317.8 "/>
</g>
</g>
</g>
</g>
</svg>