Footer customisation - One icon displays but the other does not

[Sar6e]

I am attempting (and mostly succeeding) to add a couple of custom Follow Buttons to the footer in the default Simple theme. The changes I have made to config.json and footer.hbs have resulted in the follow buttons I want appearing in Theme Settings. The published site also has links in the footer that are correct so I feel like those changes are solid.

The problem I am having is that one of the follow buttons (Mastodon) displays an icon in the footer, but the other (RSS) does not display an icon. So I'm thinking the changes I've made to either or both svg-map.svg and svg-map.js have a defect.

To be clear I have absolutely no clue about either of these files, I'm just copying sections above and changing the values that look like they need changing. So I'm probably just doing something dumb. Id appreciate anyone who is able to point out my stupidity.

These are the additions I've made to svg-map.svg in the overrides folder.

  <symbol id="mastodon" viewBox="0 0 32 32">
		<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"/>
	</symbol>
	
  <symbol id="rss" viewBox="0 0 32 32">
    <path d="m 155.921,346.26001 a 46.088001,46.088001 0 0 1 -46.088,46.088 46.088001,46.088001 0 0 1 -46.088001,-46.088 46.088001,46.088001 0 0 1 46.088001,-46.088 46.088001,46.088001 0 0 1 46.088,46.088 z M 64.143,172.273 v 64.348 c 84.881,0 153.938,69.056 153.938,153.939 h 64.348 c 0,-120.364 -97.922,-218.287 -218.286,-218.287 z M 296.208,159.16 C 234.445,97.397 152.266,63.382 64.81,63.382 v 64.348 c 70.268,0 136.288,27.321 185.898,76.931 49.609,49.61 76.931,115.63 76.931,185.898 h 64.348 C 391.986,303.103 357.971,220.923 296.208,159.16 Z"/>
  </symbol>

These are the additions I've made to svg-map.js in the overrides folder

    "#mastodon": {
        "viewbox": "0 0 32 32",
        "content": "<path d=\"M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z\"/>
    },
    "#rss": {
        "viewbox": "0 0 32 32",
        "content": "<path d="m 155.921,346.26001 a 46.088001,46.088001 0 0 1 -46.088,46.088 46.088001,46.088001 0 0 1 -46.088001,-46.088 46.088001,46.088001 0 0 1 46.088001,-46.088 46.088001,46.088001 0 0 1 46.088,46.088 z M 64.143,172.273 v 64.348 c 84.881,0 153.938,69.056 153.938,153.939 h 64.348 c 0,-120.364 -97.922,-218.287 -218.286,-218.287 z M 296.208,159.16 C 234.445,97.397 152.266,63.382 64.81,63.382 v 64.348 c 70.268,0 136.288,27.321 185.898,76.931 49.609,49.61 76.931,115.63 76.931,185.898 h 64.348 C 391.986,303.103 357.971,220.923 296.208,159.16 Z"/>
    },

The svg path details for both icons were derived in the same manner; Loading an icon file into Inkscape and consolidating it to a single object and then cutting and pasting the path data from the resulting svg file opened in a text editor.

I have two trains of thought. One is there is a bleedingly obvious syntax error in one or both of the above that my ignorance renders invisible to me. Or, the process of generating the svg data worked for the mastodon icon but not for the RSS icon.

If any of you tremendous people can assist I'd appreciate it.

Thanks!

[candidexmedia]

Do you have a live link that you could share so that we can inspect the file? Could even be a quick drop in Netlify or GitHub

[Sar6e]

Sure. The live site is here:

https://schulz.id.au/

Please let me know if there is anything else I can do to be useful.

[riker09]

Until today I wasn't even aware that there is something like an SVG map feature available. But as far as I can tell the SVG code for the RSS image is unlike the other icons. They all "originate" at coordinates 0,0, so the top left corner of the map. The RSS icon seems to have some kind of offset. Maybe that is helpful in your further analysis?

[bobmitro]

Mastodon icon

The viewBox is set to 32px, but the icon itself has different dimensions, around 16px. The viewBox should reflect the icon's actual size. Below, I've included the correct code for an icon size 32px.

Icon code:

<svg viewBox="0 0 32 32"><path d="M22,23.9c3.8-.5,7-2.8,7.4-4.9.6-3.3.6-8.1.6-8.1,0-6.5-4.3-8.4-4.3-8.4-2.2-1-5.8-1.4-9.7-1.4h0c-3.8,0-7.5.4-9.7,1.4,0,0-4.3,1.9-4.3,8.4v1.2c0,1.2,0,2.5,0,3.9.2,6.4,1.2,12.6,7.1,14.2,2.7.7,5,.9,6.9.8,3.4-.2,5.3-1.2,5.3-1.2v-2.5c-.1,0-2.5.8-5.3.7-2.7,0-5.6-.3-6-3.6,0-.3,0-.6,0-.9,0,0,2.7.6,6,.8,2.1,0,4-.1,6-.4h0ZM25,19.2h-3.1v-7.7c0-1.6-.7-2.4-2-2.4s-2.3,1-2.3,2.9v4.2h-3.1v-4.2c0-1.9-.8-2.9-2.3-2.9s-2,.8-2,2.4v7.6h-3.1v-7.9c0-1.6.4-2.9,1.2-3.8.9-.9,2-1.4,3.3-1.4s2.8.6,3.6,1.8l.8,1.3.8-1.3c.8-1.2,2-1.8,3.6-1.8s2.5.5,3.3,1.4c.8.9,1.2,2.2,1.2,3.8,0,0,0,7.9,0,7.9Z"></path></svg>

RSS icon

The icon is completely outside the viewBox, which is why it is invisible:

Below, you can find the correct RSS icon code (32px):

<svg viewBox="0 0 32 32"><path d="M9.4,26.8c0,2.3-1.9,4.2-4.2,4.2h0c-2.3,0-4.2-1.9-4.2-4.2h0c0-2.3,1.9-4.2,4.2-4.2h0c2.3,0,4.2,1.9,4.2,4.2h0ZM1,10.9v5.9c7.8,0,14.1,6.3,14.1,14h5.9c0-11-8.9-19.9-20-19.9ZM22.2,9.7C16.6,4.1,9.1,1,1.1,1v5.9c6.4,0,12.5,2.5,17,7,4.5,4.5,7,10.5,7,17h5.9c0-8-3.1-15.5-8.8-21.1Z"></path></svg>

Tips: Icons, especially those with rounded edges, should have a 1px offset. This means the viewBox should be 32px, while the icon itself should be 31px. This ensures better rendering and prevents edge clipping or blurring.

[Sar6e]

Thanks! Much appreciated.

[Sar6e]

That is now looking much nicer. I knew I was doing something wrong but wasn't sure what. Thanks for not just giving me the fix but taking the time to explain what I was doing wrong. That was really valuable to me. Much to learn about svg...