Using SVG as the Top Logo in Flarum

Some users reported that PNGs are severely distorted on iPhones, so they thought of using SVG instead of PNG. SVG and vector graphics work on the same principle and can maintain excellent clarity on any device. After looking at the source code of Flarum Beta 8, it seems to support SVG. However, how can SVG be used on Beta 7? Read on.

Tutorial

Upload logo.svg to the /assets directory on the server, and change settings - logo_path in the database to logo.svg.

Then modify the forum.blade.php and admin.blade.php files. In the CV version, they are located in \vendor\flarum\core\views\frontend\; in older or other versions, they are located in \vendor\flarum\core\views\.

Change

<img src="{{ $logo }}" alt="{{ $title }}" class="Header-logo">

to

<img width="146" height="34" src="{{ $logo }}" alt="{{ $title }}" class="Header-logo">

The width and height can be adjusted as needed.