Hope itвЂ™s useful, even though it wonвЂ™t be a good fit in every single use case. Verified to work in at least Chrome, Firefox, IE9+. You can see and play with the result in the dabblet below:

You can include any kind of SVG styling on the text.

Should be perfectly accessible and wonвЂ™t break SEO.

Degrades gracefully in non-SVG browsers.

You donвЂ™t need to change anything on the parent HTML element.

No need to duplicate anything, just use fill: currentColor ( thanks GreLI!)

You need to duplicate the text color as a fill property, since SVG does not understand the color CSS property.

For example, text-shadow is applied in Chrome but not in Firefox, since technically, itвЂ™s still not a part of the SVG spec.

Some new-ish CSS text properties may not be applied.

If the text is more than one line, it wonвЂ™t automatically wrap, you have to do it manually.

Extra markup (namely 2 elements: and ).

In addition, this method has the following drawbacks I can think of: I ended up adding dy=вЂќ.3emвЂќ to the element, which fixes it but might need to be adjusted if you change the line-height. Setting dominant-baseline: middle on the element seemed to fix it, but it looks like IE doesnвЂ™t support that. One issue was that this centered the baseline of the text, so I tried to find a way to shift the baseline appropriately.

Footer Tag in HTML is defined within

Html center text vertically in footer