7

For example, when I save an SVG from illustrator and view the code, I see a <circle> element, for example,

<circle cx="131.6" cy="292.3" r="311.7" />

but I'd like for it to be a <path> element, not a <circle> element.

How can I change it to be a path element?

6

One solution: In Illustrator, select your circle and choose Object > Compound Path > Make.

Here is a quick test using an Illustrator circle shape, duplicated, the first with no modifications and the second with compound path applied:

<circle class="cls-1" cx="466.5" cy="184.5" r="117.5"/>
<path class="cls-1" d="M320,190.5A121.5,121.5,0,1,1,198.5,69,121.5,121.5,0,0,1,320,190.5Z" transform="translate(-77 -69)"/>

Note: You can revert back to a basic shape by choosing Object > Compound Path > Release.


A test case:

Before applying compound path:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 157.41935">
  <defs>
    <style>
      .a {
        fill: #ed2024;
      }

      .b {
        fill: none;
        stroke: #ed2024;
        stroke-miterlimit: 10;
        stroke-width: 40px;
      }
    </style>
  </defs>
  <title>before</title>
  <rect class="a" width="100" height="100"/>
  <rect class="a" x="127.54853" width="100" height="100" rx="12" ry="12"/>
  <circle class="a" cx="305.09706" cy="50" r="50"/>
  <polygon class="a" points="482.646 50 457.646 93.301 407.646 93.301 382.646 50 407.646 6.699 457.646 6.699 482.646 50"/>
  <polygon class="a" points="560.194 12.169 592.212 0.8 591.278 34.721 612 61.615 579.405 71.209 560.194 99.2 540.983 71.209 508.388 61.615 529.111 34.721 528.176 0.8 560.194 12.169"/>
  <line class="b" y1="137.41935" x2="612" y2="137.41935"/>
</svg>

After applying compound path to each individual shape:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 157.41935">
  <defs>
    <style>
      .a {
        fill: #ed2024;
      }

      .b {
        fill: none;
        stroke: #ed2024;
        stroke-miterlimit: 10;
        stroke-width: 40px;
      }
    </style>
  </defs>
  <title>after</title>
  <path class="a" d="M100,100H0V0H100Z"/>
  <path class="a" d="M215.54853,100h-76a12.03528,12.03528,0,0,1-12-12V12a12.03528,12.03528,0,0,1,12-12h76a12.03528,12.03528,0,0,1,12,12V88A12.03528,12.03528,0,0,1,215.54853,100Z"/>
  <path class="a" d="M355.09706,50a50,50,0,1,1-50-50A50,50,0,0,1,355.09706,50Z"/>
  <path class="a" d="M482.6456,50l-25,43.30127h-50L382.6456,50l25-43.30127h50Z"/>
  <path class="a" d="M560.19413,12.16931,592.21192.8l-.93427,33.92058L612,61.61455l-32.5952,9.59476L560.19413,99.2,540.98346,71.20931l-32.5952-9.59476,20.72235-26.894L528.17634.8Z"/>
  <path class="b" d="M0,137.41935H612"/>
</svg>

The above, rendered, svg files can be found here.

Links:

  • Well, yes but easier to animate is not nesserily tue. SVG is totally brainbdead anyway. – joojaa Jan 3 '17 at 12:28
  • @joojaa I actually removed my notes on SVG basic shapes as it was not really the point of the OP's question. Your comment motivated me to ditch that bit and make my answer more streamlined. Thanks! :) – mhulse Jan 3 '17 at 18:13
  • 1
    Cool! The reason she asked is because while morphing icons with SVG-Morpheus (alexk111.github.io/SVG-Morpheus) it would sometimes glitch when the objects were not all <path> elements. It works perfect when everything is a <path> element, so converting everything to a path seems to be the best solution for use with SVG-Morpheus. – trusktr Jan 3 '17 at 22:10
  • Does this work for all things? Suppose there are <rect>, <polygon>, and <line> elements, etc: will this make all of them <path>s too? – trusktr Jan 3 '17 at 22:12
  • 1
    @trusktr good question, looks like it does. I have updated my answer to show you a more robust test case. – mhulse Jan 4 '17 at 0:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.