search

romannurik / AndroidIconAnimator

Android vector icon animation tool
Apache License 2.0
818 stars 52 forks source link

SVG doesn't import correctly when color is specified on the <svg> or <g> nodes #50

Open alexjlockwood opened 7 years ago

alexjlockwood commented 7 years ago

For example, consider this ic_add_black_24dp.svg that I downloaded/modified from go/icons:

<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" 
        viewBox="0 0 24 24" fill="#ff000000">
    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="#fffffff"/>
</svg>

AndroidIconAnimator displays a white plus sign path. However, the SVG should really display a black plus sign path.

JordyLangen commented 7 years ago

The same issue also exists when the color is defined in the style attribute on the path:

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 65.441 65.441" style="enable-background:new 0 0 65.441 65.441;" xml:space="preserve">
<g>
    <g id="group-2svg">
        <path id="path-1_10_" style="fill:#EDC951;" d="M65.441,34.881c0,16.616-13.472,30.086-30.09,30.086S5.262,51.497,5.262,34.881
            S18.733,4.795,35.351,4.795S65.441,18.265,65.441,34.881z"/>
        <path id="path-2_10_" d="M45.647,23.776c0,2.01-1.629,3.639-3.639,3.639c-2.011,0-3.641-1.629-3.641-3.639s1.63-3.639,3.641-3.639
            C44.018,20.137,45.647,21.766,45.647,23.776z"/>
        <path id="path-3_10_" d="M24.718,23.776c0,2.01-1.629,3.639-3.64,3.639c-2.01,0-3.64-1.629-3.64-3.639s1.63-3.639,3.64-3.639
            C23.089,20.137,24.718,21.766,24.718,23.776z"/>
        <path id="path-4_10_" d="M34.374,50.737h-5.055c-6.403,0-11.611-5.145-11.611-11.469c0-0.829,0.671-1.5,1.5-1.5
            c0.828,0,1.5,0.671,1.5,1.5c0,4.749,3.782,8.469,8.611,8.469h5.055c4.828,0,8.611-3.658,8.611-8.329c0-0.829,0.671-1.5,1.5-1.5
            c0.828,0,1.5,0.671,1.5,1.5C45.985,45.761,40.885,50.737,34.374,50.737z"/>
        <path id="path-5_10_" d="M31.59,63.646C14.171,63.646,0,49.477,0,32.06C0,14.644,14.171,0.475,31.59,0.475
            c17.418,0,31.59,14.169,31.59,31.585C63.18,49.477,49.008,63.646,31.59,63.646z M31.59,3.475C15.825,3.475,3,16.298,3,32.06
            c0,15.763,12.825,28.587,28.59,28.587c15.764,0,28.59-12.824,28.59-28.587C60.18,16.298,47.354,3.475,31.59,3.475z"/>
    </g>
</svg>

This is generated by Adobe Illustrator by the way.

Is this a separate issue?

alexjlockwood commented 7 years ago

@JordyLangen Might be more related to #62. I've had a lot of issues with Illustrator-exported SVGs. There is a link to an svgo pull request in #62 that I'm waiting to be submitted to fix these issues (it will allow us to inline the styles directly in the svg/path nodes.

JordyLangen commented 7 years ago

@alexjlockwood Ok, was actually planning on making a PR for this as I've had the issue a couple of times now. Will patiently wait for #62 to be merged then

alexjlockwood commented 7 years ago

In the meantime, you could fork that pull request and run svgo on your Adobe Illustrator SVGs yourself. I've been doing that at least... and for the most part it has been cleaning them up great. Not sure what is taking the pull request so long to get merged into master... :/

alexjlockwood commented 7 years ago

BTW, the easiest solution to this I think is to just use svgo. There is an option to move parent attrs to the children nodes. I'm using it in ShapeShifter right now. :)