Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Exporting icons as SVGs with padding from artboard

New Here ,
Jul 17, 2018 Jul 17, 2018

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)

4.4K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe
Community Expert ,
Jul 17, 2018 Jul 17, 2018

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

In the window the opens first, check Use Artboards.

See screenshot below.

Screen Shot 2018-07-17 at 5.11.08 PM.png

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 18, 2018 Jul 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.

Screen Shot 2018-07-18 at 9.22.45 AM.png

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>

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 18, 2018 Jul 18, 2018
LATEST

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines