Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


SVG circles not exported as such

New Here ,
Jun 13, 2017 Jun 13, 2017

Copy link to clipboard

Copied

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.

circle example.jpg


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>

Views

3.5K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Jun 13, 2017 Jun 13, 2017
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.

Likes

Translate

Translate
Adobe Community Professional ,
Jun 13, 2017 Jun 13, 2017

Copy link to clipboard

Copied

Exactly how do you export?

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 13, 2017 Jun 13, 2017

Copy link to clipboard

Copied

"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…":Screen Shot 2017-06-13 at 16.56.16.png

The file is newly created.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 13, 2017 Jun 13, 2017

Copy link to clipboard

Copied

"Save as" gives you outdated code.

"Export for screen" can export as a circle

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 13, 2017 Jun 13, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 13, 2017 Jun 13, 2017

Copy link to clipboard

Copied

Please upload your files.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 13, 2017 Jun 13, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 13, 2017 Jun 13, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 13, 2017 Jun 13, 2017

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 13, 2017 Jun 13, 2017

Copy link to clipboard

Copied

You're welcome.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 20, 2018 Jul 20, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 21, 2018 Jul 21, 2018

Copy link to clipboard

Copied

  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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 21, 2018 Jul 21, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 21, 2018 Jul 21, 2018

Copy link to clipboard

Copied

Try export for screens - see answer #3

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 23, 2021 Nov 23, 2021

Copy link to clipboard

Copied

LATEST

WIth decimal= 3 or 1?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines