Skip to main content
M
micheleinvernizzi90
Participant
June 13, 2017
Answered

SVG circles not exported as such

  • June 13, 2017
  • 1 reply
  • 6187 views

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>

This topic has been closed for replies.
Correct answer Monika Gause

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


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.

1 reply

Monika Gause
Community Expert
Monika GauseCommunity Expert
Community Expert
June 13, 2017

Exactly how do you export?

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

M
micheleinvernizzi90Author
Participant
June 13, 2017

"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
Community Expert
Monika GauseCommunity Expert
Community Expert
June 13, 2017

"Save as" gives you outdated code.

"Export for screen" can export as a circle

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices