0

I have a bitmap image that I try to turn into a SVG using Adobe CC. (It is a logo for a responsive website). The image is below:

enter image description here

First I create an Adobe EPS file using PhotopShop:

  1. I use the magic want to create a selection.
  2. I convert the selection to a work path by right clicking and using the command "Make Work Path...".
  3. I save the file as .EPS: "Save as.." and selecting type "Photoshop EPS".

I then load the EPS file into Illustrator. The image can be seen there (edit: I've since learned that this is not a vector image). To convert from EPG to SVG, I just select: File » Save As... and selects "SVG" as the type.

The saved file, has the extension .svg, but when I inspect it contents, there are no vectors there as far as I am able to tell (just a lot if base64-encoded bitmap-data).

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<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 208.2 81.6" style="enable-background:new 0 0 208.2 81.6;" xml:space="preserve">
<g>

        <image style="overflow:visible;" width="1735" height="680" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgECWAJYAAD/7AARRHVja3kAAQAEAAAAHgAA/+4AIUFkb2JlAGTAAAAAAQMA
… a lot of base64-encoded image data
48lvMunFMrRyIfvKw0WHF5q6gnrSa9JaWcYit48dCMEkDSJY9LE8p/8ArB//2Q=="transform="matrix(0.12 0 0 0.12 0 0)">
    </image>
</g>
</svg>

Is there a better procedure for this?

Improve this question
4
  • Are you sure the EPS is vector? Have you checked the Outlines in Illustrator?
    – Luciano
    Sep 17, 2019 at 9:39
  • @Luciano It is blatantly obvious that the EPS is not vector, and going down this route is a red herring. That why I ask if there is a better procedure for this.
    – Free Radical
    Sep 17, 2019 at 10:26
  • Well you said: I then load the EPS file into Illustrator. The vector image is there.. Why would you say that if you knew it was not a vector? It's not blatantly obvious.\
    – Luciano
    Sep 17, 2019 at 10:30
  • @Luciano, you're right. When I wrote the question, I had the misconception that creating a working path in Photoshop, and saving it as EPG (the Adobe legacy vector format), produced a vector image. I am older and wiser now :-). Corrected question.
    – Free Radical
    Sep 17, 2019 at 11:21

2 Answers 2

Reset to default
3

A .SVG file is a native vector graphics file and it seems to me that your script is just embedding the bmp into a .svg file - It's clear that's not what you want to accomplish.

Exporting or embedding a raster file in a vector file will not yield a useful conversion.

The .bmp would probably need to be recreated as a vector file in order to function as you need it to. That could be as simple as tracing the artwork or as involved as completely recreating it in Illustrator.

Similarly related questions are below:

Complex bitmap to vector

Converting bitmap to vector

Improve this answer
2
  • Thanks for answering. However, I am not going to accept it as it really didn't answer the question. I know fully well that "embedding a raster file in a vector file will not yield a useful conversion." That is why I asked the question in the first place. The two linked questions did not help me munch. The first is not about Illustrator (but mentions a lot of other products that are not really relevant), The second suggests a method that is much more complex than necessary.
    – Free Radical
    Sep 17, 2019 at 10:16
  • 1
    Depending on the complexity and end-usage of the artwork, an image trace won't always meet the user's needs - and a complete reconstruction of the artwork could be necessary. It looks like after some clarification, you found a solution that works.
    – Joshjurg
    Sep 17, 2019 at 13:25
0

As i haven't seen any step-by step description of the procedure, here is the thing that worked for me in Creative studio 2019:

  1. Don't bother with creating an EPS file using Photoshop. It will not create a vector file (despite the many tutorials on the web telling you that it will).
  2. Make sure that the file you want to convert is a simple bitmap file with no embedded paths or layers. I've found straightforward .png-files to work best.
  3. Open the bitmap file in Adobe Illustrator.
  4. Navigate to Window » Image trace.
  5. Set mode to "Color".
  6. Press "Trace". Wait for the process to complete.
  7. Save the result. Select "SVG" as the file type.

This produces a .svg-file with true vectors in it.

Note: If the image trace function (step 4) above is grayed out, the file has already more than just pixel data in it. That bit when I tried to use a .psd-file instead of a .png-file as the starting point.

Improve this answer
8
  • Essentially this helpx.adobe.com/illustrator/using/image-trace.html then saving as SVG.
    – Luciano
    Sep 17, 2019 at 11:27
  • @Luciano. Yes, and thank you. I've googled this extensively, and that page never came up. It is now bookmarked.
    – Free Radical
    Sep 17, 2019 at 11:31
  • In your particular case, a better way would be to (1) manually draw the ‘G•61’ bit as vector with the path tool (put the PNG on a locked layer in Illy and draw on a separate layer on top) and (2) identify the font used for the tag line (looks like some form of FF DIN or a similar DIN font) and write it as actual text in that font. That way you’ll get more precise shapes and no random little image trace artefacts, particularly on the smaller writing.
    – Janus Bahs Jacquet
    Sep 17, 2019 at 22:41
  • (Of course, since this is for a local coop association that I presume you’re in contact with, the original designer of the logo may still be around as a resident. I take it you have tried to see if you could get a hold of the original vector logo, if indeed there is one?)
    – Janus Bahs Jacquet
    Sep 17, 2019 at 22:51
  • @JanusBahsJacquet Thank you for suggesting improvements. The original design was created using Photoshop (i.e. no vectors for the G•61’ part). The font is DIN 1451 Mittelschrift. It is indeed in a font layer in the .psd version of logo, but had to be rasterized for "Image trace" to not be grayed out. It is rendered more "rounded" than it should, so I'll try to add it as a font to the vector version.
    – Free Radical
    Sep 18, 2019 at 8:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.