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

Answer 2

You can define a color via a gradient (<linearGradient> or <radialGradient>), or via the <solidColor> element.

In all 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. You'll find that using gradients has better cross-browser support than solidColor at this point.

A sample "gradient" color definition:

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