I've tried everything but I still can't get these SVG files to show up as anything but the all-black matted version of themselves. Transparency AROUND the image is fine, internally, just black. Everything I've found so far is about SVGs being black inside some other app or misrendering in browsers. I just want the image to show properly in the UI (maybe use it as an icon or wallpaper if it works).

There is no fill on the SVG. There are no camel-cased attr names. The same image shows up fine in Windows & MacOSX. Strangely, all the internal SVGs GNOME uses for icons are working just fine. It also renders fine in any browser.

So what am I missing?

  • 1
    What do you mean "shows up fine in WIn and OSX" exactly? What were the SVGs created with? Do they display correctly if you open them with Firefox or Chromium? – dobey Mar 13 '18 at 20:48
  • Same here, with Ubuntu 16.04 no clue why, Chromium shows them properly – Ælex Nov 8 '18 at 18:24
  • @dobey read closer: browsers render fine. we're talking use in the GNOME UI as icons, elements, &c. they just show up with a black BG. and the creation tool is irrelevant; the output has nothing declared for the BG nor is there any BG element to start with. – WhiteRau Nov 9 '18 at 5:25
  • 1
    Creation tool is quite relevant. Not all tools output the same SVG, and not all rendering libraries support the same filters. Please attach screenshots and a link to an SVG which renders wrongly in Ubuntu. – dobey Nov 9 '18 at 14:07
  • 1
    OK. It looks mostly fine here. Please edit your post to include a screenshot of what it is you're seeing. Also, please don't use URL shorteners to post links on here. Thanks. – dobey Nov 16 '18 at 21:36

I do have the same behavior: nautilus and even the image viewer (I think its name is EyeOfGnome) weren't rendering anything else than black and white.

I played with the SVG file and I found the problem: those software don't interpret CSS. So all styles applied with CSS aren't rendered. Change <style>.myClass { fill: #aaa; }</style> <myElem class="myClass" /> by <myElem fill="#aaa" /> and you will see the colors in Nautilus.

Note: if you plan to use those images only in web browsers, you don't need to do that, they have a CSS engine and will render them just fine.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.