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

Answer 1

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!

Answer 2

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!