How to apply a color to a SVG Text element

Advanced ways of SVG text styling

Unleash your creativity with SVG text styling. This can make your graphics shine brighter than the sun and convey your message effectively.

CSS class with fill property - Clean and Easy

Bring in the power of CSS classes using the class attribute:

<svg width="100" height="100">
  <style>
    <!-- Let's get all blue, because why not? -->
    .coloredText { fill: blue; }
  </style>
  <text x="10" y="20" class="coloredText">Blue Text</text>
</svg>


Separating styling from the SVG makes it as clean as a whistle, thus, easy to maintain.

Text outlines using stroke - A step towards uniqueness

Enter the stroke property. It outlines your text:

<svg width="100" height="100">
  <!-- Because being normal is too mainstream! -->
  <text x="10" y="20" fill="green" stroke="black" stroke-width="1">Outlined Text</text>
</svg>


Outlines to your SVG text, makes it catch the eye and adds that extra jazz!

currentColor for seamless consistency

fill="currentColor" maintains harmony between the SVG text color and the CSS color property:

<!-- All dressed up and ready to go! -->
.my-svg-container { color: purple; }


<svg width="100" height="100" class="my-svg-container">
  <!-- This text is gonna Party in Purple! -->
  <text x="10" y="20" fill="currentColor">Purple Text</text>
</svg>


This makes up for a unified color scheme, keeping your designs consistent and responsive.

Grouping for powerful styling

Enclose your text elements with a <g> tag for applying styles simultaneously:

<svg width="100" height="100">
  <g fill="orange">
    <!-- Behold! The twins are going ORANGE! -->
    <text x="10" y="20">First Line</text>
    <text x="10" y="40">Second Line</text>
  </g>
</svg>


This ensures a organized styling that spans multiple text elements, somewhat like Minions, all dressed in the same color!

Starting correctly with SVG namespace and version

Avoid the headache of cross-browser issues by using namespace and version declaration:

<!-- Back to basics! -->
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">
  ...
</svg>


This wave of the magic wand takes care of uniform rendering in browsers.

Tackling tricky nuances

Achieving subtlety with fill-opacity

Use the superpower of fill-opacity to enhance your text color with partial transparency:

<svg width="100" height="100">
  <!-- Guess who's going Ghost!? -->
  <text x="10" y="20" fill="red" fill-opacity="0.5">Translucent Text</text>
</svg>


Quick prototyping using inline styles

During the development phase, use inline styles for quick prototyping:

<svg width="100" height="100">
  <!-- Look who got a style makeover! -->
  <text x="10" y="20" style="fill: navy; stroke: yellow; stroke-width: 0.5;">Styled Text</text>
</svg>


Though inline styles mean more clutter, it offers immediate results for your experimental designs.

Text size adjustments for responsive SVGs

Say hello to viewport-relative units to ensure your SVG text scales well:

<svg width="100%" height="100%" viewBox="0 0 100 50">
  <!-- The size matters not! -->
  <text x="10" y="20" fill="red" font-size="5vw">Responsive Text</text>
</svg>


Here, using vw or vh for font sizes ensures your text remains legible across different screen sizes.