How to make your SVG’s have height and width attributes

SVG’s exported from Illustrator CC are ‘responsive’ by default, in other words there is no height or width attributes, no dimensions. This can be great, but sometimes you may want to force dimensions. Say for example you want to use an SVG for a logo on your website, but you want it to be a set size. No problem, here’s how to make it happen:

(TLDR: When exporting an SVG, click More Options, uncheck ‘Responsive’.)

Set your Illustrator Artboard to the dimensions you wish to have, these can be found in the top right when you have an Artboard selected.

You’ll want to select/highlight your Logo and crop the artboard to fit exactly. To do this, use the menu and select: Object > Artboards > Fit to selected art. You should now have an Artboard without unnecessary space.

The final step is to save the logo as an SVG, to this, use the menu and select Save As, carry on as normal until you get the final dialogue window. Once this pops up, click on more options in the bottom left, uncheck Responsive. Job done!

I’m sure there are other ways to do this, but this is a technique I used on a particular project recently. Feel free to let us know your other methods below.

Want more SVG knowledge?

Make sure to check out our article on why you should be using SVG’s over PNG’s