: How to get for SVG with Illustrator CS4 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

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>

10.01% popularity Vote Up Vote Down

: Photoshop Action to Make Coloured Shapes from Swatch Library This might be a bit farfetched for Photoshop, but I was wondering if there was the possibility of creating an action to make 42

@Odierno310

Posted in: #AdobePhotoshop #Swatches

0 Comments

: QuarkXpress shortcut for adding custom pagination I'm creating a booklet in QuarkXpress and I have it set up for automatic pagination, but on some of the pages I want to make my own pagination

@Odierno310

Posted in: #Book #PageLayout #Quarkxpress #Shortcuts

1 Comments

: What fonts are these t-shirts (I'm a wild one / Ain't nobody got time for that)? Trying to figure out what font these are? I have tried dafont and WhatTheFont.

@Odierno310

Posted in: #FontIdentification

2 Comments

: How to set default PS layer to be transparent My work has been using CS3 for far to long so I finally got them to upgrade to the CC suite. This has been great but I only have one problem.

@Odierno310

Posted in: #AdobePhotoshop #Layers

3 Comments

Login to post a comment!

1 Comments

Sorted by latest first Latest Oldest Best

@Phylliss782

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.

Expand the traced image using Object > Expand...

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

10% popularity Vote Up Vote Down

Feed

: How to get for SVG with Illustrator CS4 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

More posts by @Odierno310

: Photoshop Action to Make Coloured Shapes from Swatch Library This might be a bit farfetched for Photoshop, but I was wondering if there was the possibility of creating an action to make 42

: QuarkXpress shortcut for adding custom pagination I'm creating a booklet in QuarkXpress and I have it set up for automatic pagination, but on some of the pages I want to make my own pagination

: What fonts are these t-shirts (I'm a wild one / Ain't nobody got time for that)? Trying to figure out what font these are? I have tried dafont and WhatTheFont.

: How to set default PS layer to be transparent My work has been using CS3 for far to long so I finally got them to upgrade to the CC suite. This has been great but I only have one problem.

Login to post a comment!

1 Comments

Back to top | Use Dark Theme