SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations in HTML web structure. The <solidcolor> element define a single color in multiple places for an SVG input. It defines a palette and allow it to use consistently throughout a document.
Syntax:
<solidColor />
Attributes: It has no specific attribute.
Example 1:
HTML
<!DOCTYPE html> < html >
< body >
< svg viewBox = "0 0 200 200" >
< defs >
< solidColor id = "color" solid-color = "#a080ff" solid-opacity = "0.5" />
</ defs >
< g >
< rect fill = "none" stroke = "blue" x = "6" y = "6" width = "15" height = "15" />
< rect fill = "url(#color)" stroke = "black" stroke-width = "2" x = "1" y = "1" width = "25" height = "25" />
</ g >
</ svg >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html> < html >
< body >
< svg viewBox = "0 0 220 220" >
< defs >
< solidColor id = "MyLightPurple"
solid-color = "black" solid-opacity = "1" />
</ defs >
< rect fill = "url(#MyLightPurple)" stroke = "black" stroke-width = "5" x = "6" y = "6" width = "20" height = "20" />
</ svg >
</ body >
</ html >
|
Output: