Cannot import svg with '<image>' tag

Question

I have a png picture. I open it in Adobe Illustrator and save it as svg without changing default configuration:

This gives me this svg file:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<image overflow="visible" width="714" height="714" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsoAAALKCAYAAAArlndAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
bWFnZVJlYWR5ccllPAAAA2ppVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6
...
ex8pzU1wT+bf4YnI2vz8uvwzq/PX6ueW58dHNvPztf4ZAGzZ/wswAPds0/tWAII4AAAAAElFTkSu
QmCC" transform="matrix(1 0 0 1 -307 -307)">
</image>
</svg>

When I try to import svg file in android studio I get this error:

Empty preview image!
Exception while parsing XML file:
Premature end of file.

Can anybody help me how to fix this? I import other svg files that have <path> element and they work good.

Company

Use SVG to VectorDrawable plugin in Android Studio to import svg files. – Hive

Answer 1

While converting png to svg there are some rules which we need to follow. All converters are not working fine with their default configuration. In my case, I found the best converter site which will give you preview image to confirm during conversion, which will ask for free registration and then you can download your svg file.

Convert PNG to SVG - Which requires single sign up and allows only 2 tokens per day by single email

Alternatives : Reference2 Reference3

After generating svg,Use the following tool to convert your svg to vector drawable (It's necessary because somehow android studio is not able to import all the formats or configurations and style generated by random converters)

Generate Vector Drawable from SVG

After above 2 steps you will have perfect vector drawable which you can easily copy into drawable and load wherever you required.

Phytophagous

I tried the first site and it gave me svg with <path> element. Do you know any other free site? It offers only 2 free conversions. – Company

Yeah this site only allow 2 tokens per day by single email. you could try this one too : picsvg.com but there you will have to select color and details = strong and filter = ready#1 or ready#2 as a configuration – Phytophagous

The 2nd link helped me cause Android studio wouldn't let me import the SVG as a vector drawable the regular way. Thanks a lot! – Sexagesimal

the first site is not free anymore aven for the first two images – Curvy

Answer 2

What you are trying to do is a rather pointless. Putting a bitmap image such as a PNG in a vector file (Illustrator or SVG) by itself does not make much sense. It doesn't magically turn the bitmap into a vector image. If you want to show a PNG in your app, just use an ImageView and point it at the PNG resource.

The other thing to know is that the Android Studio SVG to VectorDrawable converter does not support the <image> element. The list of supported SVG elements can be found in the answer to this other question:

Which SVG elements are supported by Android studio and which are not?

Natterjack

Answer 3

I had the same problem. As Paul LeBeau said, the problem is that a SVG file has vectors in it and not a bitmap (image) so Android Studio can't recognize the file.

The solution I found is to convert the image that you have to a vector, using "Image Trace" and "Expand" so Illustrator converts it to a vector file

Fritz

Answer 4

I found one solution here. That you can export PNG from Figma. Then Add that image into drawable, then convert to .Wedp. The Wedp is recommend by google to reduce size.

https://developer.android.com/studio/write/convert-webp

Isabellisabella