svgcolorsinkscape

SVG is completely black when converting to PDF or opening with Inkscape


I created a simple image in SVG. When i open it in Inkscape every information about the color is lost. Why is that?

This is part of my code:

<svg version="1.1" width="300px" height="300px" xmlns="http://www.w3.org/2000/svg">
  <!-- light-blue-green: #00b3aaff -->
  <!-- light-blue-green: rgba(0, 179, 170, 1) -->
  <!-- dark-blue-green: #018273ff -->

  <!-- light-gray: #efeae0ff -->
  <!-- dark-gray: #aa9991ff -->
  
  <!-- light-red: #ff786eff -->
  <!-- dark-red: #be5652ff -->

  <!-- background -->
  <path d="M30,150 a50, 50 0, 0, 1 240, 0" style="fill:rgba(0, 179, 170, 1)" />
  <path d="M30,150 a50, 50 0, 0, 0 240, 0" fill="#018273ff" />
  <path d="M35,150 a50, 50 0, 0, 0 230, 0" fill="#00b3aaff" />
  <path d="M35,150 a50, 50 0, 0, 1 230, 0" fill="#018273ff" />
  
  <!-- ball -->
  <circle cx="50%" cy="10%" r="15" fill="#aa9991ff" />
  <path d="M140,19 a10,10, 45, 0, 1, 21,21 a10,8, 45, 0, 1, -21,-21 Z" fill="#efeae0ff"/>
</svg>

This is what Inkscape shows me: Image

I tried to convert my code using style but it is still black.


Solution

  • When specifying your fill colors, leave out the alpha (opacity) channel. In SVG 1.1, colors are only RGB, not RGBA, and while browsers usually do accept RGBA as an extension, Inkscape doesn't yet.

    Remove the last two hex digits in the hex colors:

    fill="#018273ff"
    
    fill="#018273"
    

    and remove the last argument to rgba as well as the a:

    style="fill:rgba(0, 179, 170, 1)"
    
    style="fill:rgb(0, 179, 170)"
    

    If you do want transparency (opacity, alpha), you can use the opacity, fill-opacity and stroke-opacity attributes instead, which are in SVG 1.1.