Emoji character outline in SVG - html

Question

I'm trying to create an outline of an emoji character (meaning I want to draw just the outer shape of the emoji) in SVG. The best I could come up with so far is to use two masked rectangles, scaled and super-imposed on each other.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100">
<defs>
<filter id="filter">
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
</filter>
<mask id="mask" x="0" y="0" width="100" height="100">
<text filter="url(#filter)" x="0" y="80" font-family="Helvetica" font-weight="bold" font-size="7em" fill="#000000">🦄</text>
</mask>
</defs>
<path fill="#fff" d="M0 0 L0 100 L100 100 L100 0z"/>
<path fill="#000000" d="M0 0 L0 100 L100 100 L100 0z" mask="url(#mask)"/>
<g transform="translate(5, 5) scale(0.9)">
<path d="M0 0 L100 0 L100 100 L0 100z" mask="url(#mask)" fill="#fff"/>
</g>
</svg>
Depending on the particular emoji the result isn't very satisfactory though because not all emojis fill width and height equally.
Is there a better way to achieve an outline effect for emoji characters?

Answer 1

You need a viewBox for the svg element and I am using viewBox="0 -30 157 140" slightly bigger than the bounding box of the text element.
instead of a mask I'm using clipPath to clip a white rectangle
The filter I'm using is feMorphology operator="dilate" and I'm applying the filter to a group wrapping the clipped rectangle.
svg{border:solid}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" viewBox="0 -30 157 140">
<defs>
<filter id="outline-indigo">
<feMorphology in="SourceAlpha" result="expanded"
operator="dilate" radius="3"/>
<feFlood flood-color="indigo" result="indi" />
<feComposite in ="indi" in2="expanded" operator="in" />
<feComposite in="SourceGraphic"/>
</filter>
<clipPath id='emojiClipPath'>
<text filter="url(#filter)" x="0" y="80" font-family="Helvetica" font-weight="bold" font-size="7em" fill="#000000">🦄</text>
</clipPath>
</defs>
<g filter="url(#outline-indigo)">
<rect y="-30" width="157" height="140" fill="white" clip-path='url(#emojiClipPath)'/>
</g>
</svg>