Search code examples
xmlsvgcolors

Define color in SVG

How do I define a color in an 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>
Solution

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