Is it possible to do simple edits to transform a black and white SVG to a grayscale one? - svg

Question

I am using mscgen to create an image for documentation purposes of a complex set of events for one of my tools.
I put that image on my website (bottom of that page) and the problem is that the lines tend to disappear when resized to a scale that fits the page. (Update: the answer by Sander fixed the problem, there is a PNG screenshot of what I was seeing, you may want to enlarge it to see at 1:1 scale.)
I am thinking that if it were marked as a grayscale image, instead of black and white, then the scaling may work better. Is that at all possible?
Unfortunately Stackoverflow does not let me upload an SVG image... I can put part of the source if requested. You may find the source by following the link (see above.) However, there my msc code and you can recreate the SVG image with the following command:
mscgen -T svg -o snapinit.svg snapinit.msc
The input code (snapinit.msc):
msc {
hscale = "2";
a [label="snapinit"],
b [label="snapcommunicator"],
c [label="snapserver"],
d [label="snapbackend (permanent)"],
e [label="snapbackend (cron)"],
f [label="neighbors"],
g [label="snapsignal"];
d note d [label="images, page_list, sendmail,snapwatchdog"];
#
# snapinit initialization
#
a=>a [label="init()"];
a=>a [label="--detach (optional)"];
|||;
... [label="pause (0 seconds)"];
|||;
a=>>a [label="connection timeout"];
a=>b [label="start (fork+execv)"];
|||;
b>>a;
#
# snapcommunicator initialization
#
b=>b [label="open socket to neighbor"];
b->f [label="CONNECT type=frontend ..."];
f->b [label="ACCEPT type=backend ..."];
... [label="or"];
f->b [label="REFUSE type=backend"];
|||;
... [label="neighbors may try to connect too"];
|||;
f=>f [label="open socket to neighbor"];
f->b [label="CONNECT type=backend ..."];
b->f [label="ACCEPT type=frontend ..."];
... [label="or"];
b->f [label="REFUSE type=frontend"];
#
# snapinit registers with snapcommunicator
#
|||;
... [label="pause (10 seconds)"];
|||;
a=>a [label="open socket to snapcommunicator"];
a->b [label="REGISTER service=snapinit;version=<version>"];
b->a [label="READY"];
a->b [label="SERVICES list=...depends on snapinit.xml..."];
a=>a [label="wakeup services"];
|||;
b->a [label="HELP"];
a->b [label="COMMANDS list=HELP,QUITTING,READY,STOP"];
#
# snapinit starts snapserver which registers with snapcommunicator
#
|||;
... [label="pause (0 seconds)"];
|||;
--- [label="...start snapserver..."];
a=>>a [label="connection timeout"];
a=>c [label="start (fork+execv)"];
c>>a;
c=>c [label="open socket to snapcommunicator"];
c->b [label="REGISTER service=snapserver;version=<version>"];
b->c [label="READY"];
#
# snapinit starts various backends (images, sendmail, ...)
#
|||;
... [label="pause (<wait> seconds, at least 1 second)"];
|||;
--- [label="...(start repeat for each backend)..."];
a=>>a [label="connection timeout"];
a=>d [label="start (fork+execv)"];
d>>a;
d=>d [label="open socket to snapcommunicator"];
d->b [label="REGISTER service=<service name>;version=<version>"];
b->d [label="READY"];
b->d [label="STATUS service=snapwatchdog"];
|||;
... [label="pause (<wait> seconds, at least 1 second)"];
|||;
--- [label="...(end repeat)..."];
#
# snapinit starts snapback (CRON task)
#
|||;
... [label="...cron task, run once per timer tick event..."];
|||;
a=>>a [label="CRON timer tick"];
a=>a [label="if CRON tasks still running, return immediately"];
a=>e [label="start (fork+execv)"];
e>>a;
e=>e [label="open socket to snapcommunicator"];
e->b [label="REGISTER service=snapbackend;version=<version>"];
b->e [label="READY"];
|||;
e=>>e [label="run CRON task 1"];
e=>>e [label="run CRON task 2"];
...;
e=>>e [label="run CRON task n"];
|||;
e->b [label="UNREGISTER service=snapbackend"];
|||;
... [label="...(end of cron task)..."];
#
# STOP process
#
|||;
--- [label="snapinit STOP process with: 'snapinit stop' or 'snapsignal snapinit/STOP'"];
|||;
g->b [label="'snapsignal snapinit/STOP' command sends STOP to snapcommunicator"];
b->a [label="STOP"];
... [label="...or..."];
a->a [label="'snapinit stop' command sends STOP to snapinit"];
...;
a->b [label="UNREGISTER service=snapinit"];
a->b [label="STOP"];
b->c [label="snapserver/STOP"];
b->d [label="<service name>/STOP"];
b->e [label="snapbackend/STOP"];
c->b [label="UNREGISTER service=snapserver"];
c->c [label="exit(0)"];
d->b [label="UNREGISTER service=<service name>"];
d->d [label="exit(0)"];
e->b [label="UNREGISTER service=snapbackend (if still running at the time)"];
e->e [label="exit(0)"];
... [label="once all services are unregistered"];
b->f [label="DISCONNECT"];
}

Answer 1

Remove the shape-rendering="crispEdges" attribute from the svg tag (line 6 in your svg)
Browsers usually switch off anti-aliasing when shape-rendering="crispEdges" - and that's what's needed in this situation.
Use an other value for shape-rendering (e.g. "auto" or "geometricPrecision") or - remove the attribute and you're set.
(Initially I thought that png's rendered by mscgen could relieve your sorrows as well, but while it looks ok in firefox & chrome, safari's rendition is less appealing)
Reference: The 'shape-rendering' property at w3.org