Illustrator SVG export circle (O character) offset problem

[Mark Pad Creative]

When I export artwork as an SVG, the Os (circles) within the text are misaligned and filled incorrectly (see attached).

I converted the type to shapes before exporting. Same problem.

Any ideas?

[Anshul_Saini]

Hi there,

Sorry about the trouble. Could you please share a few more details like:

• Are you exporting the SVG as "Save As" or "Export As" or Collect for Export?
• Screenshot of your export settings.
• Did you outline the text or select the "Convert to Outline" Type option while exporting the SVG?
• Which font is this?
• Please share the screenshot of your layer panel and expand all the groups.
• Is the issue happening while exporting a specific document? If yes, could you please share the document with us? You can upload it to the Creative Cloud (https://helpx.adobe.com/in/creative-cloud/help/share.html) and share the download link.

We are here to help. We just need more information.

Thanks & Regards,

Anshul Saini

[Mark Pad Creative]

Thanks for getting back to me. To answer your questions...

• I am using File > Export > Export As, then choosing SVG as format
• I have attached a screenshot of my settings (or see https://share.nim.bz/BluxA72K)
• I outlined the text before exporting via Type > Create Outlines
• The original font is called BECKMAN
• Layers are also visible in the attached screenshot
• I cannot attach the AI file so please see https://share.nim.bz/GGupjndL

[Anshul_Saini · Accepted solution]

Thank you for sharing the details. Is there any particular reason you are using "Export As"? I suggest you to do " File > Save As > SVG" rather than export for better output. I tried saving the SVG file using Save As, and it exported without any issues. I hope it helps!

Regards,

Anshul Saini

[Mark Pad Creative]

How interesting! That appears to have worked!

I was using "Export As" since that's the way I had always done it in order to use on the web.

I wonder what the difference is between the two approaches? I can see some different options, like which SVG version to use, and I don't get a choice over CSS implementation, but otherwise, all good.

Thanks!

[Anshul_Saini]

Glad to hear that @Mark Pad Creative. This happens because Save and export use different routes. When you “Save As” from Illustrator as SVG, Illustrators include all the required information so that you can re-open it back in Illustrator just as you left it. However, when you “Export As” from Illustrator as SVG, the implication is that generated file is no longer an Illustrator-friendly and editable file which leads to some odd SVG exports. I hope this clarifies!

Regards,

Anshul Saini

[Monika Gause]

 Illustrators include all the required information so that you can re-open it back in Illustrator just as you left it.

By @Anshul_Saini

It will only do that if the option "Illustrator editable" is checked. If that is not checked, then a default SVG gets created. "Illustrator editable" is by default unchecked.

I have tried the file and cannot reproduce the saving anomaly using Export as or Export for screens.

"Export for screens" is the recommended route. It produces the most modern code.

[innovative_adventurer5D56]

I used to create many icons with text and illustrations and exported to svg files for final output, i suggest to remove any clipping mask from the O (when created outline, and use shape builder tool to make empty from inside.

make it simple as possiple

when export, try to use export > export as> svg  with the following options.

[Laubender]

Another note on export to or save as SVG:

If you plan to place the SVG file in InDesign for Publish Online to preserve vector outlines in the endproduct for example, you must disable option [ ] Responsive. That would avoid severe issues with scaling the graphic in InDesign. No problem with export to PDF, but a bug with Publish Online.

Especially see into:

https://community.adobe.com/t5/indesign-discussions/images-not-exporting-properly-when-publishing-on...

Regards,
Uwe Laubender

( ACP )

[Monika Gause]

That options doesn't make a lot of sense when publishing on the web either. Web developers don't like it a lot and they can invoke it in the HTML code if needed.

[Network042]

My lightroom app haven't opened for some weeks now, please what could be the issue?

[Monika Gause]

THis is the Illustrator forum. You probably want to ask over there: https://community.adobe.com/t5/lightroom-ecosystem-cloud-based/ct-p/ct-lightroom?page=1&sort=latest_...