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.
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.