Skip to main content
F
fbs419
Participating Frequently
October 26, 2022
Answered

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

  • October 26, 2022
  • 2 replies
  • 4463 views

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

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?

2 replies

Doug A Roberts
Community Expert
Doug A RobertsCommunity Expert
Community Expert
October 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).

F
fbs419Author
Participating Frequently
October 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:

<svg width='100' height='50'>
<path
d='M35.5,15.9c-1.6,0-2.1,1.5-2.1,2.9h4.2C37.6,17.2,37,15.9,35.5,15.9z'
fill='#C41230'

 

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.

F
fbs419Author
Participating Frequently
October 31, 2022

Select it and press delete?


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.

Monika Gause
Community Expert
Monika GauseCommunity Expert
Community Expert
October 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?

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices