I started experimenting with SVG and I’m not sure if this is something I’m doing wrong, it’s not supported or it’s just a Firefox bug.
This is the line in SVG
<text x="177" y="658">Web Interactive</text>
These are the styles
svg text{
position:relative;
font-size:7.3em;
font-family:'GothamBookRegular',Helvetica,Arial,sans-serif;
font-variant:normal;
font-style:normal;
text-transform:uppercase;
text-align:left;
fill:#282828;
color:#282828;
}
This works in Opera, Chrome, IE9 and Safari. I’ve also tested letter-spacing, and it works on all but Firefox too.
Reference page: SVG Experimenting
It doesn’t work in all browsers because it is not a valid SVG property. It doesn’t appear in this list:
http://www.w3.org/TR/SVG/propidx.html
There were questions about it on Bugzilla, but the conclusion was not to add it to Firefox.
https://bugzilla.mozilla.org/show_bug.cgi?id=682124