Trying to get path code for a .png that I convert to .svg

Report · Oct 26, 2022

This post is similar to Solved: Need SVG polygon paths AND color information - Adobe Support Community - 10465362

but I am brand new to illustrator and still not getting results I want. I think my problem is simple:

I'm trying to get the path code from a .svg to insert into my web page. The last designer left instructions, but it may have been from an earlier version of AI. Instructions are:

Find a logo in PNG, JPG or SVG format. Non-SVG will need to be converted
Edit in Illustrator, making the artboard with transform X: 0, Y: 0
The artboard should be 100px wide, 50px tall
When exporting, if there are tranforms on the paths, select each path
and 'ungroup'. Also, may need to outline stroke for each path

I have tried both export and save as svg but I don't really see the path code. On an Export as, if I say Use Artboards, it won't even show the code. On Save As, I just never see the code. I was able to edit the artboard to change the size and the transform per my instructions, but I can't see the code. I'm also wondering about "selecting each path and ungroup".

Any help is greatly appreciated. Thanks

Report · Oct 26, 2022

Maybe you can just show us what you want to get?

Have you tried exporting the SVG and then opening it in a text editor?

Report · Oct 26, 2022

How exactly are you converting this PNG to SVG?

An SVG can contain a PNG (which is what you'll get if you open a PNG in Illustrator and save it as SVG), but that SVG will contain no vector data (except the position and size of the PNG).

Report · Oct 26, 2022

I've tried both File Save As and File Export As. You say the SVG will contain no vector data. That's exactly what I want. For example, here is an example:

Obviously there are more of them. I used some online converter, and it was able to give me code like that, but it didn't display.

Report · Oct 26, 2022

You used some online converter to convert a PNG to SVG? Or something else?

Can you list the exact steps you take from start to finish, the outcome you expect, and the outcome you get?

Report · Oct 26, 2022

I only used an online converter to see if I could get the <path d='' code. With AI, I tried the following:

Open .png file, Save as .svg., Hit SVG code button, but no path code. Tried editing the artboards, and changed transform x, y, w, and h. But I need the path code.

So then I tried: Open the png, Export As .svg, Show Code. Edit the transform properties. Still no path code. And if I choose Use Artboards, Show Code doesn't even show up. But it doesn't matter, because I need to get the path code and it is never there.

Our website has a client page where we show logos. The code is something like:

<path

d='stuff like 'M35.5, 15.9c blah blah blah .9z'

fill = #C41230'

/>

then any number of additional path statements, depending on the .png that was used

Then the </svg> and </div> statements

This is all done so that when you hover over a logo, it changes color and "jumps out" at you. But based on the instructions I posted at the top, and based on how our website works, I need that path code. I haven't found out how to get it in AI. Thanks

Report · Oct 26, 2022

As I said, just saving a PNG as SVG won't create vector data. There is no vector data in a PNG.

You will need to either find an SVG source, or recreate the PNG with vector tools or image trace.

Report · Oct 26, 2022

OK I get that. But why did this online tool actually create some vector data? I pasted it in and it didn't work, but it did create those <path> directives. And of course I don't have an .svg source, which was why I was trying to convert in the first place. All I have is a .png. And this has worked before with us -- I just don't know how. Based on the instructions, I figured that AI would somehow create that code.

Report · Oct 26, 2022

Could be clipping paths for the image. As long as you don't post the complete thing, but only "blah", nobody is able to tell, really.

Report · Oct 26, 2022

OK -- here is one that works:

Report · Oct 27, 2022

Exactly what are you doing with this code?

This does not work as a file.

You can't paste it into Illustrator.

And I'm still not sure what you are trying to achieve.

The path code? What do you mean? You want an SVG with a path and your input is a PNG? Well, then you have to trace that PNG. Either automatic or manually. And then save that as an SVG. The "online tool" you mention is an autotrace service? And it generates these code snippets?

In that case you will have to create a code wrapper in which this code can be pasted.

Report · Oct 27, 2022

It worked after I gave it an XML namespace:

Report · Oct 27, 2022

What I am doing with the code is pasting it into a .js file as part of our website (written in react/js. I am not pasting it into illustrator -- I was hoping to get it from illustrator. The online tool is not really the issue here -- I already have the ping, and the instructions were to use illustrator. The code I got from the online tool never worked anyway.

Report · Oct 27, 2022

That generates a Levi's logo?

Can you link to this online tool?

Also if that's what you need, do you need Illustrator at all for this? Your SVG is right there.

Report · Oct 27, 2022

It does, so you did get something working. I should probably delete this part of the post; I'm not sure I should be putting that code out there. It was just an illustration of something that worked. It started from a .png file, and then the previous designer ran it through illustrator somehow, and got that code to paste into our .js file in our website. I'm trying to do this with a logo from a different company. This has nothing to do with any online tool. As I said, code from that tool didn't work anyway.

Report · Oct 27, 2022

Well, for what it's worth, I went online and found the png to svg converter for adobe express: Convert Images from PNG to SVG for Free | Adobe Express So I converted it and downloaded the file. I wanted to see the code, so I did a save as to another .svg file, and saw the code, which looked reasonable. It even had a namespace. I saved the code to a .txt. file but it won't let me attach it. When I put this in my .js file, I just see blanks, not a logo. So I must be missing something, probably related to the instructions above:

Find a logo in PNG, JPG or SVG format. Non-SVG will need to be converted
Edit in Illustrator, making the artboard with transform X: 0, Y: 0
The artboard should be 100px wide, 50px tall
When exporting, if there are tranforms on the paths, select each path
and 'ungroup'. Also, may need to outline stroke for each path

I couldn't drag and drop the code -- kept getting an error about the extension not matching the content. Here is what was shown when I clicked the SVG Code button:

<?xml version="1.0" encoding="utf-8"?>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 960 63" style="enable-background:new 0 0 960 63;" xml:space="preserve">
<style type="text/css">
.st0{fill:#175FAB;}
</style>
<path d="M510.5,64c-2.7,0-5.4,0-8.9-0.3c-1.3-1.4-1.5-3-2.4-3.6c-2.8-1.9-5.8-3.5-8.9-5.1c-2.7-1.4-2.6-3-1.1-5.5
c1.6-2.7,2.5-5.8,4-9.3c-3.9,0-6.1,0-8,0c-0.2,2.5-0.4,4.8-0.5,7c-0.5,0.1-0.9,0.1-1.4,0.2c-1.4-3.3-2.7-6.7-4-9.9
c3.9-2.5,7.4-4.4,10.5-6.7c5.7-4.3,4.7-11.2-1.9-14c-6.5-2.7-14.2,1.4-17.1,9.2c-1,2.7-8,11.7-10.2,13.2c-0.5,0.4-1.2,0.6-1.7,1
c-5.9,4.9-8.4,14.7,0.4,20.3c1.3,0.8,2.1,2.3,3.1,3.5c-25.6,0-51.3,0-76.9,0c0-20.9,0-41.9,0-63c46.3,0,92.6,0,139.6,0.4
c-0.2,0.8-1,1.3-1.9,1.6c-9.3,2.9-17.4,7.3-22.9,16c-4.7,7.4-6.3,15.3-6,23.9c0.3,9.2,4.1,14.9,12.5,18.2
C508.3,61.6,509.3,63,510.5,64 M451.9,3c-7.4,0-14.8,0-20.6,0c-5.3,20.5-11.2,40.1-18.5,59.1c6.1,0,13.3,0,19.1,0
c0-3-0.4-5.5,0.1-7.9c0.7-3.2,2.3-6.2,3-9.3c0.9-4,2.9-5.1,6.9-4.9c9.8,0.3,18.4-3,24.9-10.7c4.8-5.7,8.2-18.5-0.3-23.2
C462.7,3.8,457.5,3.9,451.9,3z"/>
<path d="M539.5,1c12.3,0,24.6,0,36.9,0c0,20.9,0,41.8,0,63c-17.3,0-34.7,0-52.7-0.4c0.9-1.1,2.4-2.3,4.1-2.6c5.6-1.1,8.3-4.3,10-9.9
c2.1-6.7,2.3-14.6,9.3-19.8c-8,0-15.3,0-23.4,0c5.8,4.5,0.7,8.4,0.2,12.4c-0.5,4.4-2.7,8.7-4.1,13c-6.6,0.6-9.2-1-10.4-7.3
c-0.6-2.9-0.2-6.1,0.2-9.1c1.2-9.1,4.2-17.5,10-24.7c6.7-8.3,14.3-9.6,23.6-4.2c0.9,0.6,1.9,1.2,3.4,2.1c0.8-3.3,1.5-6,2.2-8.8
c-2.3-0.7-4.1-1-5.8-1.7C541.7,2.5,540.6,1.7,539.5,1z"/>
<path class="st0" d="M539,1c1.6,0.7,2.7,1.5,3.9,2c1.7,0.6,3.4,1,5.8,1.7c-0.7,2.8-1.4,5.5-2.2,8.8c-1.5-1-2.5-1.6-3.4-2.1
c-9.2-5.4-16.9-4.1-23.6,4.2c-5.8,7.2-8.8,15.7-10,24.7c-0.4,3-0.8,6.2-0.2,9.1c1.3,6.4,3.9,7.9,10.4,7.3c1.4-4.3,3.6-8.6,4.1-13
c0.5-3.9,5.6-7.8-0.2-12.4c8.1,0,15.4,0,23.4,0c-7,5.2-7.3,13-9.3,19.8c-1.7,5.7-4.4,8.8-10,9.9c-1.7,0.3-3.1,1.5-4.5,2.6
C519.5,64,515.5,64,511,64c-1.6-1-2.6-2.4-4-2.9c-8.4-3.3-12.2-9-12.5-18.2c-0.3-8.6,1.3-16.5,6-23.9c5.5-8.6,13.6-13.1,22.9-16
c0.9-0.3,1.7-0.8,2.3-1.6C529.9,1,534.2,1,539,1z"/>
<path class="st0" d="M462.9,64c-1.5-1.2-2.3-2.7-3.6-3.5c-8.7-5.6-6.3-15.3-0.4-20.3c0.5-0.4,1.2-0.6,1.7-1
c2.3-1.5,9.3-10.5,10.2-13.2c2.9-7.8,10.6-12,17.1-9.2c6.5,2.8,7.5,9.7,1.9,14c-3.1,2.4-6.6,4.3-10.5,6.7c1.3,3.2,2.7,6.6,4,9.9
c0.5-0.1,0.9-0.1,1.4-0.2c0.2-2.3,0.3-4.5,0.5-7c1.9,0,4.1,0,8,0c-1.5,3.5-2.3,6.6-4,9.3c-1.5,2.5-1.6,4,1.1,5.5
c3,1.6,6,3.2,8.9,5.1c0.9,0.6,1.1,2.2,1.9,3.6c-0.1,0.3-0.6,0.3-1.3-0.1c-3.6-0.8-6.9-1.1-10.2-1.6c-1.7-0.3-3.7-0.4-5-1.4
c-4.1-3-10.3-1.5-13.2,3.4C468.8,64,466.1,64,462.9,64 M470.2,41.2c-1.9,1.5-4.5,2.7-5.4,4.7c-0.9,2.1-1,5.3,0.1,7.2
c0.8,1.5,3.8,2.5,5.8,2.6c2.1,0.1,4.3-1.2,6.2-1.8C474.8,49.5,472.9,45.4,470.2,41.2 M478.8,31.1c5.7-3.3,7.2-6,5.9-11.1
C479.6,21.8,478.9,26,478.8,31.1z"/>
<path d="M472,64c2.4-4.9,8.6-6.4,12.7-3.4c1.3,0.9,3.3,1.1,5,1.4c3.3,0.5,6.7,0.8,9.9,1.6C490.5,64,481.5,64,472,64z"/>
<path class="st0" d="M452.4,3c5.1,0.9,10.3,0.8,14.2,3c8.4,4.7,5.1,17.5,0.3,23.2c-6.5,7.7-15,11-24.9,10.7c-4-0.1-6.1,0.9-6.9,4.9
c-0.7,3.2-2.3,6.2-3,9.3c-0.5,2.4-0.1,4.9-0.1,7.9c-5.9,0-13,0-19.1,0c7.3-19,13.2-38.5,18.5-59.1C437.1,3,444.5,3,452.4,3
M447.3,32.6c5.5-4.3,7-10.6,8.1-16.9c0.7-4.1-1.5-6.5-5.4-7.5c-4.1-1-4,2.2-4.9,4.6c-0.7,2-1.4,4-2,6.1c-1.6,5.2-3.1,10.4-4.9,16.6
C441.7,34.4,444.2,33.7,447.3,32.6z"/>
<path d="M470.6,41.2c2.3,4.2,4.3,8.3,6.3,12.7c-2,0.6-4.1,1.9-6.2,1.8c-2-0.1-5-1.1-5.8-2.6c-1-2-1-5.2-0.1-7.2
C465.7,43.9,468.3,42.7,470.6,41.2z"/>
<path d="M478.7,30.8c0.2-4.8,0.9-9,6-10.7C486,25.2,484.5,27.8,478.7,30.8z"/>
<path d="M447,32.8c-2.8,0.9-5.3,1.6-8.8,2.6c1.8-6.2,3.4-11.4,4.9-16.6c0.6-2,1.3-4.1,2-6.1c0.8-2.3,0.8-5.6,4.9-4.6
c4,1,6.1,3.4,5.4,7.5C454.3,22,452.9,28.3,447,32.8z"/>
</svg>

Report · Oct 27, 2022

That's the Proctor & Gamble logo. The trace on this one is awful though; the Levi's one was pretty good apart from the 'R' symbol.

All I'm doing is opening these in a text editor and saving as SVG.

What I guess they want you to do in Illustrator is use Image Trace (Window > Image trace) to convert the PNGs to vector files, then save as SVG. I don't know what this part means either though:

" if there are tranforms on the paths, select each path
and 'ungroup'"

What "tranforms" and ungrouping have to do with each other I have no idea.

Report · Oct 27, 2022

OK. I had done the same thing -- opened the code in a browser to see the logo. Anyway -- I will play around with Image trace in AI. Thanks a lot for the help.

Report · Oct 27, 2022

Honestly though, this is a horrible workflow for PNGs. You're going to end up with some complete messes of SVG files.

Report · Oct 28, 2022

You're right -- this is a horrible workflow, and there must be a better way. I'm actually able to get something to display, but the size is off. The one on the right is fine, but the one I'm trying to display is wrong. The way I got at least this far was in AI: save the original png as .svg, open the .svg, place it, select it, change the transform to x: 0, y: 0, w: 100, h: 50, window->image trace, hit the trace button, save as another .svg, get the .svg code. That .svg code had three levels of <g> attributes, followed by the path directives, i.e.:

<g>
<g>
<g>
<path class="st0" d="M-50 , etc., etc.

<path d=

and then the 3 closing <g>

So per the instructions, I removed the <g> and just used the path designations. That's undoubtedly the "ungroup" that was referred to in my instructions. And the last line of the instructions states:

Compress with: http://petercollingridge.appspot.com/svg-optimiser

Well, that doesn't even seem to exist anymore.

So I obviously need a better way to do this. At this point, though, I don't know what that way is, but perhaps you're right --- I don't need Illustrator for this. Thanks

This is obviously flawed as it doesn't display correctly.

Report · Oct 28, 2022

I'm sorry, why did you do this part?

... save the original png as .svg, open the .svg, place it...

By @fbs419

All this does is create an SVG with the same PNG in it. It's like putting the PNG in a box labelled 'SVG', but changes nothing about the PNG itself. Try this:

1. Create a document your required size.

2. Place your PNG (file > place)

3. Use Image Trace as best you can. Expand the trace. Clean up if necessary. Ungroup everything as per you instructions.

4. Export As > SVG

Report · Oct 28, 2022

Wow - thanks. That's way better. I still have to slick it up now, as it's kind of washed out, but it's the perfect size, and it displays in the right place. I added the blue fill and that works great too. It didn't even generate any group code. Thanks very much. This is a great and very responsive community.

Report · Oct 28, 2022

One last question. So I solved the aspect ratio issue by setting the transform H and W properly. But as you can see from picture3, the P & G doesn't look transparent. I know that the .png is, but the generated code gives me what is shown in picture3. I tried ignoring white in the trace parameters, but that didn't change the generated code. I'm assuming that this .svg is not transparent. Is this true, and if so, how do I get rid of the rectangle?

Report · Oct 31, 2022

Select it and press delete?

Report · Oct 31, 2022

Wow. You're a genius. Select it and press delete. Who knew? I guess my common sense got obliterated by all the geekiness of the vector code. Thanks for all the help. I also found that if I deleted the class="cls-1" statements from the generated code, then my fill code worked perfectly. Thanks again for all your help. This is finally working great.

Trying to get path code for a .png that I convert to .svg

2 Correct answers

Explore related tutorials & articles