> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# p5.js SVG 이미지: 불러오기, 크기 조절, 원본 보관

> p5.js 2.3.4의 비동기 setup으로 SVG를 불러오고 세 Canvas 크기에서 투명한 구멍을 확인합니다. 편집 가능한 경로는 표시 이미지와 따로 보관합니다.

Source: https://perfectvector.com/ko/blog/p5js-svg-artwork

Language: ko
Author: Irene Kim
Published: 2026-10-02T08:00:00+09:00
Updated: 2026-10-02T08:00:00+09:00

p5.js 2.3.4에서 SVG 이미지를 불러오려면 `async function setup()` 안에서 `await loadImage('emblem.svg')`를 사용하고, 반환된 이미지를 `image()`로 그립니다. 페이지와 SVG는 HTTP로 제공합니다. SVG 파일은 편집 가능한 원본으로 보관합니다. 이 이미지 로딩 방식은 `p5.Image`를 Canvas에 그리며, 스케치에 편집 가능한 SVG 경로를 제공하지 않습니다. 현재 [loadImage 참고 문서](https://p5js.org/reference/p5/loadImage/)는 Promise 기반 로딩 패턴을 설명합니다.

불러오기 성공은 첫 번째 질문에만 답합니다. 구멍이 투명하게 유지되는지, 이미지가 늘어났는지, 불러온 픽셀 크기가 가장 큰 표시 크기에 적합한지 확인합니다. 아래 예제는 구멍이 있는 둥근 마름모 원본 하나를 48, 120, 240픽셀로 그립니다.

## 이미지 표시와 원본 기하학 중 필요한 것을 선택합니다

| 필요한 작업                   | 보관하거나 확인할 내용                      |
| ------------------------ | --------------------------------- |
| 기존 SVG 일러스트를 p5 스케치에 그리기 | 이미지로 불러오고 Canvas 결과 확인            |
| 일러스트의 원본 윤곽선 변경          | 원래 SVG 파일을 별도로 보관하고 편집            |
| 이미지를 새 크기로 그리기           | 가로세로 비율을 유지하고 불러온 이미지 크기 확인       |
| 경로 기반 SVG 내보내기           | 별도의 기하학 또는 SVG 렌더링 작업 흐름을 선택하고 검증 |

이 안내는 [p5.js 2.3.4](https://github.com/processing/p5.js/releases/tag/v2.3.4)와 `P2D` 렌더러를 고정해 사용합니다. 1.x 튜토리얼의 `preload()` 시작 코드를 복사하는 대신 현재 비동기 API를 사용합니다. [createCanvas](https://p5js.org/reference/p5/createCanvas/)는 스케치의 Canvas를 만들며 렌더러를 명시적으로 선택할 수 있습니다.

이 버전의 [이미지 로딩 구현](https://github.com/processing/p5.js/blob/v2.3.4/src/image/loading_displaying.js)은 불러온 브라우저 이미지를 `p5.Image`의 내부 Canvas에 그립니다. `.svg` 확장자를 유지하고 Canvas 표시 크기를 키우는 것만으로 스케치 내부의 경로 기반 편집을 보존할 수 없는 이유입니다.

## 실제 구멍이 있는 원본 SVG를 저장합니다

이 파일을 `emblem.svg`로 저장합니다. 경로 하나만 있고, 내장 비트맵은 없으며, 선언된 크기는 120 × 120이고 `viewBox`도 일치합니다. 바깥의 둥근 마름모와 안쪽 마름모는 이 경로 안의 두 윤곽선입니다. `fill-rule="evenodd"`는 가운데를 칠하지 않은 채 남겨 둡니다. [MDN fill-rule 참고 문서](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule)는 이 규칙이 채워지는 영역을 정하는 방식을 설명합니다.

```svg
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
  <path fill="#eb705a" fill-rule="evenodd" d="M60 8 Q66 8 72 14 L106 48 Q118 60 106 72 L72 106 Q60 118 48 106 L14 72 Q2 60 14 48 L48 14 Q54 8 60 8 Z M60 40 L80 60 L60 80 L40 60 Z"/>
</svg>
```

이 구멍은 산호색 도형 위에 얹은 흰 마름모가 아닙니다. 스케치 배경이 바뀌면 이 차이가 중요합니다. 기존 파일에 `<image>` 요소가 있다면 그림 전체가 편집 가능한 경로라고 가정하기 전에 [내장 래스터 점검표](https://perfectvector.com/ko/blog/svg-contains-raster-image)로 확인합니다.

## 비동기 setup으로 불러옵니다

완전한 아래 페이지를 `emblem.svg` 옆에 `example.html`로 저장한 다음 해당 폴더를 로컬 HTTP 서버로 제공합니다. 예를 들어 폴더에서 `python3 -m http.server 8000`을 실행하고 브라우저에서 `http://localhost:8000/example.html`을 엽니다.

```html
<!doctype html>
<html lang="en"><meta charset="utf-8"><title>p5.js SVG image size check</title>
<p>Original 120 × 120 SVG; Canvas destinations 48, 120 and 240 pixels.</p>
<pre id="status">Loading original SVG…</pre>
<script src="https://cdn.jsdelivr.net/npm/p5@2.3.4/lib/p5.js"></script>
<script>async function setup() {
  createCanvas(650, 300, P2D);
  pixelDensity(1);
  noLoop();
  background('#e7eeea');
  try {
    const art = await loadImage('emblem.svg');
    for (const [x, size] of [[20, 48], [110, 120], [280, 240]]) {
      image(art, x, 20, size, size * art.height / art.width);
    }
    const center = art.get(60, 60);
    const solid = art.get(60, 25);
    document.querySelector('#status').textContent = JSON.stringify({
      version: p5.VERSION, imageWidth: art.width, imageHeight: art.height,
      sourceCenterRGBA: center, sourceSolidRGBA: solid,
      canvasWidth: width, canvasHeight: height, pixelDensity: pixelDensity(),
      destinationSizes: [48, 120, 240]
    }, null, 2);
  } catch (error) {
    document.querySelector('#status').textContent = 'Image load failed: ' + error.message;
  }
}</script></html>
```

상태 블록은 로딩 후 표시되며 p5 버전, 불러온 이미지 크기, 원본 픽셀 표본 두 개를 보고합니다. 중앙 표본은 투명도를, 산호색 표본은 고리의 불투명한 부분을 확인합니다. 그리기 호출은 불러온 이미지 하나를 공유합니다. 표시 크기를 바꿀 때마다 SVG를 다시 불러오거나 수정하지 않습니다.

[image 참고 문서](https://p5js.org/reference/p5/image/)는 원본 내용과 대상의 너비 및 높이를 구분합니다. 여기서는 각 대상 높이를 `art.height / art.width`로 계산하므로 정사각형이 아닌 대체 이미지도 비율이 유지됩니다. 표시 너비를 바꿀 때 계산에 두 치수를 모두 포함합니다.

예제는 Canvas 비교를 명확하게 하기 위해 [pixelDensity(1)](https://p5js.org/reference/p5/pixelDensity/)을 설정합니다. 실제 스케치가 쓰는 밀도를 기록합니다. 기본값은 디스플레이를 따를 수 있습니다. Canvas 밀도를 높여도 이미 불러온 이미지가 된 경로를 복원하지는 않습니다.

## 브라우저 테스트에서 확인한 내용

원본 파일과 이 시작 코드를 p5.js 2.3.4, `P2D`, 픽셀 밀도 `1`로 Chrome에서 실행했습니다. 불러온 이미지는 120 × 120이었습니다. 중앙 표본은 `[0, 0, 0, 0]`, 내부 산호색 표본은 `[235, 112, 90, 255]`였습니다. 세 대상 크기 모두 구멍을 통해 연한 스케치 배경이 보였습니다.

| Canvas 대상 | 불러온 이미지 대비 비율 | 관찰 결과                               |
| --------- | ------------- | ----------------------------------- |
| 48 × 48   | 0.4×          | 구멍이 보이는 작은 고리                       |
| 120 × 120 | 1×            | 불러온 크기의 완전한 고리                      |
| 240 × 240 | 2×            | 고리와 구멍은 완전하지만 확대한 가장자리는 눈에 띄게 부드러워짐 |

이 관찰은 직접 만든 이 파일, 브라우저, 버전, 렌더러에 대한 것입니다. 모든 내보낸 SVG, 필터, 글꼴, 외부 런타임의 호환성 결과가 아닙니다.

**편집 원본과 Canvas 표시**

![편집 가능한 산호색 고리의 윤곽선과 구멍 사이로 체크무늬가 보이는 세 가지 점점 큰 이미지 표시를 나타낸 개념 일러스트.](https://perfectvector.com/blog/p5js-svg-artwork/canvas-and-master.webp)

*일러스트: 원본 윤곽선과 표시 이미지는 역할이 다릅니다. 이 그림은 p5.js 화면 캡처, 선명도 비교, 변환 결과가 아닙니다.*

원본 경로 데이터는 테스트 내내 바뀌지 않았습니다. 이미지를 2배로 그리는 것은 표시 방식에 영향을 줬으며 `emblem.svg`의 `d` 속성에는 영향을 주지 않았습니다. 나중에 다른 전달용 이미지를 준비할 수 있도록 원본을 프로젝트와 함께 저장합니다.

## 보이는 증상에 맞춰 수정합니다

### 이미지가 나타나지 않습니다

제공 중인 페이지에서 SVG URL에 접근할 수 있는지, `image()` 실행 전에 `loadImage()`가 완료됐는지 확인합니다. 시작 코드의 `try/catch`는 로딩 실패를 상태 블록에 표시합니다. loadImage 문서에 나와 있듯이 원격 이미지는 브라우저 보안 제한 때문에 실패할 수도 있습니다. 로딩 문제와 그림 문제를 구분하려면 직접 제어하는 같은 출처의 파일로 시작합니다.

브라우저에서 SVG 자체를 엽니다. 거기서도 모양이 잘못됐다면 원본부터 고칩니다. 이름을 바꾼 PNG는 SVG 문서가 되지 않으며 비트맵을 감싼 SVG도 없는 윤곽선을 만들지 않습니다.

### 이미지가 늘어나 보입니다

대상의 비율을 `art.width / art.height`와 비교합니다. 예를 들어 정사각형 이미지를 240 × 120 대상에 그리면 높이에 비해 너비가 의도적으로 두 배가 됩니다. 늘림이 목적이 아니라면 시작 코드의 비율 계산을 사용합니다. 원본 자체에 빈 공간이 너무 많다면 표시 크기를 키워 보상하기 전에 아트보드와 `viewBox`를 확인합니다.

### 확대한 가장자리가 흐려 보입니다

Canvas 크기뿐 아니라 불러온 이미지 크기를 확인합니다. 테스트에서는 120 × 120 이미지를 240 × 240 대상에 그렸습니다. 대상 인수를 바꿔도 SVG 곡선을 새로운 이미지 로딩으로 다시 처리하지 않습니다.

의도한 용도에 맞는 명시적 크기의 전달용 SVG를 준비하고 다시 불러온 다음, 결과의 `art.width`와 `art.height`를 확인한 뒤 채택합니다. 좌표계와 원본 윤곽선은 유지합니다. 그런 다음 화면의 가장 작은 크기와 가장 큰 크기를 비교합니다. 불러온 픽셀 수를 늘려도 최종 표시가 너무 작으면 작은 구멍이 읽히게 만들 수 없습니다.

스케치에 이미지 그리기 대신 기하학 연산이 필요하다면 별도로 계획합니다. [Canvas Path2D 안내](https://perfectvector.com/ko/blog/canvas-path2d-svg)는 경로 데이터 작업을 다루며, [PixiJS SVG 안내](https://perfectvector.com/ko/blog/pixijs-svg-import)는 해당 엔진의 기하학 방식과 텍스처 방식을 비교합니다. 이 API들은 p5의 `loadImage()`와 서로 바꿔 쓸 수 없습니다.

### 가운데가 투명하지 않고 흰색입니다

원본 SVG에 칠해진 배경이나 흰 안쪽 도형이 있는지 확인합니다. 이 원본에서는 `evenodd` 윤곽선이 구멍을 남기며, 불러온 중앙 알파는 0이었습니다. 자신의 파일로 대비되는 스케치 배경에서 같은 확인을 반복합니다. 흰 미리보기 페이지는 차이를 숨길 수 있습니다.

## Canvas 내보내기와 SVG 원본을 구분합니다

표준 [saveCanvas 참고 문서](https://p5js.org/reference/p5/saveCanvas/)는 PNG, WebP, JPG 이미지 출력을 나열합니다. 이 API로 그려진 Canvas를 저장해도 원래 SVG 경로가 복원되지 않습니다. 나중에 윤곽선을 편집하거나 경로 기반 파일을 전달해야 한다면 `emblem.svg`를 별도로 보관합니다. 매끄러워 보이는 Canvas의 화면 캡처로는 편집 가능한 SVG 내보내기 작업 흐름을 입증할 수 없습니다.

PerfectVector는 일러스트가 평면 PNG나 JPG로만 있고 편집할 원본 윤곽선이 필요할 때 앞단에 적합합니다. [이미지를 SVG로 변환하고](https://perfectvector.com/ko/image-to-vector), SVG 편집기에서 외곽선과 빈 공간을 확인한 다음, 실제 p5 로딩 및 크기 확인을 반복합니다. 기존의 깨끗한 SVG는 그대로 사용합니다. 추적이 p5의 이미지 API를 바꾸거나 Canvas 출력을 SVG 경로 문서로 만들지는 않습니다. 더 폭넓은 [벡터화 안내](https://perfectvector.com/ko/blog/what-is-image-vectorization)가 이 원본 준비 단계를 설명합니다.

원본을 보관하고 p5 버전과 불러온 크기를 기록합니다. 스케치가 사용하는 크기에서 구멍과 가장자리가 올바르게 보일 때만 자산을 채택합니다.

## 자주 묻는 질문

**p5.js는 loadImage로 SVG를 불러올 수 있나요?**
가능합니다. 이 p5.js 2.3.4 P2D 예제는 비동기 setup 안의 await loadImage로 원본 SVG를 불러옵니다. 한 번의 로딩 성공을 완전한 SVG 호환성으로 여기기보다 자신의 파일이 어떻게 보이는지와 불러온 크기를 테스트합니다.

**불러온 p5 SVG 이미지는 경로로 편집할 수 있나요?**
이미지 로딩 방식은 p5.Image를 반환하고 Canvas에 그립니다. 원본 경로 편집을 위해 SVG를 별도로 보관합니다. Canvas 이미지 표시는 불러온 그림에 편집 가능한 SVG DOM을 제공하지 않습니다.

**p5 SVG를 확대하면 왜 흐릿해지나요?**
불러온 이미지 크기와 대상 크기를 비교합니다. 테스트의 120 × 120 이미지는 240 × 240에서 더 부드럽게 보였습니다. 적절한 크기의 전달용 원본을 준비하고 다시 불러와 실제 결과를 확인합니다.

**saveCanvas가 원래 SVG를 내보내나요?**
표준 saveCanvas API 문서는 PNG, WebP, JPG 출력을 설명합니다. 경로 기반 출력이 필요하면 원래 SVG 원본을 보존하거나 별도의 SVG 렌더링 및 내보내기 작업 흐름을 검증합니다.

## 출처

1. [p5.js loadImage](https://p5js.org/reference/p5/loadImage/) — Promise 기반 이미지 로딩과 브라우저 제한을 설명합니다.
2. [p5.js 2.3.4 릴리스](https://github.com/processing/p5.js/releases/tag/v2.3.4) — 고정한 버전과 공식 CDN 스크립트를 명시합니다.
3. [p5.js createCanvas](https://p5js.org/reference/p5/createCanvas/) — Canvas 생성과 렌더러 선택을 설명합니다.
4. [p5.js 2.3.4 이미지 로딩 소스](https://github.com/processing/p5.js/blob/v2.3.4/src/image/loading_displaying.js) — 불러온 이미지를 p5.Image의 내부 Canvas에 그리는 모습을 보여 줍니다.
5. [MDN fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) — evenodd가 복합 경로의 채워지는 영역을 정하는 방식을 설명합니다.
6. [p5.js image](https://p5js.org/reference/p5/image/) — 이미지 배치와 대상 크기를 정의합니다.
7. [p5.js pixelDensity](https://p5js.org/reference/p5/pixelDensity/) — 스케치의 픽셀 밀도와 디스플레이에 따른 기본값을 설명합니다.
8. [p5.js saveCanvas](https://p5js.org/reference/p5/saveCanvas/) — 표준 Canvas 이미지 내보내기 형식을 나열합니다.

## Explore

- [Read the HTML article](https://perfectvector.com/ko/blog/p5js-svg-artwork)
- [SVG를 Canvas에 그리기: PNG 내보내기 전에 로드 확인하기](https://perfectvector.com/ko/blog/svg-canvas-image-export.md)
- [MapLibre SVG 아이콘: 픽셀과 심볼 크기 확인하기](https://perfectvector.com/ko/blog/maplibre-svg-symbol-image.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)