Saving design as an SVG moves anchor points and handles

[marthas41544976]

When saving a simple design as an SVG, the saved version has moved anchor points/handles in some spots. This is a text design that I converted to outlines, edited, then expanded. It only seems to happen with saving as SVG, PDF's are fine and I can export it as an SVG. My knowledge of AI is pretty basic but I haven't run into this issue before.

[kglad]

what app?  illustrator?

[marthas41544976]

Yes, sorry, Illustrator.

[kglad]

in the future, to find the best place to post your message, use the list here, https://community.adobe.com/

p.s. i don't think the adobe website, and forums in particular, are easy to navigate, so don't spend a lot of time searching that forum list. do your best and we'll move the post (like this one has already been moved) if it helps you get responses.

<"moved from using the community">

[marthas41544976]

Thanks, appreciate your help.

[Monika Gause · Accepted solution]

In the SVG file options raise the value "Decimals"

[marthas41544976]

Tried that and it helped, thank you!

[Anubhav M]

Hello @marthas41544976,

Would you mind sharing more details, like the Illustrator version, if this happens with all files, and a screenshot of the export settings used, so I can better assist you?

Looking forward to hearing from you.
Anubhav

[marthas41544976 · Accepted solution]

I raised the decimal value and that seemed to work. Thank you!

[Brad @ Roaring Mouse · Accepted solution]

To further expand on @Monika Gause's answer...

This is a limitation of the SVG format. It's a very crude format.

When you save an SVG you have the option to set a precsiion level (Decimal Places). As SVG code draws paths relatively, the chance that the last point of your path falls exactly where the first point started (like in your "e") depends very much on the precision selected when you save. If you save with a precision level of 1, it will round the "move" numbers to the nearest 1 decimal space.

e.g: "start drawing a path at this location x=24.2 y=56.6; then move 2.1 points up and 3.6 points left and connect these two locations with a curve; then move 12.4 points down and 9.8 points left and connect with a curve, and so on, and after the final move, close the path."

Consequently, this results in a cumulative "error" in positioning  which will cause your end position to be not exactly where it started, and will close the path by joining the starting point to the end point with a short straight line. This is what you are seeing with your letter "e". ... plus, the smaller the objects, the more you will see this cumulative error.

However, a higher precision number, like 4, will draw the paths with a precision of 4 decimal places, which will start at a more accurate location, then move to the next position more accurately, and so on, so the chance the end position ends up at the same spot as the starting position is pretty good. It won't be perfect either, but the short straight line that will connect the starting and end points will be infinitesimally small and you won't see it.

e.g: "start drawing a path at this location x=24.2478 y 56.6876; then move 2.1345 points up and 3.668 points left and connect these two locations with a curve; then move 12.4637 points down and 9.7458 points left and connect with a curve, and so on, and after the final move, close the path."

Why is there the option to set Decimal Places at all?? ... mostly because SVG is text-based code, and a 1=decimal precision takes less code space than a 4-decimal precision. making the final file smaller.

Contrarily, Postscript drawing code is not relative, it's absolute, and with even higher accuracy (perhaps 6 decimal places or more) but even with that, it draws a path like this: "start drawing a path at this exact location x=24.2478 y 56.6876; move to a second exact location with xy coordinates and connect with a curve between them; move a new exact location and connect with a curve, and so on" until the final one is "move to the exact same starting position x=24.2478 y 56.6876 and close the path". Since the starting point and end point are identical, there's no need to add tiny straight line connecting them.

Also: never use SVG as working format. I don't think you are, but just mentioning it. 

[marthas41544976]

Thank you for the very in-depth explaination, I think I understand the gist of it. I appreciate your help!

[Brad @ Roaring Mouse]

Sorry about the verbosity! There was another thread with a similar issue with SVG so I kinda answered both issues in this one post.