How to get an outline effect on text in 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

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;"

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 Humongous height value for <filter> not preventing cutoff or Gaussian blur cutoff at edges.

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

How to get an outline effect on text in SVG?

Related

Recent Posts