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

2 min read

Looking for a Webflow expert? Get an instant estimate today.

Instant Estimate
Jonny Pathan

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

This article How to make your SVG’s have height and width attributes has been reviewed and verified by Jonny Pathan - Founder on Jun 27, 2019.

Last updated on Mar 18, 2019.