Skip to main content
T
Track5Media
Participant
July 17, 2018
Question

Exporting icons as SVGs with padding from artboard

  • July 17, 2018
  • 1 reply
  • 4603 views

So its been a while since I worked on icons in illustrator and I think I'm missing something obvious.

I have made a file with several artboards and one icon on each artboard. Each icon's artboard is 32px X 32px. But, being different icons, most don't extend the full 32px X 32px. All I am trying to do is export all the icons so that they keep their 32px X 32px size, essentially a transparent background/padding around each icon.

I've tried Export>Export As, and have clicked "Use Artboards".

Is this impossible to do for an svg? Or am I missing some checkbox or something? I'm so stuck, thanks for any/all help!

(I am on Illustrator CC 22.1)

This topic has been closed for replies.

1 reply

Jeff Witchel, ACI
Community Expert
Jeff Witchel, ACICommunity Expert
Community Expert
July 17, 2018

Go to File > Export > Export As, and choose SVG.

In the window the opens first, check Use Artboards.

See screenshot below.

T
Track5MediaAuthor
Participant
July 18, 2018

Thanks for your response!  I tried that and unfortunately I am still getting the same thing. When I open the SVG in Photoshop (as in the screenshot below) or Sketch the artboard is tight around the icon. With an arrow icon like this, it is especially important that I have that 32px X 32px padding built in.

EDIT: The code is showing 32px as the set viewBox (see below). I guess that works for dev, I'll just have to manually position every icon correctly on their 32px artboards in Sketch. Ugh.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><style>.cls-1{stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>Icon</title><g id="icons"><polygon class="cls-1" points="10 14 16 20 22 14 10 14"/></g></svg>

Jeff Witchel, ACI
Community Expert
Jeff Witchel, ACICommunity Expert
Community Expert
July 18, 2018

It work for me, not sure why it's not working for you. What version of Illustrator are you using?

Try the following to see if it makes a difference:

Create a rectangle the size of your Artboard and in the Stroke panel add a 1 pt Stroke.

Align the Stroke to the outside of the rectangle in the Stroke panel. This will position the Stroke outside of your Artboard.

See if this "tricks" illustrator into making the dimensions the size of the Artboard.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices