White border around symbol in the legend is getting cut off

[erinplourde]

Current Problem:
The symbol in the legend is getting cut off around the white borders. i.e. In the circle legend, the white border is getting cut off on each size instead of being even and rounded.

Resolution
The symbol should an even 1 pixel border around the entire symbol. This can be accomplished by stacking 2 symbol svg on top of one another. (i.e. place an entirely white symbol first and layer a smaller black symbol centered on top of the white symbol - this should give off the appearance of a 1 px border around the black symbol)

[jeremyfuksa]

Design Input: I noticed that the white border is being applied by CSS instead of as an SVG stroke. This is what's causing the clipping. Does anyone know the reasoning behind CSS borders over SVG?

[jeremyfuksa]

This SVG code would remove the need for CSS borders, should keep the circle from clipping, and still gives control over color for the fill and stroke:
<svg viewBox="0 0 48 48"> <circle cx="24" cy="24" r="21.5" fill="#1c1f21"/> <path d="M24 5c10.5 0 19 8.5 19 19s-8.5 19-19 19S5 34.5 5 24 13.5 5 24 5m0-5C10.7 0 0 10.7 0 24s10.7 24 24 24 24-10.7 24-24S37.3 0 24 0z" fill="#fff"/> </svg>
cc @pranav300

[pranav300]

@jeremyfuksa
This is a great way of going ahead with this issue.
But with this do we want the only circle as an outer circle or shape-specific outer white border?
Something like this

[jeremyfuksa]

Great question. And the screenshot above is a great example for illustrating why we'd want to have all shapes (even the dash in your screenshot) using SVG stroke instead of CSS borders.

The viewbox for the SVG is 48x48, as it should be. But, when the shape is resized to 10x10 in the legend, the 5px stroke scales proportionally. The dash must have CSS applied, as it seems to have the unscaled 5px stroke.

[jeremyfuksa]

@pranav300, what is the UX input needed?
EDIT: I found what you need on Teams. Investigating today.

[jeremyfuksa]

I found the code that defines all the shapes. I'll edit that in this branch.

[jeremyfuksa]

I've updated all the shapes except for the chevrons. I made the assumption that the chevrons would only ever be used for navigation and are not part of this issue.