question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 7 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
alexjlockwoodcommented, Feb 26, 2017

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

0reactions
alexjlockwoodcommented, Feb 1, 2017

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… 😕

Read more comments on GitHub >

github_iconTop Results From Across the Web

Unable to import svg files in typescript - Stack Overflow
This properly imports the .svg as a string, which is an issue I noticed in the top-rated answer. Update your tsconfig.json with the ......
Read more >
Why doesn't my SVG work? - Scan N Cut - Create With Sue
First the reason why these SVG files didn't work properly. The design was interpreted incorrectly and the Fill part of the design imported...
Read more >
5 Gotchas You're Gonna Face Getting Inline SVG ... - CSS-Tricks
If your icons generally use only one color, applying CSS styling to a cloned instance in “one sweep” is trivial with: fill: <your-color>...
Read more >
Importing svg not working properly - Ask the community
hello, i tried to import an svg by draging it to my draft but it instead it looks like this… what can i...
Read more >
How to use SVGs in React | Sanity.io guide
There are a few ways to use an SVG in a React app: Use it as a regular image; Import it as a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found