In SVG (Scalable Vector Graphics), the fill
attribute is used to define the fill color of a graphic element, such as a shape or text. Here are some ways you can use the fill
attribute in SVG:
Solid Color Fill:
xml<rect width="100" height="100" fill="red" />
Hexadecimal Color Fill:
xml<circle cx="50" cy="50" r="40" fill="#00ff00" />
RGB Color Fill:
xml<ellipse cx="80" cy="80" rx="40" ry="20" fill="rgb(255, 0, 255)" />
RGBA Color Fill (with Transparency):
xml<polygon points="20,10 60,10 40,40" fill="rgba(0, 0, 255, 0.5)" />
Gradient Fill:
xml<rect width="100" height="100">
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
<rect width="100" height="100" fill="url(#grad1)" />
</rect>
xml<circle cx="60" cy="60" r="50">
<radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
</radialGradient>
<circle cx="60" cy="60" r="50" fill="url(#grad2)" />
</circle>
Pattern Fill:
xml<rect width="100" height="100" fill="url(#pattern1)" />
<defs>
<pattern id="pattern1" patternUnits="userSpaceOnUse" width="20" height="20">
<circle cx="10" cy="10" r="5" fill="blue" />
</pattern>
</defs>
These examples cover basic color fills, gradients, and patterns. Depending on your specific use case, you might choose one of these approaches to achieve the desired visual effect in your SVG graphics.