Define color in SVG

Question

How do I define a Color in a SVG file?

<?xml version="1.0"?>
<svg width="704" height="702" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <!-- define mycolor=red -->
    </defs> 

    <!-- use mycolor as fill -->
    <rect x="0" y="0" width="704" height="702" fill=mycolor/>
</svg>

Answer 1

You can define a color via a gradient (<linearGradient> or <radialGradient>).

In both cases you use them the same way:

<rect x="0" y="0" width="704" height="702" fill="url(#yourcolor)"/>

The gradients should have only one <stop> element child, with the color you want.

A sample "gradient" color definition:

<linearGradient id="yourcolor">
  <stop stop-color="#991132"/>
</linearGradient>

The <solidColor> element is obsoleted nowadays and should be avoided.

Answer 2

You can use a style sheet with svg and the fill property is also inhered from its parent element assuming you do not specify it. In this change to your code the color is red. If it were not given that color by the .myfill class it would be inherit blue from the "G" group tag.

<?xml version="1.0"?>
<svg width="704" height="702" xmlns="http://www.w3.org/2000/svg">

<style>
.myfill { fill:red }
</style>

    <g fill="blue">
    <rect x="0" y="0" width="704" height="702" class="myfill" />
    </g>

</svg>