Default SVG shape fill color is black

[vahotm]

For example, I have rect:

<rect fill-opacity="0" height="10" stroke="#000000" stroke-width="3" width="10" x="0" y="0"/>

Although fill color is not specified, "fill-opacity" is set to 0 - rect should be transparent. But as long as "fill" is not specified, SVGParser sets fill color to opaque black.

Code from SVGParser:

guard var fillColor = styleParts["fill"] else {
    return Color.black
 }

[ystrot]

This fix available in the master branch and will be part of the upcoming 0.9.2 release.

[timcloss]

Remember you also need to set the SVGView isOpaque property to false...

[f3dm76]

Sorry, we don't really understand what you mean by that. Here is how Macaw draws your example, and we believe it's correct. If you still have the problem, could you please elaborate?

[enehdivine641-cell]

[enehdivine641-cell]

Below is a ready-to-copy SVG snippet that reproduces your map as one solid shape filled with a single muted blue (#4f81bd) at 50 % opacity, while every original black line stays 100 % visible.
Paste it into any vector editor (Illustrator, Inkscape, Figma, etc.) or straight into a browser to see the effect.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="800" height="600" viewBox="0 0 800 600">

  <!-- 1.  THE FILL: one monochrome layer, 50 % transparent -->
  <g id="fill" fill="#4f81bd" fill-opacity="0.5" stroke="none">
    <!-- replace this path with the actual coastline / boundary trace -->
    <path d="M 100,100 L 700,100 L 700,500 L 100,500 Z
             M 150,200 L 300,180 L 350,300 L 200,350 Z
             M 450,250 L 600,240 L 650,380 L 480,400 Z"/>
  </g>

  <!-- 2.  THE LINEWORK: untouched, 100 % black -->
  <g id="lines" fill="none" stroke="#000" stroke-width="0.7">
    <!-- paste every original boundary/path here -->
    <path d="M 100,100 L 700,100 L 700,500 L 100,500 Z"/>
    <path d="M 150,200 L 300,180 L 350,300 L 200,350 Z"/>
    <path d="M 450,250 L 600,240 L 650,380 L 480,400 Z"/>
  </g>
</svg>

How to use

1. Open the JPEG in Inkscape (or any auto-trace tool).
2. Trace the outer boundary & internal divisions → Path → Union to get one compound path.
3. Copy that path into both <g id="fill"> and <g id="lines"> above.
4. Save as SVG → you now have a clean, monochrome map whose boundaries remain crisp at any zoom.