SVG Gradients
svg gradient are capable to fill multiple colors in single element.
Example 1

<svg height="170" width="240">
<defs>
<linearGradient id="colorFill" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%"
style="stop-color:rgb(2251, 20, 55);stop-opacity:1" ></stop>
<stop offset="100%"
style="stop-color:rgb(228, 163, 224);stop-opacity:1" ></stop>
</linearGradient>
</defs>
<circle cx="100" cy="80" r="50" fill="url(#colorFill)"></circle>
</svg>
Example 2

<svg height="230" width="300">
<defs>
<linearGradient id="colorFill1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%"
style="stop-color:rgb(20, 20, 55);stop-opacity:1" ></stop>
<stop offset="100%"
style="stop-color:rgb(228, 163, 224);stop-opacity:1" ></stop>
</linearGradient>
<linearGradient id="colorFill2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="20%"
style="stop-color:rgb(55, 21, 64, 1);stop-opacity:1" ></stop>
<stop offset="100%"
style="stop-color:rgb(255, 44, 37);stop-opacity:1" ></stop>
</linearGradient>
<linearGradient id="colorFill3" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="20%"
style="stop-color:rgb(255, 105, 180);stop-opacity:1" ></stop>
<stop offset="100%"
style="stop-color:rgb(8, 8, 37);stop-opacity:1" ></stop>
</linearGradient>
<linearGradient id="colorFill4" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="10%"
style="stop-color:rgb(255, 105, 180);stop-opacity:1" ></stop>
<stop offset="20%"
style="stop-color:rgb(255, 105, 180);stop-opacity:1" ></stop>
<stop offset="60%"
style="stop-color:rgb(33, 150, 243);stop-opacity:1" ></stop>
<stop offset="100%"
style="stop-color:rgb(33, 150, 243)stop-opacity:1" ></stop>
</linearGradient>
</defs>
<text x="10" y="50" font-size="45px" fill="url(#colorFill1)">SVG</text>
<text x="10" y="100" font-size="45px" fill="url(#colorFill2)">SVG </text>
<text x="10" y="150" font-size="45px" fill="url(#colorFill3)">SVG </text>
<text x="10" y="200" font-size="45px" fill="url(#colorFill4)">SVG </text>
</svg>
Please share your knowledge to improve code and content standard. Also submit your doubts, and test case. We improve by your feedback. We will try to resolve your query as soon as possible.
New Comment