Sizing Inline SVG August 16th, 2015

The best way I found to size inline SVG graphics:

• Trim artboard to artwork bounds in Illustrator (Object > Artboards > Fit to Artwork Bounds)
• Save as SVG and then open it in a text editor
• Leave the viewBox dimensions exactly as they are
• Calculate the % difference between width and height in the viewBox values
• Set the width and height of the viewport (SVG tag) to desired size as well as preserveAspectRatio to “xMidYMid meet” for expanding to fit centered while maintaining aspect ratio

Example…

<svg width="83px" height="100px" viewBox="0 0 28.322 33.986" preserveAspectRatio="xMidYMid meet">