是否可以通过简单的编辑将黑白 SVG 转换为灰度 SVG？

Question

我正在使用 mscgen 为我的一个工具创建一组复杂事件的文档目的图像。

我将该图片放在我的网站上（that page 的底部），问题是当调整到适合页面的比例时，线条往往会消失。 （更新：Sander 的回答解决了这个问题，这里有一张我看到的 PNG 截图，您可能想放大它以 1:1 比例查看。）

我在想，如果它被标记为灰度图像，而不是黑白图像，那么缩放可能会更好。这可能吗？

不幸的是，Whosebug 不允许我上传 SVG 图片...如果需要，我可以放一部分源代码。您可以按照 link（见上文）找到源代码。但是，有我的 msc 代码，您可以使用以下命令重新创建 SVG 图像：

mscgen -T svg -o snapinit.svg snapinit.msc

输入代码(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

从 svg 标签中删除 shape-rendering="crispEdges" 属性（svg 中的第 6 行）

浏览器通常会在 shape-rendering="crispEdges" 时关闭抗锯齿功能 - 这正是这种情况下所需要的。
为 shape-rendering 使用其他值（例如 "auto" 或 "geometricPrecision"）或 - 删除该属性即可。

（一开始我以为mscgen渲染的png也可以解除你的悲伤，但是在firefox和chrome中看起来还不错，safari的渲染就没那么吸引人了）

参考：The 'shape-rendering' property at w3.org

是否可以通过简单的编辑将黑白 SVG 转换为灰度 SVG？

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

svg

colors

grayscale