โปรแกรมดู SVG

อินพุต SVG
0 อักขระ
ดูตัวอย่างในเครื่อง อย่าวางเนื้อหาสคริปต์จากแหล่งที่ไม่น่าเชื่อถือ

โปรแกรมดู SVG ออนไลน์ วางโค้ด SVG เพื่อเรนเดอร์และดูตัวอย่างภาพเวกเตอร์ทันทีแบบเรียลไทม์ รองรับการคัดลอกและดาวน์โหลดไฟล์ .svg ประมวลผลโลคัล — ใช้งานได้อย่างปลอดภัย

คำแนะนำที่เกี่ยวข้อง

แปลงรูปภาพ

บีบอัดรูปภาพ

ปรับขนาดรูปภาพ

ครอปตัดรูปภาพ

แก้ไขรูปภาพ

สร้าง ICO

SVG คืออะไร?

SVG (Scalable Vector Graphics, กราฟิกเวกเตอร์ที่ปรับขนาดได้) คือรูปแบบภาพที่อธิบายรูปร่างเรขาคณิตโดยใช้ XML ต่างจาก JPG และ PNG ที่เป็นบิตแมป (เมทริกซ์พิกเซล) SVG ใช้แท็กเช่น <rect>, <circle>, <path> เพื่ออธิบายเส้นทางทางคณิตศาสตร์ของรูปร่าง ดังนั้นภาพจะไม่เบลอเมื่อปรับขนาดเป็นขนาดใดๆ

**SVG เหมาะกับสถานการณ์ใดบ้าง?** โลโก้ ไอคอน UI ผังงานบล็อก มาร์กเกอร์แผนที่ แผนภูมิ ตกแต่งแอนิเมชัน ภาพประกอบที่ใช้ซ้ำได้ — สถานการณ์เหล่านี้มีความต้องการสูงในด้านความคมชัด ความสามารถในการเปลี่ยนสี ความสามารถในการปรับขนาด และการควบคุมผ่าน CSS ดังนั้น SVG จึงเป็นตัวเลือกตามธรรมชาติ

**ความแตกต่างจาก Canvas:** Canvas เป็น API วาดภาพแบบคำสั่ง หลังวาดแล้วทุกอย่างจะกลายเป็นพิกเซล; SVG เป็นโหนด DOM แบบประกาศ สามารถเปลี่ยนแอตทริบิวต์ สไตล์ CSS ได้ทุกเมื่อและผูกเหตุการณ์ได้ ดังนั้นสำหรับไอคอน UI และสถานการณ์เชิงโต้ตอบ ให้ใช้ SVG สำหรับเกม อนุภาค และศิลปะพิกเซล ให้ใช้ Canvas

**โครงสร้างทั่วไป:** &lt;svg&gt; โหนดราก, &lt;g&gt; จัดกลุ่ม, &lt;path&gt; เส้นทาง (ใช้บ่อยที่สุด มีแอตทริบิวต์ d), เกรเดียนต์ (&lt;linearGradient&gt;/&lt;radialGradient&gt;), ฟิลเตอร์ (&lt;filter&gt;), แอนิเมชัน (SMIL/CSS/JS)

**วิธีดูตัวอย่าง:** ด้วยเครื่องมือนี้ วางโค้ด SVG ลงในเอดิเตอร์ — ทางด้านขวาจะเรนเดอร์แบบเรียลไทม์ ด้วยตัวแบ่งที่ลากได้ คุณสามารถตรวจสอบความถูกต้องของโค้ด SVG และความสอดคล้องของเอฟเฟกต์การแสดงผลกับที่คาดหวังได้ในไม่กี่วินาที

กรณีการใช้งาน

  • เมื่อนักพัฒนาฟรอนต์เอนด์ต้องดูตัวอย่างผลการเรนเดอร์โค้ดไอคอน SVG อย่างรวดเร็ว
  • ตรวจสอบเอฟเฟกต์การแสดงผลของ SVG หลังคัดลอกจาก Figma, Sketch และเครื่องมือออกแบบอื่นๆ
  • ดูการเปลี่ยนแปลงแบบเรียลไทม์ในขณะที่ดีบักเส้นทาง สี หรือแอตทริบิวต์ viewBox ของ SVG
  • ตรวจสอบและยืนยันโค้ด SVG ก่อนรวมเข้ากับโค้ดโปรเจกต์

วิธีการใช้งาน

  1. วางโค้ด SVG ลงในเอดิเตอร์ด้านซ้ายหรือคลิก «โหลดตัวอย่าง» เพื่อดูการสาธิต
  2. ผลการเรนเดอร์ภาพเวกเตอร์จะแสดงทันทีทางด้านขวา เมื่อแก้ไขโค้ด ดูตัวอย่างจะอัปเดตแบบเรียลไทม์
  3. หลังตรวจสอบ คลิกปุ่มคัดลอกเพื่อคัดลอกโค้ดหรือดาวน์โหลดเป็นไฟล์ .svg ด้วยชื่อที่กำหนดเอง

คุณสมบัติ

  • ดูตัวอย่างเรียลไทม์: วางหรือแก้ไขโค้ด SVG — ภาพเวกเตอร์ถูกเรนเดอร์ทันที WYSIWYG
  • เลย์เอาต์แบ่งครึ่ง: บนเดสก์ท็อปลากเพื่อปรับความกว้างแผง บนมือถือสลับระหว่างการป้อนและดูตัวอย่างผ่านแท็บ
  • ส่งออกคลิกเดียว: คัดลอกโค้ด SVG ไปยังคลิปบอร์ดหรือดาวน์โหลดเป็นไฟล์ .svg มาตรฐานด้วยชื่อที่กำหนดเอง
  • ประมวลผลโลคัล: การแยกวิเคราะห์และเรนเดอร์ SVG ทั้งหมดทำในเบราว์เซอร์ โค้ดไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์ — ปลอดภัยกว่า
  • พื้นหลังโปร่งใส: พื้นหลังตารางหมากรุกช่วยให้เห็นพื้นที่โปร่งใสและรายละเอียดขอบของ SVG อย่างชัดเจน
  • ตัวนับอักขระ: แสดงจำนวนอักขระในโค้ดแบบเรียลไทม์ ตัวอย่างในตัวเพื่อเริ่มต้นอย่างรวดเร็ว

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

จะดูตัวอย่างผลของโค้ด SVG ออนไลน์ได้อย่างไร?

วางโค้ด SVG ลงในเอดิเตอร์ด้านซ้าย ภาพเวกเตอร์จะถูกเรนเดอร์ทันทีทางด้านขวา คุณสามารถแก้ไขโค้ดโดยตรงในเอดิเตอร์ได้ พื้นที่ดูตัวอย่างจะอัปเดตแบบเรียลไทม์ — สะดวกสำหรับดีบักไอคอนและตรวจสอบเอฟเฟกต์

จะดาวน์โหลดและบันทึก SVG ที่ดูตัวอย่างแล้วได้อย่างไร?

คลิกปุ่มดาวน์โหลดที่มุมขวาบนของพื้นที่ดูตัวอย่าง ระบุชื่อไฟล์และบันทึกเป็นไฟล์ .svg มาตรฐาน คุณยังสามารถคลิกปุ่มคัดลอกเพื่อคัดลอกโค้ด SVG ไปยังคลิปบอร์ดและวางลงในโค้ดโปรเจกต์โดยตรง

โค้ด SVG ถูกอัปโหลดไปยังเซิร์ฟเวอร์หรือไม่? ปลอดภัยไหม?

ไม่ การแยกวิเคราะห์และเรนเดอร์ SVG ทั้งหมดทำในเบราว์เซอร์แบบโลคัล โค้ด SVG ไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์ใดๆ หลังประมวลผล ข้อมูลจะถูกลบออกจากหน่วยความจำทันที ขจัดความเสี่ยงในการรั่วไหลของวัสดุไอคอนและร่างออกแบบที่ยังไม่เผยแพร่

รองรับโค้ด SVG ที่คัดลอกจากซอฟต์แวร์ออกแบบหรือไม่?

ใช่ โค้ด SVG ที่คัดลอกจาก Figma, Sketch, Adobe Illustrator และซอฟต์แวร์ออกแบบอื่นๆ สามารถวางเพื่อดูตัวอย่างได้โดยตรง แนะนำให้ตรวจสอบผลการเรนเดอร์ก่อน จากนั้นจึงรวมเข้ากับโปรเจกต์หากไม่มีปัญหา

ทำไมดูตัวอย่าง SVG ไม่แสดง? สาเหตุที่พบบ่อย?

สาเหตุที่พบบ่อย: ① ขาดการประกาศเนมสเปซ xmlns="http://www.w3.org/2000/svg"; ② แท็กที่ไม่ได้ปิดในโค้ด; ③ อักขระพิเศษไม่ได้รับการเอสเคปอย่างถูกต้อง; ④ ข้อผิดพลาดทางไวยากรณ์ใน SVG เอง กรุณาตรวจสอบประเด็นเหล่านี้

สามารถปรับแต่งชื่อไฟล์ SVG ที่ดาวน์โหลดได้หรือไม่?

ได้ หลังคลิกปุ่มดาวน์โหลด กล่องป้อนชื่อไฟล์จะปรากฏขึ้น ป้อนชื่อที่ต้องการ (ค่าเริ่มต้น image.svg) กด Enter หรือยืนยัน — ไฟล์จะถูกดาวน์โหลด จะเพิ่มนามสกุล .svg โดยอัตโนมัติ

อภิธานศัพท์

viewBox
ระบบพิกัดภายใน SVG ระบุในรูปแบบ «x y width height» ที่ใช้กันทั่วไป «0 0 24 24» หมายถึงความกว้างและความสูงเป็น 24 หน่วย ขนาดการแสดงผลจริงของ SVG ถูกควบคุมโดยแอตทริบิวต์ width/height หรือ CSS ภายนอก
เนมสเปซ XML (namespace)
เพื่อให้เบราว์เซอร์จดจำ SVG เป็นเอกสาร SVG อย่างถูกต้อง จำเป็นต้องประกาศ xmlns="http://www.w3.org/2000/svg" การขาดเนมสเปซเป็นสาเหตุที่พบบ่อยที่สุดที่ SVG ไม่แสดงใน HTMLMDN - เนมสเปซ SVG
แอตทริบิวต์ d ของเส้นทาง path
ชุดคำสั่งเส้นทางที่ประกอบด้วยตัวอักษรเช่น M/L/C/Q/H/V/Z และพิกัด M=เคลื่อนที่, L=วาดเส้น, C=เส้นโค้งเบซิเยร์ลูกบาศก์, Q=เส้นโค้งเบซิเยร์กำลังสอง, Z=ปิดเส้นทาง ไอคอนที่ซับซ้อนมักแสดงด้วยองค์ประกอบ path เดียวและแอตทริบิวต์ d เท่านั้น
currentColor
คีย์เวิร์ด CSS ที่อ้างอิงถึงคุณสมบัติ color ขององค์ประกอบปัจจุบัน หากใน SVG คุณตั้งค่า fill หรือ stroke เป็น currentColor การเปลี่ยนแปลง color ใน CSS ภายนอกจะเปลี่ยนสีไอคอน — นี่เป็นวิธีปฏิบัติทั่วไปในระบบออกแบบ

อ้างอิงด่วนองค์ประกอบ SVG ที่ใช้บ่อย

องค์ประกอบประเภทวัตถุประสงค์
<svg>โหนดรากคอนเทนเนอร์สำหรับ SVG ทั้งหมด จำเป็น
<rect>รูปร่างพื้นฐานสี่เหลี่ยมผืนผ้า สี่เหลี่ยมมุมมน
<circle> / <ellipse>รูปร่างพื้นฐานวงกลม / วงรี
<line> / <polyline>รูปร่างพื้นฐานเส้นตรง / เส้นหัก
<polygon> / <path>เส้นทางรูปหลายเหลี่ยม / เส้นโค้งตามใจ (แอตทริบิวต์ d)
<text> / <tspan>ข้อความข้อความฝังใน SVG
<g>การจัดกลุ่มจัดกลุ่มโหนดเพื่อใช้การแปลงร่วมกัน
<defs> / <symbol>คำจำกัดความรูปร่างและเกรเดียนต์ที่ใช้ซ้ำได้
<linearGradient> / <radialGradient>เกรเดียนต์เติมเกรเดียนต์เชิงเส้น / รัศมี
<use>ใช้ซ้ำอ้างอิงองค์ประกอบใน defs
<filter>ฟิลเตอร์เบลอ เงา และเอฟเฟกต์ขั้นสูงอื่นๆ

เปรียบเทียบ SVG และรูปแบบบิตแมป

พารามิเตอร์SVG (เวกเตอร์)PNG (บิตแมป)JPG (บิตแมป)
วิธีการแสดงXML อธิบายเส้นทางเรขาคณิตเมทริกซ์พิกเซลเมทริกซ์พิกเซล (บีบอัด DCT)
ผลเมื่อขยายไม่เบลอทุกขนาดเบลอเมื่อขยายเบลอ ร่องรอยการบีบอัดชัดเจน
ขนาดไฟล์ขึ้นอยู่กับความซับซ้อนของเส้นทาง โลโก้มัก < 10KBปานกลาง (ไม่สูญเสีย)เล็ก (สูญเสีย)
พื้นหลังโปร่งใส✅✅❌
รองรับแอนิเมชัน✅ SMIL / CSS / JS❌ (ต้องใช้ APNG)❌
เปลี่ยนสีด้วย CSS✅ currentColor / ตัวแปร fill❌❌
การใช้งานที่เหมาะสมไอคอน โลโก้ เวกเตอร์ UIวัสดุพื้นหลังโปร่งใส ภาพหน้าจอรูปภาพ เกรเดียนต์ขนาดใหญ่

Authoritative References