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

# ภาพ SVG ใน p5.js: โหลด ปรับขนาด และเก็บต้นฉบับ

> โหลด SVG ใน p5.js 2.3.4 ด้วย async setup ตรวจช่องโปร่งใสที่สามขนาด Canvas และเก็บเส้นที่แก้ไขได้แยกจากภาพที่แสดง

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

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

หากต้องการโหลดภาพ SVG ใน p5.js 2.3.4 ให้ใช้ `await loadImage('emblem.svg')` ภายใน `async function setup()` แล้ววาดภาพที่ได้ด้วย `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` ใช้ API อะซิงโครนัสปัจจุบันแทนการคัดลอกโค้ดเริ่มต้น `preload()` จากบทเรียน 1.x [createCanvas](https://p5js.org/reference/p5/createCanvas/) สร้าง Canvas ของสเก็ตช์และรองรับการเลือกตัวเรนเดอร์ชัดเจน

ในรุ่นนี้ [โค้ดโหลดภาพ](https://github.com/processing/p5.js/blob/v2.3.4/src/image/loading_displaying.js) วาดภาพที่เบราว์เซอร์โหลดลง Canvas ภายใน `p5.Image` จึงอธิบายได้ว่าทำไมการคงนามสกุล `.svg` และขยายภาพบน Canvas จึงไม่เพียงพอให้แก้เส้นภายในสเก็ตช์ได้

## บันทึก SVG ต้นฉบับที่มีช่องจริง

บันทึกไฟล์นี้เป็น `emblem.svg` มีหนึ่งเส้น ไม่มีบิตแมปฝังตัว ระบุขนาด 120 × 120 และ `viewBox` ที่ตรงกัน รูปข้าวหลามตัดมุมมนด้านนอกกับรูปด้านในเป็นสองเส้นขอบภายในเส้นเดียว `fill-rule="evenodd"` เว้นกลางไม่ระบายสี [เอกสาร fill-rule ของ MDN](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/th/blog/svg-contains-raster-image) ก่อนคิดว่างานทั้งหมดเป็นเส้นที่แก้ไขได้

## โหลดด้วย async setup

บันทึกหน้าครบชุดนี้เป็น `example.html` ข้าง `emblem.svg` แล้วให้บริการโฟลเดอร์ด้วยเซิร์ฟเวอร์ 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` ภาพแทนที่ที่ไม่ใช่จัตุรัสจึงรักษาสัดส่วนด้วย เก็บทั้งสองมิติไว้ในสูตรเมื่อเปลี่ยนความกว้างแสดง

ตัวอย่างตั้ง [pixelDensity(1)](https://p5js.org/reference/p5/pixelDensity/) เพื่อให้เงื่อนไขเทียบ Canvas ชัดเจน จดความหนาแน่นที่สเก็ตช์จริงใช้ ค่าเริ่มต้นอาจตามหน้าจอ การเพิ่มความหนาแน่น Canvas ไม่สร้างเส้นที่กลายเป็นภาพโหลดแล้วกลับมา

## ผลทดสอบเบราว์เซอร์

เรารันไฟล์ต้นฉบับและโค้ดเริ่มต้นนี้ใน Chrome ด้วย p5.js 2.3.4, `P2D` และความหนาแน่นพิกเซล `1` ภาพที่โหลดมีขนาด 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× มีผลต่อการแสดง ไม่ใช่แอตทริบิวต์ `d` ใน `emblem.svg` บันทึกต้นฉบับกับโปรเจกต์เพื่อเตรียมภาพส่งงานแบบอื่นภายหลัง

## แก้ตามอาการที่เห็น

### ภาพไม่ปรากฏเลย

ตรวจว่า URL ของ SVG เปิดได้จากหน้าที่ให้บริการ และ `loadImage()` เสร็จก่อน `image()` ทำงาน `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/th/blog/canvas-path2d-svg) ครอบคลุมการทำงานข้อมูลเส้น ส่วน[คู่มือ SVG ของ PixiJS](https://perfectvector.com/th/blog/pixijs-svg-import) เทียบเส้นทางรูปทรงและพื้นผิวของเอนจินนั้น API เหล่านั้นใช้สลับกับ `loadImage()` ของ p5 ไม่ได้

### กลางเป็นขาวแทนโปร่งใส

ตรวจ SVG ต้นฉบับว่ามีพื้นหลังระบายหรือรูปขาวด้านในหรือไม่ ต้นฉบับนี้ใช้เส้นขอบ `evenodd` เว้นช่อง และอัลฟาจุดกลางที่โหลดเป็นศูนย์ ทดสอบไฟล์ของคุณอีกครั้งบนพื้นหลังสเก็ตช์สีตัดกัน หน้าตัวอย่างขาวอาจซ่อนความต่าง

## แยกการส่งออก Canvas จากต้นฉบับ SVG

[เอกสาร saveCanvas มาตรฐาน](https://p5js.org/reference/p5/saveCanvas/) ระบุผลภาพ PNG, WebP และ JPG การบันทึก Canvas ที่ระบายแล้วผ่าน API นี้ไม่ได้กู้เส้น SVG เดิม เก็บ `emblem.svg` แยกหากต้องแก้เส้นขอบภายหลังหรือส่งไฟล์ที่เป็นเส้น ภาพหน้าจอ Canvas ที่ดูเรียบไม่ยืนยันขั้นตอนส่งออก SVG ที่แก้ไขได้

PerfectVector เหมาะกับขั้นก่อนหน้าเมื่อภาพมีเพียง PNG หรือ JPG แบนและต้องการเส้นต้นฉบับไว้แก้ [แปลงภาพเป็น SVG](https://perfectvector.com/th/image-to-vector) ตรวจเส้นขอบและพื้นที่ว่างในโปรแกรม SVG แล้วทำการตรวจโหลด p5 และขนาดจริงซ้ำ ใช้ SVG สะอาดเดิมโดยตรงได้ การลอกลายไม่เปลี่ยน API ภาพ p5 หรือเปลี่ยนผล Canvas เป็นเอกสารเส้น SVG [คู่มือแปลงเวกเตอร์ฉบับกว้าง](https://perfectvector.com/th/blog/what-is-image-vectorization) อธิบายขั้นเตรียมต้นฉบับนี้

เก็บต้นฉบับ จดรุ่น p5 และขนาดโหลด แล้วรับไฟล์เมื่อช่องและขอบทำงานได้ที่ขนาดที่สเก็ตช์ใช้เท่านั้น

## คำถามที่พบบ่อย

**p5.js โหลด SVG ด้วย loadImage ได้หรือไม่?**
ได้ ตัวอย่าง p5.js 2.3.4 P2D นี้โหลด SVG ต้นฉบับด้วย await loadImage ใน async setup ทดสอบรูปลักษณ์และขนาดที่โหลดของไฟล์คุณ แทนถือว่าการโหลดสำเร็จหนึ่งครั้งเท่ากับรองรับ SVG ทั้งหมด

**ภาพ SVG ที่โหลดใน p5 ยังแก้เป็นเส้นได้หรือไม่?**
ขั้นตอนโหลดภาพคืน p5.Image และระบายลง Canvas เก็บ SVG ต้นฉบับแยกสำหรับแก้เส้นต้นทาง การแสดงภาพ Canvas ไม่ให้ SVG DOM ที่แก้ไขได้ของภาพที่โหลด

**ทำไม SVG ใน p5 เบลอเมื่อขยาย?**
เทียบขนาดภาพที่โหลดกับขนาดปลายทาง ภาพที่โหลด 120 × 120 ของเราดูนุ่มขึ้นที่ 240 × 240 เตรียมต้นทางส่งงานที่ขนาดเหมาะ โหลดใหม่และตรวจผลจริง

**saveCanvas ส่งออก SVG ต้นฉบับหรือไม่?**
API saveCanvas มาตรฐานระบุผล 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) — แสดงการวาดภาพที่โหลดลง Canvas ภายใน p5.Image
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/th/blog/p5js-svg-artwork)
- [SVG เป็น Canvas: โหลดภาพก่อนส่งออก PNG](https://perfectvector.com/th/blog/svg-canvas-image-export.md)
- [ไอคอน SVG ใน MapLibre: ตรวจพิกเซลและขนาดสัญลักษณ์](https://perfectvector.com/th/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)