Add text in SVG with color

To add color to the text in SVG, you can use the fill attribute on the <text> element. Here’s an example:

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <text x="50" y="100" font-size="24" fill="red">Hello, SVG!</text>
</svg>

In this example, the fill attribute is set to “red” to make the text appear in red color. You can use any valid color value, such as color names, hexadecimal codes, RGB values, etc., to set the desired color for the text.

If you want to apply more advanced styles, such as gradients or patterns, to the text, you can use the <linearGradient>, <radialGradient>, or <pattern> elements and then reference them with the fill attribute. These elements allow you to create more complex color effects for your text.

Here’s an example using a linear gradient:

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color: blue;" />
      <stop offset="100%" style="stop-color: green;" />
    </linearGradient>
  </defs>

  <text x="50" y="100" font-size="24" fill="url(#gradient)">Hello, SVG!</text>
</svg>

In this example, a linear gradient is defined within the <defs> element using the <linearGradient> element. The gradient transitions from blue at the starting point (0%, 0%) to green at the ending point (100%, 0%). The id attribute is set to “gradient” to reference it later.

The <text> element then uses the fill attribute with the value “url(#gradient)” to apply the gradient fill to the text.

Feel free to customize the colors, positions, and other properties to achieve the desired visual effect for your text.