---
title: "FlarumでSVGをウェブサイト上部のロゴ画像として使用する - 憂いを忘れる一枚"
description: "ユーザーから、PNGはiPhone上でひどくぼやけるという報告があり、PNGの代わりにSVGを使おうと思いました。SVGとベクター画像は同じ原理で、どのデバイスでも非常に鮮明な状態を保てます。Flarum Beta 8のソースコードを見てみると、どうやらSVGに対応しているようですが、Beta 7ではどのようにSVGを"
canonical_url: "https://www.ikxin.com/ja/article/flarum-svg-logo"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ja
meta:
  "og:description": "ユーザーから、PNGはiPhone上でひどくぼやけるという報告があり、PNGの代わりにSVGを使おうと思いました。SVGとベクター画像は同じ原理で、どのデバイスでも非常に鮮明な状態を保てます。Flarum Beta 8のソースコードを見てみると、どうやらSVGに対応しているようですが、Beta 7ではどのようにSVGを"
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~RmxhcnVt44GnU1ZH44KS44Km44Kn44OW44K144Kk44OI5LiK6YOo44Gu44Ot44K055S75YOP44Go44GX44Gm5L2~55So44GZ44KLIC0g5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2Cc_Article%2Ctitle_~RmxhcnVt44GnU1ZH44KS44Km44Kn44OW44K144Kk44OI5LiK6YOo44Gu44Ot44K055S75YOP44Go44GX44Gm5L2~55So44GZ44KL%2Cdescription_~44Om44O844K244O844GL44KJ44CBUE5H44GvaVBob25l5LiK44Gn44Gy44Gp44GP44G844KE44GR44KL44Go44GE44GG5aCx5ZGK44GM44GC44KK44CBUE5H44Gu5Luj44KP44KK44GrU1ZH44KS5L2~44GK44GG44Go5oCd44GE44G-44GX44Gf44CCU1ZH44Go44OZ44Kv44K~44O855S75YOP44Gv5ZCM44GY5Y6f55CG44Gn44CB44Gp44Gu44OH44OQ44Kk44K544Gn44KC6Z2e5bi444Gr6a6u5piO44Gq54q25oWL44KS5L-d44Gm44G-44GZ44CCRmxhcnVtIEJldGEgOOOBruOCveODvOOCueOCs-ODvOODieOCkuimi-OBpuOBv-OCi-OBqOOAgeOBqeOBhuOChOOCiVNWR-OBq-WvvuW~nOOBl-OBpuOBhOOCi-OCiOOBhuOBp-OBmeOBjOOAgUJldGEgN-OBp-OBr-OBqeOBruOCiOOBhuOBq1NWR-OCkg%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL2ZsYXJ1bS1zdmctbG9nbyI%2Cs_VrjBtFdOeuR1SqLI.png"
  "og:image:alt": "FlarumでSVGをウェブサイト上部のロゴ画像として使用する - 憂いを忘れる一枚"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": FlarumでSVGをウェブサイト上部のロゴ画像として使用する
  "twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~RmxhcnVt44GnU1ZH44KS44Km44Kn44OW44K144Kk44OI5LiK6YOo44Gu44Ot44K055S75YOP44Go44GX44Gm5L2~55So44GZ44KLIC0g5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2Cc_Article%2Ctitle_~RmxhcnVt44GnU1ZH44KS44Km44Kn44OW44K144Kk44OI5LiK6YOo44Gu44Ot44K055S75YOP44Go44GX44Gm5L2~55So44GZ44KL%2Cdescription_~44Om44O844K244O844GL44KJ44CBUE5H44GvaVBob25l5LiK44Gn44Gy44Gp44GP44G844KE44GR44KL44Go44GE44GG5aCx5ZGK44GM44GC44KK44CBUE5H44Gu5Luj44KP44KK44GrU1ZH44KS5L2~44GK44GG44Go5oCd44GE44G-44GX44Gf44CCU1ZH44Go44OZ44Kv44K~44O855S75YOP44Gv5ZCM44GY5Y6f55CG44Gn44CB44Gp44Gu44OH44OQ44Kk44K544Gn44KC6Z2e5bi444Gr6a6u5piO44Gq54q25oWL44KS5L-d44Gm44G-44GZ44CCRmxhcnVtIEJldGEgOOOBruOCveODvOOCueOCs-ODvOODieOCkuimi-OBpuOBv-OCi-OBqOOAgeOBqeOBhuOChOOCiVNWR-OBq-WvvuW~nOOBl-OBpuOBhOOCi-OCiOOBhuOBp-OBmeOBjOOAgUJldGEgN-OBp-OBr-OBqeOBruOCiOOBhuOBq1NWR-OCkg%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL2ZsYXJ1bS1zdmctbG9nbyI%2Cs_VrjBtFdOeuR1SqLI.png"
  "twitter:image:alt": "FlarumでSVGをウェブサイト上部のロゴ画像として使用する - 憂いを忘れる一枚"
---

> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)

# **FlarumでSVGをウェブサイト上部のロゴ画像として使用する**

2018.07.25 4,844  0

ユーザーから、PNGはiPhone上でひどくぼやけるという報告があり、PNGの代わりにSVGを使おうと思いました。SVGとベクター画像は同じ原理で、どのデバイスでも非常に鮮明な状態を保てます。Flarum Beta 8のソースコードを見てみると、どうやらSVGに対応しているようですが、Beta 7ではどのようにSVGを使えばよいのでしょうか？以下をご覧ください。

## チュートリアル

`logo.svg`をサーバーの`/assets`内にアップロードし、データベースの`settings - logo_path`を`logo.svg`に変更します。

続いて、`forum.blade.php`と`admin.blade.php`ファイルを変更します。CV版では`\vendor\flarum\core\views\frontend\`にあり、旧バージョンまたはその他のバージョンでは`\vendor\flarum\core\views\`にあります。

次の部分を

 HTML

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

次のように変更します

 HTML

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

幅と高さは必要に応じて変更できます。

![サンプル画像](https://www.ikxin.com/_ipx/animated_true&w_1734&f_webp/https://img.8b5.cn/2019/06/27/5d145c4b14f41.png)

## **コメント**

(0)

まだコメントはありません

## **コメントを投稿**

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/ja#website","@type":"WebSite","description":"「憂いを忘れる一枚」は、技術探究と日々の暮らしをテーマにした個人サイトです。Web 開発、バックエンド、DevOps の実践を記録し、ソフトウェアツールやデジタル体験、コードの外で得た見聞と思索を共有します。","inLanguage":"ja-JP","name":"憂いを忘れる一枚","url":"https://www.ikxin.com/ja","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ja/article/flarum-svg-logo#webpage","@type":"WebPage","description":"ユーザーから、PNGはiPhone上でひどくぼやけるという報告があり、PNGの代わりにSVGを使おうと思いました。SVGとベクター画像は同じ原理で、どのデバイスでも非常に鮮明な状態を保てます。Flarum Beta 8のソースコードを見てみると、どうやらSVGに対応しているようですが、Beta 7ではどのようにSVGを","name":"FlarumでSVGをウェブサイト上部のロゴ画像として使用する","url":"https://www.ikxin.com/ja/article/flarum-svg-logo","isPartOf":{"@id":"https://www.ikxin.com/ja#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ja/article/flarum-svg-logo"]}]}]}
```

## Sitemap

See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.