 <p>if you do not set a <code>stroke-width</code> , defaut value is <strong>1</strong> for 1 pixel:</p> <p>Try this : </p> <pre><code>&lt;svg height="30px"&gt;&lt;text x="0" y="20" stroke-width="0" stroke="#000000"&gt;bla - svg stroke width 0&lt;/text&gt;&lt;/svg&gt; &lt;svg height="30px"&gt;&lt;text x="0" y="20" stroke="#000000"&gt;bla - svg stroke no width defined&lt;/text&gt;&lt;/svg&gt; &lt;svg height="30px"&gt;&lt;text x="0" y="20" stroke-width="1" stroke="#000000"&gt;bla - svg stroke width 1&lt;/text&gt;&lt;/svg&gt; &lt;svg height="30px"&gt;&lt;text x="0" y="20" stroke-width="2" stroke="#000000"&gt;bla - svg stroke width 2&lt;/text&gt;&lt;/svg&gt; </code></pre> <hr> <h1>At this time</h1> <p><code>text-stroke</code> is actually avalaible in webkit , using vendor prefix. So is <code>text-fill</code>.</p> <p>In near futur it could be avalaible in other browser too , check it out here : <a href="http://caniuse.com/text-stroke" rel="nofollow">http://caniuse.com/text-stroke</a></p> <h1>how to use it in webkit browser :</h1> <p><a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_text_stroke" rel="nofollow">https://developer.apple.com/library/safari/documentation/appleapplications/reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_text_stroke</a></p> <hr> <h1>for now</h1> <p><strong>To stroke text in CSS</strong>, you need to use multiple text-shadow to increase as much as needed the shadow to turn it into a full strike color .</p> <p><a href="http://codepen.io/anon/pen/xklIi/" rel="nofollow">http://codepen.io/anon/pen/xklIi/</a></p> <p><em>(as bigger is the shadow used for stroke effect, as much it needs to be repeated, redrawn)</em> </p> <pre><code>/* using CSS3 selector filters older browser, you can reset freely letter-spacing here */ [data-stroke="1"] {/* class can be used */ text-shadow: 0 0 1px red, 0 0 1px red, 0 0 1px red, 0 0 1px red, 0 0 1px red, 0 0 1px red, 0 0 1px red, 0 0 1px red, 0 0 1px red; } [data-stroke="2"] { letter-spacing:2px /* you might need to reset letter-spacing to keep text readable */ text-shadow:/* repeat until sharp enouggh */ 0 0 2px red, 0 0 2px red, 0 0 2px red, 0 0 2px red, 0 0 2px red, 0 0 2px red, 0 0 2px red, 0 0 2px red, 0 0 2px red, 0 0 2px red; } </code></pre> <p>HTML </p> <pre><code>&lt;p data-stroke="1"&gt;bla - text stroke width 1&lt;/p&gt; &lt;p data-stroke="2"&gt;bla - text stroke width 2&lt;/p&gt; &lt;p data-stroke="2sharp"&gt;bla - text stroke sharp width 2&lt;/p&gt; </code></pre>