April 27, 2017 Jonny
Follow me on Twitter

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.

Adobe Illustrator dimensions box

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.

Adobe Illustrator menu

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!

Adobe Illustrator menu

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

Looking for more tips?

Jump on our mailing list & get digital goodness straight to your inbox; including helpful tips, tricks and the latest articles surrounding marketing, web design and branding.

Sign up →