10

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?

2

2 Answers 2

8

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:

5
  • Well, yes but easier to animate is not nesserily tue. SVG is totally brainbdead anyway.
    – joojaa
    Jan 3, 2017 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, 2017 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, 2017 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, 2017 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, 2017 at 0:21
0

var circle = doc.getElementsByTagName('circle');

 var convertSvgCircleToPath = function(cx, cy, r, deg) {

      var theta = deg * Math.PI / 180,
      dx = r * Math.cos(theta),
      dy = -r * Math.sin(theta);

      return "M " + cx + " " + cy + "m " + dx + "," + dy + "a " + r + "," + r + " 0 1,0 " + -2 * dx + "," + -2 * dy + "a " + r + "," + r + " 0 1,0 " + 2 * dx + "," + 2 * dy;

 }

 convertSvgCircleToPath(circle.getAttribute('cx'), circle.getAttribute('cy'), circle.getAttribute('r'), 180);

cx = x-axis position cy = y-axis position r = radius of circle deg = 180/360

2
  • 2
    Hi karma rout and welcome to GDSE. This code might work, but you should consider formatting it properly and spend a little time describing what it is and how you would use it. Try to see it from the OP's point of view. They export an svg file from Illustrator and wants circles to be made from path elements instead. How would the OP use this code to change their file? Can they just run it in a browseras it is? How to save the changed file?
    – Wolff
    Nov 24, 2019 at 22:28
  • @Wolff I agree with you but I've upvoted the guy's answer because it implies the user is knowledgeable and any non-beginner user would know how to use this. Nov 13, 2020 at 18:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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