• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
2

Convert a Shape to a Path

Engaged ,
Nov 02, 2016 Nov 02, 2016

Copy link to clipboard

Copied

Hi,

I have a shape (with no stroke) that I want to convert to a path.  When I go to Object > Shape > Expand Shape, it changes the layer to a path (as illustrated in the image below, the box in the top left of the options bar now says path instead of rectangle). When I save it as an SVG though and look at the SVG code it still shows as a rectangle <rect> element.

How do I convert it to a <path> ? I need the SVG code to be a path for a javascript animation.

Many thanks,

path.jpg

Paul.

Views

158.1K

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

Engaged , Nov 03, 2016 Nov 03, 2016

Hi Kris,  Adding an extra anchor point will just make the <rect> a <polygon> and moving an anchor point isn't an option

The only solution I seem to have found is to make the path a compound path via Object > Compound Path > Make.  This then gives me a proper path with the required data information SVG code.

Paul.

Votes

Translate

Translate
Adobe
Mentor ,
Nov 03, 2016 Nov 03, 2016

Copy link to clipboard

Copied

Maybe add an extra anchor point somewhere, or nudge one of the four corners a bit so it's no longer a true rectangle.

Votes

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
Engaged ,
Nov 03, 2016 Nov 03, 2016

Copy link to clipboard

Copied

Hi Kris,  Adding an extra anchor point will just make the <rect> a <polygon> and moving an anchor point isn't an option

The only solution I seem to have found is to make the path a compound path via Object > Compound Path > Make.  This then gives me a proper path with the required data information SVG code.

Paul.

Votes

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 31, 2018 Jul 31, 2018

Copy link to clipboard

Copied

I think I found something that works:

  1. Select shape.
  2. In the Pathfinder palette, click Unite (the first option).

On my few tests on a hexagon and a rectangle shape, it made it a path.

Votes

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
Participant ,
May 20, 2021 May 20, 2021

Copy link to clipboard

Copied

This is in my opinion the best answer. Renders an actual <path> object.

Votes

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
Participant ,
May 20, 2021 May 20, 2021

Copy link to clipboard

Copied

LATEST

I take this back since it only renders as a path in illustrator, not in the SVG

Votes

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