Illustrator Expand/Outline Strokes Distorts Icon Shapes

New Here ,
Jan 29, 2022 Jan 29, 2022

Copy link to clipboard

Copied

I'm making a suite of web/email icons in Illustrator for a client and am wondering about the reasoning for live strokes being converted to outlined paths. I've been reading various guides, UX advice from IBM Carbon and Google Material Design, etc, for a few days.

I am wondering what problems occur if strokes are not expanded/outlined/converted to paths, and also what the benefits are when outlined.

 

I ask since when I convert my pixel perfect icons from live strokes to outlines, the shapes get larger beyoned the pixel stroke amount, the shape moves slightly, and the icons no longer are pixel perfect. The dimensions increase to include random ".6213" decimal place.

I am using 1 px strokes that are centered on the paths, units are in pixels, snap-to-pixel grid is on—the usual best practices are being followed. 


I would prefer to keep them as live strokes to avoid the distortion that takes place when outlining, and the resulting clean up to manually tweak all the anchor points to align to the grid. I've not seen this happening in Illustrator before and it is maddening. I've tested the files in Illustrator 2019, 2020, 20201, 20202, and on 4 different computers with different users, and also recreated the icons in new documents. The bad results are consistent. 

Thanks in advance for any advice. 

TOPICS
Draw and design , How to , Import and export , Performance , Tools

Views

35

Likes

Translate

Translate

Report

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 Professional ,
Jan 31, 2022 Jan 31, 2022

Copy link to clipboard

Copied

The live strokes problem is that when someone increase the size of the icon, it may scale the icon without stroke.
You can outline the stroke then, you can merge all shapes with the outlined stroke to be one shape to clean it.

Likes

Translate

Translate

Report

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 Professional ,
Jan 31, 2022 Jan 31, 2022

Copy link to clipboard

Copied

LATEST

But that is probably only a problem when someone scales the icon in Illustrator and does not know how to use it.

Icons placed and used in other programs would always scale the strokes.

Likes

Translate

Translate

Report

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