Customising number tag pointer with dot and an outline

[bwofficer]

I'm trying to replicate the numbered callout style in the picture below.

Desired number stamp style.png

SnipSVG's number tag with line pointer comes close, but I want to add a white outline around the black pointer line so that it has good visual contrast as it passes over light and dark areas of the image. Is there a way to do this in SnipSVG without resorting to stacking two different styles of callout, the black one on top of the white one?

Is there a way to add a dot to the end of the pointer? This is less critical, but I do like the style of pointer with a large dot at the end.

I don't see anything in the pointer properties which would let me do either thing. Does SnipSVG support custom pointers that I could design myself, say in Inkscape?

Regards,
Bruce

[Tim Green]

Hi Bruce,

You can't really do this. You'd need an outline around the pointer for the white outline and the pointer part is the outline. You could combine a counter tag without a pointer (you can always pull the pointer into the body to disappear it) with an arrow with a round header and then group them, but that has too many disadvantages: You can then adjust the pointer without ungrouping with SHIFT-Click to select, but tags in groups don't auto-increment when you clone them with SHIFT + right click, and all adjustments would be kind of clunky.

So TL/DR: No, can't be done at the moment.

[bwofficer]

Thank you for the info, Tim.

I don't really care about the numbers auto-incrementing, so I'll give it a go. You say it's clunky, but I can't imagine it's any clunkier than in SnagIt, where I've been having to do pretty much the same thing. At least with SnipSVG I gain the advantage of working in SVGs, which SnagIt can't handle.

Regards,
Bruce

[brionnacrooks50]

I’ve used SnipSVG a bit, and for adding a white outline to the pointer, one workaround is to duplicate the line and adjust the colors separately for contrast. If you don’t want to stack two lines, you might try using an SVG editor like Inkscape to create a custom pointer and then import it into SnipSVG. For the dot at the end of the pointer, that should be doable by customizing the pointer in an SVG editor too. You can design both the line and the dot, then just use that custom shape in SnipSVG. It’s a bit of extra work, but it gives you full control.

[Alexander Halser]

This is a really complex figure you have here. The simplest way to design it is to start with a numbering tag, then add a white rectangle (no outline) behind the pointer. For the pointer end, put a black circle with a white outline in between those two (between in terms of z-direction).

What doesn't work in this case is the shadow, because the shadow is applied to all 3 objects, even if you group them.