Exporting from Sketch to SVG isn't allowing import into android studio

Question

I have a PNG that I made in photoshop using a PNG of an icon and some text. I'm having trouble exporting this from either Sketch or Photoshop as an SVG when trying to import I'm getting Error: No vector content found when getting the SVG direct using copy SVG code in the sketch I'm getting;


<svg width="150px" height="161px" viewBox="0 0 150 161" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Login" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Login---no-data" transform="translate(-105.000000, -150.000000)">
            <image id="Logo" x="105" y="150" width="150" height="161" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg.....TkSuQmCC"></image>
        </g>
    </g>
</svg>

And from Photoshop;

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="238" height="252" viewBox="0 0 238 252">
  <image id="Gradient_Fill_1" data-name="Gradient Fill 1" width="238" height="252" xlink:href="data:img/png;base64,iVBORw0KGgoAAAAN.....U5ErkJggg=="/>
</svg>

(I've shortened both href's data to avoid it being massive)

Both of these give the same error. What's going wrong here, I've tried using online converts to convert the PNG to an SVG and I still get the same thing. I'm assuming the android studio doesn't support xlink:href=..., if this is the case how do I flatten this to a Path (Guessing here that's what I'd do).

Would you care to expand on that, at what point am I going wrong? I got a PNG from google and added text from photoshop — Daniel Sims, Dec 23 '19 at 12:57
don't copy the code from photoshop. just save as or export that image as .svg extension and then imported that svg file in the android studio. — Saurabh Vadhva, Dec 23 '19 at 12:59
That's exactly what I'm doing, it just gives me the exact same thing as using the copy SVG code — Daniel Sims, Dec 23 '19 at 13:00
can you please post your svg image. so that i can try at my end, — Saurabh Vadhva, Dec 23 '19 at 13:01
Here's three images; the original PNG I used from google, then dragged into photoshop and added text, and two exports in PNG and SVG format of the same combined layers - https://gofile.io/?c=Vzc7e5 — Daniel Sims, Dec 23 '19 at 13:05
The text which you added in that image might be creating problem here....So you can use PNG image instead of SVG. — Saurabh Vadhva, Dec 23 '19 at 13:09
I tried exporting the icon on its own from photoshop and got the same error, then I tried exporting just the text and instead got a not supported message, do I maybe need to export it as a PNG and then flatten it somehow? — Daniel Sims, Dec 23 '19 at 13:13
I'm not massively good with Sketch hence why I'm using the PNG icon sadly, hopefully I'll find a way to be able to convert this PNG. — Daniel Sims, Dec 23 '19 at 13:22

score 0 · Answer 1 · answered Dec 26 '19 at 06:15

If you use Photoshop to design whatever you want, it is raster based tool not an svg (vector) based. Anything you get out of Photoshop will become a rasterised file. If you are looking for a SVG export then you must use Adobe Illustrator, XD of Sketch App to get your files in svg format. Design your icons, logos and other Graphics stuff in these tools and get an SVG export of the file. Best Luck!

score 0 · Answer 2 · answered Dec 29 '19 at 16:43

If your image is in PNG file format, than it's a raster image, not vector as SVG. So to have your image in vector to get all benefits of vector images (infinite scalability, etc) you should first convert it into a vector-based graphics. The best way to do this is to trace the image in Illustrator (Main Menu --> Object --> Image Trace) and then adjust the tracing settings for better results if needed, it depends on an image. After that you will be able to save your image as SVG.

Here's a short screencast how to convert a raster image into a vector one: https://www.screencast.com/t/tCmaSGTYa

P.S. Of course, it's possible to have a raster image embedded into an SVG, but in this case it will be a fake vector image which will become blurry after resizing it (and I believe this is not what you want to use in your app).

Hope this helps Happy holidays!

Exporting from Sketch to SVG isn't allowing import into android studio

2 Answers2