SVG Text Outline, Gradient. Image background.

SVG Text Outline: Text in SVG is basically a graphic, so we can also apply the stroke attribute to add a border line to the Text just like we did with the other shapes. Gradient. Image background.

by Yury

HTML

<svg>
<text x="0" y="50px" font-size="50px" font-weight="bold" stroke="black" stroke-width="0.5" fill="#46BDBC">This is SVG Text</text>
</svg>

<!-- or gradient -->
<br>

<svg>
<defs>
<linearGradient id="textgradient" x1="0%" x2="0%" y1="0%" y2="100%">
        <stop offset="5%" stop-color="#F60" />
        <stop offset="95%" stop-color="#FF6" />
</linearGradient>
</defs>
    <text x="0" y="80" font-size="72" font-weight="bold" fill="url(#textgradient)" stroke="none">Gradient</text>
</svg>

<br>


<!-- external picture used:  http://www.lovethispic.com/uploaded_images/9040-Bubbles.jpg -->    
<svg>
<defs>
    <pattern id="img1" patternUnits="userSpaceOnUse" width="480" height="319">
        <image xlink:href="http://www.lovethispic.com/uploaded_images/9040-Bubbles.jpg" x="0" y="0" width="480" height="319" />
    </pattern>
</defs>
    <text x="0" y="80" font-size="72" font-weight="bold" fill="url(#img1)" stroke="none">External image</text>
</svg>

<svg class="big-svg">
    <text x="0" y="140" font-size="160" font-weight="bold" font-family="impact, georgia, times, sans-serif" fill="url(#img1)" stroke="none" id="svgText">96%</text>
</svg>

CSS

svg{
    width: 100%;
    height: 100px;
}
.big-svg{
    height: 160px;
}

JavaScript

var text = document.getElementById('svgText');

setTimeout(function(){
    text.textContent = "1000%";
    /* or use direct (if DOM query is not frequently)
        document.getElementById('svgText').textContent = "1000%"; */
}, 3000);