7

SVG can be readily viewed in Edge browser. However white SVG on white browser background aren't good to see. Do I need to install an external program for this or am I missing a setting?

sven
  • 171
  • 1
  • 3
  • You are asking an off-topic question (software shopping). Questions seeking product, service, or learning material recommendations are off-topic. See [On Topic](https://superuser.com/help/on-topic). Try https://softwarerecs.stackexchange.com/ but please first read [What is required for a question to contain "enough information"](https://meta.softwarerecs.stackexchange.com/questions/336/what-is-required-for-a-question-to-contain-enough-information). – DavidPostill Jul 21 '16 at 11:22
  • 1
    I'd be perfectly happy to use native Windows tools or Edge with different settings. If that's possible. "Use a different program" would be good enough as an answer. I'll rephrase the question. – sven Jul 21 '16 at 11:36

2 Answers2

6

There is no direct way to view white SVGs but you can do some hack to view them on a chrome browser. Drag and drop the svg to chrome browser and open the dev tools(f12 or ctrl + shift + i) and change the background color of the topmost DOM element to black and voila you can view the white SVG.

Find the topmost dom and change the background color

white svg on black background

Jry9972
  • 161
  • 1
  • 3
1

I've created a bookmarklet to set the background to a checkerboard pattern. Create a bookmark and set this as the URL

javascript:(function(){document.body.style.background = null;document.body.children[0].style.background=null; document.children[0].style.backgroundImage = `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill-opacity="0.3" width="50" height="50" ><g fill="grey"><rect x="50" width="50" height="50" /><rect y="50" width="50" height="50" /></g><rect width="50" height="50" /><rect y="50" x="50" width="50" height="50" /></svg>')`;})();

Then if you load a SVG that is white hit this bookmark and it will set the background to a checkerboard.

I keep improving that bookmarklet so the repo is here: https://github.com/Myster/TransparentBackgroundRevealer It also includes a hotlink to the latest version. So you may wish to fork so you can review any changes.

Myster
  • 141
  • 6
  • Pasting it into the Chrome/Edge Console I get `Uncaught TypeError: Cannot read properties of null (reading 'style')`, but the GitHub version works OK. – mwfearnley Feb 01 '23 at 10:30