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

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
4

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

javascript: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>')`;if(document.body){document.body.style.background = null;document.body.children[0].style.background=null;}

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

Any improvements I make to that bookmarklet should be in the repo here: https://github.com/Myster/TransparentBackgroundRevealer

Myster
  • 171