How to get for SVG with Illustrator CS4


Question

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

1
2
12/30/2013 10:17:00 PM

Accepted Answer

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

4
12/30/2013 10:44:00 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow


Website under construction!!!
^