12

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 ultra-basic. As PNG, or EPS they export fine. Unfortunately I need the SVG export to use with Glyphicons.

When I export to SVG, the shapes seem to move around. At very least they don't remain as they appear on my screen.

How can I get them to appear as they do in illustrator?

This is a PNG from inside illustrator. enter image description here

This is a PNG from preview, this is the SVG. The shapes are clearly arranged differently.

Clearly the shapes are becoming misaligned after the export, are there any obvious reasons for this? All my export settings are set as default.

Improve this question
2
  • could you give some detailed info on how the geometry is made any chance for a image where all objects are selected to see the anchors. Also for round numbers use grid
    – joojaa
    May 28, 2015 at 12:36
  • Thanks for raising question! I was suffering from the same
    – Harshad Prajapati
    Jul 7, 2020 at 8:00

6 Answers 6

Reset to default
22

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

screenshot

Improve this answer
2
  • It's work like charm!!! Cool man
    – Harshad Prajapati
    Jul 7, 2020 at 8:00
  • THANK YOU!!! Why on earth would Adobe think 1 decimal place was all you needed?!
    – Gavin
    Mar 1, 2021 at 14:56
2

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

Improve this answer
1
  • That didn't seem to have any effect at all. Also, I read somewhere that you should try to keep the minimum possible number of anchor points to help with load times for mobile rendering of SVG. Is that total nonsense, or is it a kind of balancing act?
    – Andrew Peachey
    May 28, 2015 at 11:56
0

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.

Improve this answer
4
  • Interesting, how do you achieve that. Must be a right pain to position stuff so accurately?
    – Andrew Peachey
    May 28, 2015 at 11:57
  • @AndrewPeachey It's not very difficult. Simply click on the object, and click the up or down arrows next to the position to make it round to the next number.
    – Alan
    May 28, 2015 at 12:18
  • Ah. Of course. Makes sense. Cheers, will investigate.
    – Andrew Peachey
    May 28, 2015 at 13:48
  • If you're animating an SVG this speeds thing up to, keeping them on a pixel. Its harder for computers to crunch floating point numbers. And harder for displays to guess if it should 1 pixel to the left or the right.
    – Lex
    Oct 12, 2015 at 9:40
0

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

Improve this answer
0

I've been having troubles exporting too, and tried:

File> Save as

instead of:

File> Export> Export as.

And that seemed to do the trick!

Improve this answer
-1

As i discover this trouble apperrs only if you export "selected only". When exporter do not see borders (page) it make something wrong with curves.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.