---
title: "Flarum에서 SVG를 웹사이트 상단 로고 이미지로 사용하기 - 근심을 잊는 한 장"
description: "한 사용자가 PNG가 iPhone에서 심하게 왜곡된다고 하여 PNG 대신 SVG를 사용하려고 했습니다. SVG와 벡터 이미지는 같은 원리이므로 어떤 기기에서도 높은 선명도를 유지할 수 있습니다. Flarum Beta 8의 소스 코드를 살펴보니 SVG를 지원하는 것 같았는데, 그렇다면 B"
canonical_url: "https://www.ikxin.com/ko/article/flarum-svg-logo"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ko
meta:
  "og:description": "한 사용자가 PNG가 iPhone에서 심하게 왜곡된다고 하여 PNG 대신 SVG를 사용하려고 했습니다. SVG와 벡터 이미지는 같은 원리이므로 어떤 기기에서도 높은 선명도를 유지할 수 있습니다. Flarum Beta 8의 소스 코드를 살펴보니 SVG를 지원하는 것 같았는데, 그렇다면 B"
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~RmxhcnVt7JeQ7IScIFNWR-ulvCDsm7nsgqzsnbTtirgg7IOB64uoIOuhnOqzoCDsnbTrr7jsp4DroZwg7IKs7Jqp7ZWY6riwIC0g6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2Cc_Article%2Ctitle_~RmxhcnVt7JeQ7IScIFNWR-ulvCDsm7nsgqzsnbTtirgg7IOB64uoIOuhnOqzoCDsnbTrr7jsp4DroZwg7IKs7Jqp7ZWY6riw%2Cdescription_~7ZWcIOyCrOyaqeyekOqwgCBQTkfqsIAgaVBob25l7JeQ7IScIOyLrO2VmOqyjCDsmZzqs6HrkJzri6Tqs6Ag7ZWY7JesIFBORyDrjIDsi6AgU1ZH66W8IOyCrOyaqe2VmOugpOqzoCDtlojsirXri4jri6QuIFNWR-yZgCDrsqHthLAg7J2066-47KeA64qUIOqwmeydgCDsm5DrpqzsnbTrr4DroZwg7Ja065akIOq4sOq4sOyXkOyEnOuPhCDrhpLsnYAg7ISg66qF64-E66W8IOycoOyngO2VoCDsiJgg7J6I7Iq164uI64ukLiBGbGFydW0gQmV0YSA47J2YIOyGjOyKpCDsvZTrk5zrpbwg7IK07Y6067O064uIIFNWR-ulvCDsp4Dsm5DtlZjripQg6rKDIOqwmeyVmOuKlOuNsCwg6re466CH64uk66m0IEI%2CsiteName_~6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2CsiteHost_www.ikxin.com%2Cp_Ii9rby9hcnRpY2xlL2ZsYXJ1bS1zdmctbG9nbyI%2Cs_xpkryLpPi7AlhrAb.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_~RmxhcnVt7JeQ7IScIFNWR-ulvCDsm7nsgqzsnbTtirgg7IOB64uoIOuhnOqzoCDsnbTrr7jsp4DroZwg7IKs7Jqp7ZWY6riwIC0g6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2Cc_Article%2Ctitle_~RmxhcnVt7JeQ7IScIFNWR-ulvCDsm7nsgqzsnbTtirgg7IOB64uoIOuhnOqzoCDsnbTrr7jsp4DroZwg7IKs7Jqp7ZWY6riw%2Cdescription_~7ZWcIOyCrOyaqeyekOqwgCBQTkfqsIAgaVBob25l7JeQ7IScIOyLrO2VmOqyjCDsmZzqs6HrkJzri6Tqs6Ag7ZWY7JesIFBORyDrjIDsi6AgU1ZH66W8IOyCrOyaqe2VmOugpOqzoCDtlojsirXri4jri6QuIFNWR-yZgCDrsqHthLAg7J2066-47KeA64qUIOqwmeydgCDsm5DrpqzsnbTrr4DroZwg7Ja065akIOq4sOq4sOyXkOyEnOuPhCDrhpLsnYAg7ISg66qF64-E66W8IOycoOyngO2VoCDsiJgg7J6I7Iq164uI64ukLiBGbGFydW0gQmV0YSA47J2YIOyGjOyKpCDsvZTrk5zrpbwg7IK07Y6067O064uIIFNWR-ulvCDsp4Dsm5DtlZjripQg6rKDIOqwmeyVmOuKlOuNsCwg6re466CH64uk66m0IEI%2CsiteName_~6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2CsiteHost_www.ikxin.com%2Cp_Ii9rby9hcnRpY2xlL2ZsYXJ1bS1zdmctbG9nbyI%2Cs_xpkryLpPi7AlhrAb.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/ko#website","@type":"WebSite","description":"근심을 잊는 한 장은 기술 탐구와 일상을 다루는 개인 웹사이트입니다. 웹 개발, 백엔드 및 DevOps 실무를 기록하고 소프트웨어 도구와 디지털 경험, 코드 밖의 견문과 생각을 나눕니다.","inLanguage":"ko-KR","name":"근심을 잊는 한 장","url":"https://www.ikxin.com/ko","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ko/article/flarum-svg-logo#webpage","@type":"WebPage","description":"한 사용자가 PNG가 iPhone에서 심하게 왜곡된다고 하여 PNG 대신 SVG를 사용하려고 했습니다. SVG와 벡터 이미지는 같은 원리이므로 어떤 기기에서도 높은 선명도를 유지할 수 있습니다. Flarum Beta 8의 소스 코드를 살펴보니 SVG를 지원하는 것 같았는데, 그렇다면 B","name":"Flarum에서 SVG를 웹사이트 상단 로고 이미지로 사용하기","url":"https://www.ikxin.com/ko/article/flarum-svg-logo","isPartOf":{"@id":"https://www.ikxin.com/ko#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ko/article/flarum-svg-logo"]}]}]}
```

## Sitemap

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