Scalable vector graphics (SVG) is a method of drawing shapes with XML. SVG offers a number of options when dealing with color attributes. In general, color can be designated by using one of three codes.
- Rgb Value – a color model that uses red, green and blue levels to specify the shade: rgb (0,0,255) is the key for blue.
- Color Name – typing out the color name: blue
- Hexadecimal Value – this is an assigned numerical code that defines each color: #0000FF is blue
The syntax for assigning color values in SVG differs based on the method you use to identify the selected shade.
Using a Color Name
The naive approach is to type in the name of the color you want to use.
This will add a blue shade to the inside of the shape and a black line as a border.
Using RGB and Hexadecimal Values
The syntax gets slightly more complicated if you would rather use a value for the color. The coding follows a similar pattern for both rgb and hexadecimal values.
The line starts with
style. When using the style attributes, such as fill, divide the value from the name with a colon.
Separate the different attributes with a semicolon.
Use the same syntax for hexadecimal values.
If just starting out in SVG, it might be easier to stick to color names. However, ifyou prefer working in rgb or hexadecimal values, those options are available in SVG, as well.