Having the SVG stroke go on the outside should be easy, right? Right?

My go-to tool to generate images (with text overlays and stuff) is svg.el in Emacs. It provides a convenient interface for making SVG files, and then I can just convert it to something else for display. The thing I’ve been using it for lately is to display actor names in movies I’m watching.

Which brings me to what I’m yammering about today — adding outlines to text. Because if you’re displaying text over random (moving) pictures, you have to add an outline so that you can read the text.

The normal way to do that in SVG is to specify a stroke-width. But as you can see, that’s ugly — the stroke is inside the letter shapes, effectively shrinking the shapes down and making them spindly and awkward.

Perhaps easier to see if you really exaggerate the width.

So the obvious question is: Can you specify that the stroke goes on the outside of the shape instead of the inside?

And:

Yes, very amusing. The quibbles are kinda quibbly:

Etc. So: Nope.

But of course it is possible to add an outline to a shape — you can do that perfectly in HTML/CSS with borders and stuff, so instead SVG has grown filters. Look how simple:

<svg width="900" height="200" viewBox="100 0 900 200">
    <filter id="outline">
        <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="4"></feMorphology>
        
        <feFlood flood-color="#32DFEC" flood-opacity="1" result="PINK"></feFlood>
        <feComposite in="PINK" in2="DILATED" operator="in" result="OUTLINE"></feComposite>

        <feMerge>
            <feMergeNode in="OUTLINE" />
            <feMergeNode in="SourceGraphic" />
        </feMerge>
    </filter>

    <!-- DILATED TEXT -->
    <text font-size="85px" dx="125" dy="130" font-weight="700" filter="url(#outline)">upgrade yourself</text>
</svg>

Which reminds me of this classic: