How to get an outline effect on text in SVG?
SvgSvg Problem Overview
I just want a simple SVG image that has some arbitrary text on an angle, which I can do. Thing is, I also want the text to have a sort of "outline" effect. Like rather than a solid D, the inside and outside edges of the letter D are drawn with a line of a specified thickness and the rest of the D isn't drawn at all, so as to look almost "hollow".
Can SVG do this?
Svg Solutions
Solution 1 - Svg
paint-order: stroke; worked wonders for me in this D3 chart I'm working on.
My final css:
.name-text {
font-size: 18px;
paint-order: stroke;
stroke: #000000;
stroke-width: 1px;
stroke-linecap: butt;
stroke-linejoin: miter;
font-weight: 800;
}
My source (scroll down just a bit): https://svgwg.org/svg2-draft/painting.html#PaintOrderProperty
Solution 2 - Svg
Yes it can ;-)
I tried to realize that with Inkscape and then edited the source of the svg-File. Just don't fill it and use a stroke with color and width to draw it. I got that:
<text x="100" y="100" id="text2383" xml:space="preserve" style="font-size:56px;font-style:normal;font-weight:normal;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans">
<tspan x="100" y="100" id="tspan2385">D</tspan></text>
The interesting part is in the "style" attribute.
"fill:none;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
Solution 3 - Svg
You can use a <filter>
for this, more specifically a combination with <feMorphology>
:
<svg style="height:100px;width:100%;background-color:Green">
<defs>
<filter id="whiteOutlineEffect" color-interpolation-filters="sRGB">
<feMorphology in="SourceAlpha" result="MORPH" operator="dilate" radius="2" />
<feColorMatrix in="MORPH" result="WHITENED" type="matrix" values="-1 0 0 0 1, 0 -1 0 0 1, 0 0 -1 0 1, 0 0 0 1 0"/>
<feMerge>
<feMergeNode in="WHITENED"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g>
<text x="10" y="50" fill="black" font-size="60" filter="url(#whiteOutlineEffect)">
Example
</text>
</g>
</svg>
You might have to tune the x
/y
/width
/height
attributes of the filter in order to adapt the filter canvas size, see also <https://stackoverflow.com/q/46120700/2261442> or <https://stackoverflow.com/q/6555600/2261442>;.
I also created an interactive d3.js-powered demo to compare different solutions presented in this thread here with various settings to play around: <https://bl.ocks.org/Herst/d5db2d3d1ea51a8ab8740e22ebaa16aa>
Solution 4 - Svg
Graphical objects in SVG can have a fill (black by default) and a stroke (none by default). If you want to have red outline on your text, then set fill="none" and stroke="red". You might want to also tweak the value of the stroke-width property.
Solution 5 - Svg
Another example for outlines and glows is given here: http://www.w3.org/People/Dean/svg/texteffects/index.html
<svg width="350" height="75" viewBox="0 0 350 75"><title>MultiStroke</title><rect x="0" y="0" width="350" height="75" style="fill: #09f"/><g style="overflow:hidden; text-anchor: middle; font-size:45; font-weight: bold; font-family: Impact"><text x="175" y="55" style="fill: white; stroke: #0f9; stroke-width: 14">
Stroked Text
</text><text x="175" y="55" style="fill: white; stroke: #99f; stroke-width: 8">
Stroked Text
</text><text x="175" y="55" style="fill: white; stroke: black; stroke-width: 2">
Stroked Text
</text></g>
</svg>