SVG circles not exported as such

[micheleinvernizzi90]

Hello everybody,
I'm using Adobe Illustrator CC 2017.1.0 and I would like to export an svg that basically contains 3 circles and 3 texts.

The problem is that when I export the code, Illustrator is tranforming every circle into two paths, one with the fill and one with the stroke. This is annoying because it makes it harder to animate the circles later with CSS.

Example code exported:

<path style="fill:#F45D4C;" d="M159.6,etc…"/>

<path style="fill:#FFFFFF;" d="M159.6, etc…"/>

What I would like for Illustrator to export (as it did in previous versions):
<circle style="fill:#F45D4C; stoke:#FFFFFF;" cx="" cy="" r=""></circle>

[Monika Gause]

Exactly how do you export?

Are these circles newly created in Illustrator or is that an old file that you opened?

[micheleinvernizzi90]

"Save as…" and "Export as…" give me the same result, when I get to this screen (using "Save as…" for example) I click "SVG Code…":

The file is newly created.

[Monika Gause]

"Save as" gives you outdated code.

"Export for screen" can export as a circle

[micheleinvernizzi90]

No I'm sorry, it still doesn't work.

[Monika Gause]

Please upload your files.

[micheleinvernizzi90]

Sorry I can't find how to upload files different from pictures and videos. Here is a Drive link: test.ai - Google Drive

[Monika Gause · Accepted solution]

You have set the stroke to inside. SVG does not support an inside stroke, so your strokes are expanded to paths.

Set the stroke to center align.

[micheleinvernizzi90]

That's what it was!! It was set by default and I wuoldn't ever guessed that was the stroke causing the problem. Thank you so much!

[Monika Gause]

You're welcome.

[J_F_S]

Hi,
i have the same problem. I have a circle with center stroke but the export gives me an path and not an circle element.
How can I say illustrator that it should export it as circle and not as path?

Here is my SVG:

JS Bin - Collaborative JavaScript Debugging

[Monika Gause]

  schrieb

Hi,
i have the same problem. I have a circle with center stroke but the export gives me an path and not an circle element.
How can I say illustrator that it should export it as circle and not as path?

Here is my SVG:

JS Bin - Collaborative JavaScript Debugging

WHich version of Illustrator and how do you export the SVG?

[J_F_S]

Hi,
I use Illustrator CC 2018 (22.0.0) and I have used the export as … .

[Monika Gause]

Try export for screens - see answer #3

[default1hyzsu8tuci8]

WIth decimal= 3 or 1?