Talk:BSicon/Icon geometry and SVG code neatness

From Wikimedia Commons, the free media repository
Jump to navigation Jump to search

See here also other discussions about BSicons, or expand:
Main talk:
“Gallery” talk:
Category talk:

Cuttings lacking parallel ridge stroke[edit]

Moved from Talk:BSicon/New icons and icon requests#Curved railway cutting

@Useddenim: Why does   (CSTR+r) and others have that parallel stroke joining the triangles, but   (CSTR+4) and others do not? I’d say that matching the looks of all these is paramount, in general, but also, in this particular case, that the absence that parallel stroke joining the triangles makes   (CSTR+4) hard to distinguish from   (DSTR+4) — while   (CSTR) and   (DSTR) are clearly distinct. -- Tuválkin ✉ ✇ 18:39, 26 July 2023 (UTC)[reply]

@Tuvalkin: The strokes are missing because I haven't finished redrawing them. The original curved DSTR icons had the triangles in the correct position but facing the wrong direction (they point downslope) so I moved them to their CSTR equivalents. Once I have finished all the DAMM icons I will correct the CUTTs. Useddenim (talk) 19:21, 26 July 2023 (UTC)[reply]
Expected completion: by Q2 2024. 🤣 Useddenim (talk) 19:23, 26 July 2023 (UTC)[reply]

Accessible icons facing left[edit]

I've just noticed that the accessible icons are facing left   (ACC), instead of right as per en:International Symbol of Access. Not sure if this has be discussed before, or if there was a specific reason why it was facing left? Would this be a project worth undertaking to change the direction to face right? - oahiyeel talk 05:30, 23 November 2023 (UTC)[reply]

You'd probably have to ask Kevin Steinhardt who created   (ACC). And if it's going to be changed, it should probably be updated to . Useddenim (talk) 12:14, 23 November 2023 (UTC)[reply]
Apparently the ISO has rejected to include the use of this modified symbol, so not sure if it would be appropriate. - oahiyeel talk 16:23, 24 November 2023 (UTC)[reply]
It’s the same reason why it’s blue instead of using the line colors: It was a kludge, just two pieces of SVG code taped together with chickenwire and good luck. We’ve come a long way, but some of the past mistakes are hard to root out. -- Tuválkin ✉ ✇ 12:15, 24 November 2023 (UTC)[reply]
Ah interesting and thanks for pointing that out. I guess purely fixing the direction is probably doable (with some time and effort), but having to fix the color would mean a full set of "u"s and other alternate color sets out there and would be a massive undertaking. Let me ponder if this is something worth doing, or consider just fixing the direction for now... - oahiyeel talk 16:27, 24 November 2023 (UTC)[reply]
No need, I think, since the habit of having blue background for ACC stations regardless of line color is engrained in BSicon culture, as you said. For those who, like me, don’t like it, there’s   (lACC_white) and   (lACC_black) for overlapping — which can be easily flipped to face the usual way. -- Tuválkin ✉ ✇ 14:40, 3 March 2024 (UTC)[reply]
@DCvibes529, Useddenim, Tuvalkin: The original SVG uploaded by Kevin Steinhardt actually uses the wheelchair symbol from the London Underground map. It was probably extracted from a PDF or traced; it lines up extremely closely, though not quite perfectly. The ACC wheelchair was later redesigned to have simpler SVG code, which is why it doesn't look exactly the same now.
The Underground and Overground maps still use the same symbol today, though the shade of blue is different (#263D96 according to Inkscape, #0A3797 according to Firefox). Jc86035 (talk) 14:31, 3 March 2024 (UTC)[reply]
I see, thanks for clarifying that! I guess we can leave it as it is now (honestly that's also too much icons to fix)  - DCvibes529 talk 17:17, 5 March 2024 (UTC)[reply]

pHST3 not loading correctly[edit]

Hello, I have recently created   (pHST3 maroon) and have noticed that it cuts off on the right side. The icon I used as a source,   (pHST3), does not do this, and I changed only the color ID in the text editor. I admit I am a slow learner with text editing, but I find this baffling and have no idea what went wrong, unless editing the color somehow affects the geometry? But that makes no sense. Does anyone know how to fix it? Hotdog with ketchup (talk) 19:20, 3 January 2024 (UTC)[reply]

I encountered the exact same issue with some icons that I've uploaded as well. I've uploaded multiple color variants of simply by changing the color code, but the uploaded files have the top and bottom road segments cut off.   (tBS2+l red) also has its bottom left corner cut off, despite the only change to it again being the color code. --OrdinaryScarlett (talk) 11:33, 12 January 2024 (UTC)[reply]
  (pHST3) and   (SKRZ-G4o) were uploaded in 2015 and 2017 respectively. Wikimedia has changed the svg renderer since then, which probably accounts for the current (malformed) results. Useddenim (talk) 04:58, 16 January 2024 (UTC)[reply]
A current workaround is to add maskUnits="userSpaceOnUse" in the mask element of the svg which will allow it to render correctly.  - DCvibes529 talk 13:36, 18 January 2024 (UTC)[reply]
For what’s worth, I see both   (pHST3 maroon) and   (pHST3) identically, differeing only in the color. -- Tuválkin ✉ ✇ 20:13, 18 January 2024 (UTC)[reply]
@Tuvalkin: DCvibes529 re-uploaded the icon about an hour before your comment, and it now renders correctly. Thank you both! Hotdog with ketchup (talk) 23:26, 18 January 2024 (UTC)[reply]

File:BSicon hdSTR.svg et al.[edit]

The half-width icons   (hdSTR) have formations that don't match with the regular icons (  (hSTR) etc.). The parallel versions (  (hvSTR) etc.) were fixed during the massive cleanup in 2015, but somehow the half-width ones were overlooked. They're not widely used (mostly on WP:nl, and to a lesser extent WP:no and WP:de), so maybe it's time to update them? Useddenim (talk) 20:37, 8 January 2024 (UTC)[reply]

I agree: It’s time. Is there any forseeable opposition from .nl or .de? -- Tuválkin ✉ ✇ 16:18, 18 January 2024 (UTC)[reply]
@Tuvalkin: The only problem I can see is .de's refusal to implement overlays, so there will need to be additional icons with one half-formation on one side for the adjacent icons. Useddenim (talk) 17:46, 18 January 2024 (UTC)[reply]
@Useddenim: Some of those icons, like   (hdKRZa), couldn't be converted to elevated formations, because they show objects below the viaduct which would not be visible in the frame if the formations were moved to the icon edge. The icons would have to be redrawn to use a more standard form of crossing formations instead, and probably renamed. Jc86035 (talk) 11:55, 22 February 2024 (UTC)[reply]

Inconsistent parallel 90deg icons[edit]

I've noticed several inconsistencies with the parallel 90deg icons. Some have small 90deg curve, but others have a stretched curve. Which is the preferred one in this case? Examples:

  •   (vSTR+rg-STR+lg) vs   (uvSTR+rg-STR+lg)
  •   (v-STRrg+rf) vs   (exv-STRrg+rf)
  •   (vSTRrf-) vs   (uvSTRrf-)
  •   (uvSTR+lf-) vs   (uexvSTR+lf-)
  •   (-STRr) vs   (h-STRr) vs   (ut-STRr)
  •   (vSTR+l-) vs   (vLSTR+l-)

 - DCvibes529 talk 01:15, 20 January 2024 (UTC)[reply]

@DCvibes529: 90°. I've been updating the icons as time permits. Useddenim (talk) 03:59, 20 January 2024 (UTC)[reply]
@Useddenim: Do you also intend to use circular curves for icons like   (vSTRr-SHI1r)? Jc86035 (talk) 08:50, 23 February 2024 (UTC)[reply]
@Jc86035: Yes. Useddenim (talk) 18:03, 23 February 2024 (UTC)[reply]
Also on the same topic... which is the preferred geometry?
  •   (uxvSHI2gl.G-)
  •   (uvSHI2g+l.F-)
  •   (uv-SHI2gr.G)
  •   (utv-SHI2g+r.F)

 - DCvibes529 talk 14:15, 17 March 2024 (UTC)[reply]

I've gone ahead and updated this set with consistent geometry.  - DCvibes529 talk 15:05, 30 April 2024 (UTC)[reply]

Help fix irregular icons[edit]

So I tried my hand at creating some tunnel icons   (tSPLa.F),   (tSPLa.F jade),   (tSPLe.G), and   (tSPLe.G jade). Since I am not proficient at creating these, I think they turned out irregularly shaped and may need some additional touchups. Any thoughts? OrdinaryScarlett (talk) 00:44, 30 January 2024 (UTC)[reply]

Seems like they were fixed. Thank you! I also additionally made   (pKBHFe),   (tpKBHFe),   (pKBHFe cerulean),   (tpKBHFe cerulean),   (pKBHFe red),   (tpKBHFe red),   (pKBHFa), and   (tpKBHFa). Thoughts on these? OrdinaryScarlett (talk) 22:04, 31 January 2024 (UTC)[reply]
@OrdinaryScarlett: I uploaded a new version of   (pKBHFa) with a rounded line-end to confirm to the circle. And note that the background color should actually be #F9F9F9 rather than white. Useddenim (talk) 13:25, 1 February 2024 (UTC)[reply]
@Useddenim: Thank you so much! I've gone ahead and fixed up the rest of the non-tunneled icons that I needed help with here. I also just made   (xtbvvWSLglr) but it seems like the masking is cutting into the open turning loop part of the icon, which according to   (uxtbvvWSLglr) isn't supposed to. I couldn't figure out the issue here. I also had issues with   (uetbvvWSLglr) and   (etbvvWSLglr) and had trouble with those as well. Hopefully you can help me? Thanks! OrdinaryScarlett (talk) 02:32, 5 February 2024 (UTC)[reply]
@OrdinaryScarlett: You have it right,   (uxtbvvWSLglr) is a bit messed up. I'm not sure what you meant by the masking is cutting into the open turning loop part of the icon, so I uploaded a new version of   (uxtbvvWSLglr) which is masked a little differently (but in a non-standard manner: the masking is supposed to cut through all the dashes). Useddenim (talk) 16:22, 5 February 2024 (UTC)[reply]
Thank you so much! OrdinaryScarlett (talk) 21:11, 5 February 2024 (UTC)[reply]
I've reuploaded all of the icons using properly calculated stroke-dasharray values, so that most of the dashes are evenly spaced. I wasn't sure how wide the gap between dashes at the junction should be, so it splits the difference between the two adjacent gaps.
  • Length of the loop is 250π = 785.398 px
  • Length of each straight section is 250 px, and length of each shift from edge to edge is 250 + 500arccos(4/5) = 571.751 px
  • The dashes and gaps in the loop are 250π/16 = 49.087 px
  • The junction point is treated as being end of the last dash shared by the shift and the loop, which is a distance of 2.5(125π/8) = 122.718 px down the line
  • The dashes and gaps in the remaining section are on average (250 + 500arccos(4/5) - 2.5(125π/8))/3.5 = 47.267 px; the dashes are lengthened to match the loop, so the dashes are 49.087 px and the gaps are 45.447 px
Jc86035 (talk) 17:38, 25 February 2024 (UTC)[reply]
@Useddenim: Would it be better to avoid using the circle with the grey background colour? It doesn't appear to be necessary, even for situations where this icon is to be overlaid over another one. Jc86035 (talk) 18:30, 25 February 2024 (UTC)[reply]
@Jc86035: The #F9F9F9 masking is probably not necessary. Useddenim (talk) 20:59, 25 February 2024 (UTC)[reply]
@Useddenim: I've rewritten the code of the pBHF/pHST icons, but I didn't realize that   (pHST) and   (tpHST) use different geometry. I imagine this is because it doesn't look particularly good if the tunnel dashes are partially masked out (or at least I tried it with   (tpKHSTe!) and it does not look good at full resolution). Given the absence of a way to reconcile the difference in geometry without making the icons look worse, I haven't redrawn the tpHST icons for now.
The oldest icon in the tpHST series seems to be   (utpHST), and it doesn't seem like the design of those icons has been discussed before here. Jc86035 (talk) 20:49, 29 February 2024 (UTC)[reply]
@Jc86035: Does this look any better:   (utpHST copy)? Useddenim (talk) 02:10, 1 March 2024 (UTC)[reply]
@Useddenim: It doesn't seem to help that much, although making the white strip down the middle narrower instead of removing it completely could potentially yield interesting results.
Another idea I had was to reduce the stroke width of the gaps between the station half-circles and the line, but I didn't try it. Jc86035 (talk) 08:51, 1 March 2024 (UTC)[reply]

Directional arrows on curves[edit]

Icons like   (uSTR3g) have existed for a while, but I think it would be better if the arrow were made to fit exactly within the curve. It'd be easy to just add a mask, but maybe the position and direction of the arrow could be improved.

I also made   (STRrg!) to test an idea I had, that being that the white arrow should be transformed according to the shape of the curve. In this case, it results in the path of the arrow being spiral-shaped, so I modified a Stack Overflow answer to generate the required spiral curves. I'm not sure if this would be better than the typical arrow shape.

Original Stack Overflow code (CC BY-SA 3.0) 
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    function lineIntersection (m1, b1, m2, b2) {
        if (m1 === m2) {
            throw new Error("parallel slopes");
        }
        const x = (b2 - b1) / (m1 - m2);
        return {x: x, y: m1 * x + b1};
    }

    function pStr (point) {
      return `${point.x},${point.y} `;
    }

    function getPath (center, startRadius, spacePerLoop, startTheta, endTheta, thetaStep) {
        // Rename spiral parameters for the formula r = a + bθ
        const a = startRadius;  // start distance from center
        const b = spacePerLoop / Math.PI / 2; // space between each loop

        // convert angles to radians
        let oldTheta = newTheta = startTheta * Math.PI / 180;
        endTheta = endTheta * Math.PI / 180;
        thetaStep = thetaStep * Math.PI / 180;

        // radii
        let oldR,
            newR = a + b * newTheta;

        // start and end points
        const oldPoint = {x: 0, y: 0};
        const newPoint = {
            x: center.x + newR * Math.cos(newTheta), 
            y: center.y + newR * Math.sin(newTheta)
        };

        // slopes of tangents
        let oldslope,
            newSlope = (b * Math.sin(oldTheta) + (a + b * newTheta) * Math.cos(oldTheta)) /
                       (b * Math.cos(oldTheta) - (a + b * newTheta) * Math.sin(oldTheta));

        let path = "M " + pStr(newPoint);
        
        while (oldTheta < endTheta - thetaStep) {
            oldTheta = newTheta;
            newTheta += thetaStep;

            oldR = newR;
            newR = a + b * newTheta;

            oldPoint.x = newPoint.x;
            oldPoint.y = newPoint.y;
            newPoint.x = center.x + newR * Math.cos(newTheta);
            newPoint.y = center.y + newR * Math.sin(newTheta);

            // Slope calculation with the formula:
            // (b * sinΘ + (a + bΘ) * cosΘ) / (b * cosΘ - (a + bΘ) * sinΘ)
            const aPlusBTheta = a + b * newTheta;

            oldSlope = newSlope;
            newSlope = (b * Math.sin(newTheta) + aPlusBTheta * Math.cos(newTheta)) /
                       (b * Math.cos(newTheta) - aPlusBTheta * Math.sin(newTheta));

            const oldIntercept = -(oldSlope * oldR * Math.cos(oldTheta) - oldR * Math.sin(oldTheta));
            const newIntercept = -(newSlope * newR* Math.cos(newTheta) - newR * Math.sin(newTheta));

            const controlPoint = lineIntersection(oldSlope, oldIntercept, newSlope, newIntercept);

            // Offset the control point by the center offset.
            controlPoint.x += center.x;
            controlPoint.y += center.y;

            path += "Q " + pStr(controlPoint) + pStr(newPoint);
        }
        
        return path;
    }

    const path = getPath({x:400,y:400}, 0, 50, 0, 6*360, 30);

    const spiral = document.querySelector('#spiral');
    spiral.setAttribute("d", path);


<!-- language: lang-html -->

    <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 800 800">
        <path id="spiral" d="" fill="none" stroke="black" stroke-width="3"/>
    </svg>

<!-- end snippet -->
Modified code to produce directional arrow curve segments 
    const path = getPath({x:0,y:0}, 78.6504591506, 1570.7963267949, 33.5408440974, 75, 11.4591559026);

    const path = getPath({x:0,y:0}, 28.6504591506, 1570.7963267949, 33.5408440974, 75, 11.4591559026);
  • spacePerLoop = 2π × 250 = 1570.7963267949
  • thetaStep = 50 × 360 ÷ spacePerLoop = 11.4591559026
  • startTheta = 45 − thetaStep = 33.5408440974

Jc86035 (talk) 20:11, 28 March 2024 (UTC)[reply]

I was never entirely happy with the directional arrow on   (uSTR3g), but it was the best that I could come up with. Useddenim (talk) 04:34, 29 March 2024 (UTC)[reply]

@Useddenim: I've created some more test icons to make it possible to compare the spiral curve arrows with straight arrows.

Legend
Curved arrows
Straight arrows
  • Curved arrows
  • Straight arrows
Miscellaneous code for spiral-shaped directional arrows for 45° curves 
const path = getPath({x:853.55339059327376220042218105242451964241796884423701829416993449,y:0}, 0, 3792.2377958740797427392621866700982914058955443753980220301700996, 50.175972830765153, 60, 4.7465377882114451);

d="M 1192.0558033289037,405.93694495549806 Q 1191.243851701846,439.50117538818085 1186.038633897273,473.4739578393447 Q 1180.738403215192,508.06685878291773 1170.969058059569,542.51880969532 Q 1161.016287890761,577.6176155861979 1146.5801629107718,612.0212533816266"

180 - 180/π ± (180 arcsin(1 - sqrt(2)))/π ± 18/((1 + sqrt(2)) π)

transform="rotate(100.6076888603212 853.5533905932737622,0)"
transform="scale(1,-1)rotate(144.80075211351415 853.5533905932737622,0)"

transform="rotate(95.86115107211 853.5533905932737622,0)"
transform="scale(1,-1)rotate(149.5472899017256 853.5533905932737622,0)"
  • spacePerLoop = 500π × (1 + √2) = 3792.2377958740797
  • thetaStep = 50 × 360 ÷ spacePerLoop = 4.7465377882114451
  • startTheta = 180 ÷ π - 1.5 × thetaStep = 50.175972830765153

I think at full resolution the curved arrows look better and fit the shape of the curve more, but I'm not sure which approach works better at the scale of a diagram. The difference is minimal for the 45° curves, but I'd want them to be consistent with the 90° curves. Jc86035 (talk) 16:20, 29 March 2024 (UTC)[reply]

I think the spiral curved arrows look marginally better. Useddenim (talk) 02:41, 30 March 2024 (UTC)[reply]
Retrieved from "https://commons.wikimedia.org/w/index.php?title=Talk:BSicon/Icon_geometry_and_SVG_code_neatness&oldid=872575631"