Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android Vector Drawable <defs> not support. How to fix it?

| got this error when try to generate a vector asset from local svg files from AndroidStudio 2.2, Ubuntu 14.04

Could not generate a preview
In icon.svg
ERROR@ line 6 <defs> is not supported
ERROR@ line 25 <use> is not supported

Here is the svg icon

I google and found that happened because AndroidStudio doesn't support <defs>, <use> ...
But I don't know how to fix it?
Can I change <defs> to another tag that AndroidStudio support?
Or I never can generate vector asset from this SVG file?
Any help or suggestion would be great appreciated.

like image 484
Linh Avatar asked Nov 09 '16 11:11

Linh


People also ask

Can we use SVG in drawable Android?

Android Studio includes a tool called Vector Asset Studio that helps you add material icons and import Scalable Vector Graphic (SVG) and Adobe Photoshop Document (PSD) files into your project as vector drawable resources.

What is vector Drawables in Android?

A VectorDrawable is a vector graphic defined in an XML file as a set of points, lines, and curves along with its associated color information. The major advantage of using a vector drawable is image scalability.

What is viewportWidth?

android:viewportWidth. Used to define the width of the viewport space. Viewport is basically the virtual canvas where the paths are drawn on. android:viewportHeight. Used to define the height of the viewport space.


2 Answers

I was having the same problem when importing svg directly from sketch into the android studio, I used this tool to convert it to vector drawable and then importing it.

like image 74
iamsujan Avatar answered Oct 20 '22 14:10

iamsujan


Your SVG uses a <linearGradient> and, to make the faint shadow, it uses an SVG filter (<filter>). Neither of these are supported by VectorDrawables. So any solution would involve removing those.

It looks like the file was created in Sketch. You can try removing those items in Sketch and trying the import again.

If that still doesn't work then you may have to manually fix the other element that is not supported by the importer: <use>. The good news is that it is easy to work around.

I've included a manually edited version of the file below that fixes those three issues. It should import into Android Studio okay, but I don't know whether it meets your aesthetic needs or not.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="353px" height="475px" viewBox="0 0 353 475" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: sketchtool 40.2 (33826) - http://www.bohemiancoding.com/sketch -->
    <title>3765E978-B278-427B-8571-70DE79D99C8A</title>
    <desc>Created with sketchtool.</desc>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="LoadingScreen" transform="translate(-370.000000, -455.000000)">
            <g id="icon" transform="translate(302.881496, 430.476899)">
                <g id="Page-1-Copy-3" transform="translate(227.267540, 231.515653) rotate(-40.000000) translate(-227.267540, -231.515653) translate(82.767540, 51.515653)">
                    <g id="Combined-Shape">
                        <path stroke="#55FFD9" stroke-width="1" fill="#49D1B7" fill-rule="evenodd"
                              d="M186.685057,69.3951579 C179.071738,84.054677 167.196464,93.5829106 147.566191,86.4324469 C145.5069,85.6807637 143.143294,85.6854176 140.908382,85.4719208 C110.344523,82.5443919 101.488745,66.5911886 116.541777,40.0162683 C124.759532,25.5078922 135.844381,13.0321318 151.386964,5.38509524 C176.103451,-6.77934919 195.596784,4.90406969 195.936794,31.9247221 C196.09814,44.884376 193.040127,55.9872472 186.685057,69.3951579 L186.685057,69.3951579 Z M198.595037,119.672673 C182.675646,106.53093 181.93282,99.7311426 194.798418,84.9441152 C210.815159,66.5375926 231.906487,60.2048217 243.950958,70.1893157 C255.533227,79.7914354 252.958093,97.0539863 237.290073,114.861111 C222.808075,131.31966 214.025927,132.411187 198.595037,119.672673 L198.595037,119.672673 Z M261.701593,172.524646 C256.255382,175.618319 247.028302,174.835442 241.296061,165.817955 C230.52687,148.874141 231.029057,142.675217 248.302041,132.303868 C258.061419,126.443308 268.19848,124.565822 276.849824,132.235549 C286.713683,140.98316 282.007021,150.347416 276.816132,159.049853 C272.613406,166.093343 261.701593,172.524646 261.701593,172.524646 L261.701593,172.524646 Z M258.884249,185.876613 C265.445061,178.927297 275.146113,178.821092 281.280117,183.8411 C290.291923,191.219766 290.497384,203.145311 281.829513,210.911347 C265.175566,225.832917 237.744852,208.265824 258.884249,185.876613 L258.884249,185.876613 Z M253.914854,238.407128 C259.379321,233.168583 266.48379,232.575328 271.037507,236.310514 C277.728699,241.7988 277.025625,250.455585 270.795386,257.209223 C258.269501,270.789008 235.658358,255.908285 253.914854,238.407128 L253.914854,238.407128 Z M0.471927459,334.579649 C-0.840210761,352.465266 12.3567324,362.93098 29.9512025,357.954605 L143.456907,325.850939 C195.727834,313.150715 236.519224,256.512569 230.761952,204.648157 C227.6544,176.61325 213.571088,151.367964 191.116546,133.562925 C168.660361,115.756584 140.515656,107.517709 111.868627,110.365293 C58.8564726,115.631895 10.7533507,166.485529 8.95278386,218.977994 L0.471927459,334.579649 L0.471927459,334.579649 Z M149.592296,185.327725 C166.515393,198.746676 169.20872,223.050038 155.605641,239.498964 C142.002561,255.94789 117.165239,258.42118 100.242142,245.002229 C83.3190454,231.583278 80.6257184,207.279916 94.2287979,190.83099 C107.831877,174.382064 132.669199,171.908774 149.592296,185.327725 L149.592296,185.327725 Z"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>
like image 9
Paul LeBeau Avatar answered Oct 20 '22 15:10

Paul LeBeau