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

2 min read
Jonny Pathan
SVG example

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.

Illustrator Dimensions
Here’s where to pop in your dimensions

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.

Selecting the Artwork
Highlight your artwork first!

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!

Illustrator Responsive selection
Final step

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 and Creating SVG’s from Photoshop CS6, using Adobe Illustrator.

Related Posts

Posts you may also like