2

I'm trying to get the <path> data for an SVG file I'm creating with Illustrator CS4. It needs to look something like this, where I'm interested in retrieving the numbers inside the d attribute...

<path d="M100,0 C155.2286,0 200,43.7106221....etc." id="myID" fill="#444444"></path>

The problem is that no matter which settings I try, my SVG file output does not contain this <path> element. It only contains an <image> element looking something like this...

<image style="overflow:visible;" width="200" height="200" id="myID" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAACXBIWXMAAAsSAAALEgHS3X78AAAA...

I'm looking at various online tutorials like this one. It shows settings that output the <image> but at the end it jumps to an output containing the <path> just like I want. The problem is that it's not really showing anything about how to get to that point. No matter what I do, I only see <image>. Thanks.

EDIT:

I'm getting closer. I finally realized that to get a <path> I needed to convert the raster image to vectors. I used the "Live Trace > Make" option. Now my output contains multiple <path> elements as well as the <image> element... how do I get just one <path>?

EDIT 2:

As per a request in comments, here is an example image already created by somebody else. It's an RSS icon represented by a single <path>...

<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M100,0 C155.228476,-3.41060513e-14 200,44.771524 200,100 C200,155.228476 155.228476,200 100,200 C44.771524,200 0,155.228476 0,100 C0,44.771524 44.771524,3.03201907e-14 100,0 Z M40.0135555,79.4855784 L40.0135555,102.780614 C55.2214198,102.790103 69.6051125,108.763989 80.3694989,119.544636 C91.1311742,130.291394 97.0806631,144.696768 97.1050629,159.95749 L97.1131962,159.95749 L97.1131962,159.999512 L120.504488,159.999512 C120.485511,137.809245 111.465711,117.709228 96.8827535,103.115434 C82.2970845,88.5243505 62.2051899,79.4991339 40.0135555,79.4855784 Z M44.7525423,155.112773 L44.7471201,155.112773 L44.7525423,155.118195 L44.7525423,155.112773 C47.7008537,158.048883 51.7200459,159.849046 56.1947014,159.849046 C60.6747791,159.849046 64.7034602,158.054305 67.6531271,155.118195 L67.6639714,155.112773 C70.6082161,152.172597 72.4056694,148.168318 72.4165138,143.718064 C72.4056694,139.259678 70.6082161,135.255399 67.6531271,132.304378 L67.6585492,132.304378 L67.6531271,132.300311 L67.6531271,132.304378 C64.6993935,129.369624 60.6747791,127.55726 56.1947014,127.55726 C51.7214015,127.55726 47.7022092,129.365557 44.7525423,132.304378 L44.7525423,132.300311 C41.8110087,135.24591 40,139.259678 40,143.718064 C40,148.17374 41.8110087,152.173952 44.7525423,155.112773 Z M40.0555774,62.9029686 C93.5271714,62.9416349 136.994841,106.477281 137.030841,159.999512 L160,159.999512 C159.984,126.919781 146.538769,96.9493582 124.809601,75.2055351 C103.073766,53.4683787 73.1233263,40.0151548 40.0555774,40.0004883 Z M40.0555774,62.9029686" fill="#444444"></path>
    </g>
</svg>

RSS icon

Improve this question
7
  • You'll output one <path> element per path in the illustrator file. If a file has multiple paths, you'll have multiple elements.
    – Alex Blackwood
    Dec 30, 2013 at 20:50
  • @AlexBlackwood, there has to be a way to do this... because I just made it happen (accidently). After fumbling around with it for a while, I ended up with a single path and it renders perfectly as the complete image. The problem is that I don't recall exactly what I did to get there and I still need to duplicate those results on a different file.
    – Sparky
    Dec 30, 2013 at 21:04
  • The Live Trace is probably creating multiple paths, depending on your complexity and color settings. Without an example, it's hard to know.
    – Alex Blackwood
    Dec 30, 2013 at 21:41
  • @AlexBlackwood, I just wanted to know the exact steps required for outputting a single path representing my image. I know it's possible because after closing the file, opening it up, doing yet another "live trace", then "save as SVG" with the same settings as before, it finally gave me a single path. At this point I cannot even post an answer that would be helpful to anyone else since I previously tried those same steps many times and failed. Maybe I missed something.
    – Sparky
    Dec 30, 2013 at 21:58
  • Ok, can you give an example of what image you're trying to represent with a single path?
    – Alex Blackwood
    Dec 30, 2013 at 22:06

1 Answer 1

Reset to default
4

You'll need to create a complex path from a Live Trace.

Since complex paths cannot contain multiple colors, you'll either need to use the "Black and White" setting with an appropriate threshold, or use the "Greyscale" option with the minimum amount of colors.

In both cases, make sure "Ignore White" is selected.

enter image description here

enter image description here

Expand the traced image using Object > Expand...

enter image description here

This should give you a group containing a single complex path. You can inspect the output further by using the Layers palette.

enter image description here

Improve this answer
0

Your Answer

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

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