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

Forum|Forum|3 years ago
October 26, 2022
2 replies
4463 views

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

This topic has been closed for replies.

Correct answer Doug A Roberts

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?

Select it and press delete?

Doug A Roberts

Community Expert

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).

F

fbs419Author

Participating Frequently

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.

Doug A Roberts

Community Expert

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>

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.

Monika Gause

Community Expert

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?

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded