How to use an SVG image inside TopBar as a logo.


It is currently impossible to use an SVG image in the standard RapidWeaver logo area.

RapidWeaver Logo Setting

Realmac says they are working on it, but did you know you can use a SVG image inside of TopBar? Learn how now.

  1. Add a TopBar stack to your Foundation page.

  2. Open the settings for the TopBar stack and find the Top Bar - Title Area settings and look for the Content setting.

TopBar Settings

You want to change this setting from Site Setup to Custom Data.

TopBar Settings

You will notice that you can not add warehoused images. This is where you will add the link to the SVG file that needs to be warehoused on your server. You will also notice that there are three options for images, one for desktop, one for tablet and one for mobile. Since an SVG is Scalable Vector Graphic, you only need to use the mobile setting. Click on Set Link button under the Logo Mobile area and then put in the URL to your SVG.

Now preview your page and you should see your SVG image in the TopBar area.

TopBar with SVG in it

Now go forth and make your websites great!