: SVG export from Illustrator CC distorts paths I'm trying to create some icons to add to the Glyphicons library. I've created them using the pen tool (shapes) in Adobe Illustrator CC, they're

@Fox8063795

Change "Decimal places" to 3 in the "SVG Options" dialog appearing when saving as SVG:

Vote Up Vote Down

@Deb5748823

Solution Found.

This is clearly not the best, cleanest most beautiful solution but it works exceptionally well.

My Process:
1. Draw the icon in Illustrator
2. Save out as .ai file
3. Open .ai in OSX iDraw
4. Export to SVG from iDraw

Simple solution:
1. Draw the icon in iDraw
2. Export to SVG from iDraw

I hope this helps other folks out

Vote Up Vote Down

@Ann6370331

This is a common error in .SVG file .. that's because hard curves (curves made with only two anchors and long handles) this cant not be rendered good by the browser.

The best thing to do is to divide your path into smaller segments, specially around the anchor that have the problem.

Just go to Object > Path > Add Anchor Points

Vote Up Vote Down

@Correia448

I tend to get the best results from my SVG saves when the coordinates of my objects have clean decimal values. For example, an object at X = 100.452 would be moved to X = 100.5. I've experienced slight movements similar to your issue when leaving objects at coordinates with messy fractional parts.

Vote Up Vote Down