How to change the logos on the front page of Mastodon

How to change the logos on the front page? Images are present in “app\javascript\images”. I tried to replace the logo.svg, logo_full.svg, logo_transparent.svg with my logos but nothing happened. I also precompiled the assets. I didn’t understood logo_full.svg file is empty and is of different size as mentioned in the viewbox. But still it is showing the logo.

def svg_logo
    content_tag(:svg, tag(:use, 'xlink:href' => '#mastodon-svg-logo'), 'viewBox' => '0 0 216.4144 232.00976')
  end

  def svg_logo_full
    content_tag(:svg, tag(:use, 'xlink:href' => '#mastodon-svg-logo-full'), 'viewBox' => '0 0 713.35878 175.8678')
  end

I know we can scale svg files to any limit but how empty svg is generating the mastodon logo.
I have never worked with svg files. I would love to learn about this thing. How this happened? Kindly guide me.

Thank you for building such a great product.

They are not empty, but actually they are very simple files that some SVG utilities will not show.

mastodon/logo.svg at 3511528e508aa365e7f88b7e3b6a3b8f99c531cc · tootsuite/mastodon · GitHub is a simple SVG file that contains simple instructions that can be read with a text editor:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4144 232.00976">
   <path d="M211.80734 ...." fill="#3088d4"/>
   <path d="M177.50984 8.... fill="#fff"/>
</svg>

viewBox is the intended size of the image (but of course it can be scaled. Inside there are two path elements in two color - the Mastodon blue and white.
A <path> element is a set of drawing instructions for the browser to draw lines, circles, etc.
Inside of the d attribute the actual drawing instruction is given, where M means “go to position x,y” etc. etc.

mastodon/logo_full.svg at 3511528e508aa365e7f88b7e3b6a3b8f99c531cc · tootsuite/mastodon · GitHub and mastodon/logo_transparent.svg at 3511528e508aa365e7f88b7e3b6a3b8f99c531cc · tootsuite/mastodon · GitHub are different (let’s take the first one):

<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="mastodon-svg-logo-full" viewBox="0 0 713.35878 175.8678">
    <path d="M160.55476 ...." fill="#3088d4"/>
    <path d="M34.65751 ...."/>
</symbol></svg>

Two paths similar to those we know from the logo.svg file are enclosed in a <symbol> tag (explained on Mozilla Developer Network <symbol> - SVG: Scalable Vector Graphics | MDN ) which just defines a symbol (just like a single character or emoji) that can be used in the code when needed with the <use> tag. Therefore those files alone may appear as empty, but the definitions are there. This is useful if the symbol is used many times and should be loaded in the browser only once.

You can provide your own SVG design and wrap them with the <symbol> tag by hand, just make sure the symbol ID stays the same, otherwise they will not be used.

I tried to replace it with the new one. But nothing changed.

SVG XML CODE of Original LOGO:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4144 232.00976"><path d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915" fill="#3088d4"/><path d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" fill="#fff"/></svg>

SVG XML CODE of New LOGO:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4144 232.00976"><path d="m211.7,139.1c-3.2,16.4 -28.6,34.3 -57.7,37.8c-15.2,1.8 -30.1,3.5 -46,2.7c-26.1,-1.2 -46.6,-6.2 -46.6,-6.2c0,2.5 0.2,4.9 0.5,7.2c3.4,25.7 25.5,27.2 46.4,27.9c21.2,0.7 40,-5.2 40,-5.2l0.9,19.1c0,0 -14.7,7.9 -41.1,9.4c-14.5,0.8 -32.6,-0.4 -53.6,-5.9c-45.5,-12 -53.4,-60.6 -54.6,-109.8c-0.4,-14.6 -0.1,-28.4 -0.1,-39.9c0,-50.3 33,-65.1 33,-65.1c16.4,-7.6 45,-10.9 74.7,-11.1l0.7,0c29.7,0.2 58.3,3.5 74.9,11.1c0,0 33,14.8 33,65.1c0.1,0 0.6,37.1 -4.4,62.9" fill="#3088D4"/><path d="m98.3,72.6l0,76l-30.4,0l0,-106.6l39.6,0c17.4,0 30.9,4.1 40.8,12.3c11.6,9.9 17.5,23.3 17.5,40.1c0,16.2 -5,29.3 -15,39.6c-10,10.2 -22.8,15.3 -38.6,15.3c-1.8,0 -4.8,-0.1 -9,-0.3l0,-31.3l4.8,0c17.7,0 26.5,-7.8 26.5,-23.2c0,-14.5 -8.7,-21.8 -26.1,-21.8l28.8,0l-38.9,0l0,-0.1z" fill="#FFF"/></svg>

OUTPUT of New LOGO in illustrator
logo

NOW OUTPUT ON WEBSITE FRONTEND after asset precompile and webpacker compiling.


See nothing changed.
Please guide. Thank you.

Is there a place in the administration of a hosted site where you could just link another logo?

There is nothing. only two files logo.svg and logo_full.svg. And I am trying to replace them with my files from last week and nothing is working.

You do have access to CSS code via the administration:
Preferences->Administration->Site Settings under Custom CSS

If you know your way around CSS you could hack something like:

.landing__brand svg {
    display: none;
}
.brand__tagline {
    display: none;
}
.brand {
    background: transparent url(https://via.placeholder.com/100) no-repeat top/100% auto !important;
    padding: 60px;
}
.public-layout .footer .brand {
    display: inline-block;
    padding: 25px;
}
.public-layout .footer a[href="https://joinmastodon.org/"] {
    display: none;
}
.public-layout .footer .brand svg {
    display: none;
}

Obviously you will need to adapt this to work with your image size. It’s not ideal but it’s possible.

The code above was adapted from Leonie :vf: (@koyu@koyu.space) - koyu.space

1 Like