ตัวดูโค้ด SVG - ตรวจสอบและคัดลอกมาร์กอัป SVG ที่สะอาด
อัปโหลดไฟล์ SVG ใดก็ได้เพื่อแสดงภาพเวกเตอร์ วิเคราะห์โครงสร้าง และคัดลอกโค้ดที่จัดรูปแบบได้ทันที
อัปโหลดไฟล์ SVG ของคุณ
วางไฟล์ SVG ของคุณที่นี่
รองรับเฉพาะไฟล์ SVG ขนาดสูงสุด 5MB ไฟล์ของคุณจะไม่ออกจากเบราว์เซอร์นี้
หรือลากและวางลงในกล่องนี้
มาร์กอัป SVG ที่จัดรูปแบบ
ตัวอย่างการใช้งาน
ไอคอน SVG อย่างง่าย
รูปดาวห้าแฉกที่สร้างจากองค์ประกอบ polygon เดียว
<svg viewBox="0 0 100 100" xml...
โลโก้ SVG พร้อมไล่สี
โลโก้วงกลมที่ใช้ไล่สีเชิงเส้นเพื่อรูปลักษณ์ที่ทันสมัย
<svg viewBox="0 0 100 100" xml...
แอนิเมชัน SVG
องค์ประกอบสี่เหลี่ยมหมุนโดยใช้ SVG animateTransform
<svg viewBox="0 0 100 100" xml...
ทำไมต้องใช้ตัวดูโค้ด SVG?
แสดงตัวอย่างทันที
แสดงผลงานศิลปะ SVG ทันทีเพื่อตรวจสอบสี เส้น และรูปร่าง
มาร์กอัปที่อ่านได้
จัดรูปแบบ XML โดยอัตโนมัติด้วยการเยื้องที่สะอาดเพื่อให้ตรวจสอบได้ง่ายขึ้น
ตรวจสอบอย่างรวดเร็ว
นับเส้นทาง กลุ่ม และตรวจจับ viewBox / ขนาดได้อย่างรวดเร็ว
ปลอดภัยและเป็นท้องถิ่น
การประมวลผล SVG เกิดขึ้นในเบราว์เซอร์ของคุณ ไม่มีอะไรถูกอัปโหลดหรือจัดเก็บ
วิธีดูโค้ด SVG?
อัปโหลด SVG
เลือกไฟล์ SVG หรือลากมันเข้าไปในกล่องอัปโหลด
ตรวจสอบตัวอย่างและสถิติ
ตรวจสอบตัวอย่างสดและตัวนับโครงสร้าง (เส้นทาง กลุ่ม viewBox)
คัดลอกหรือดาวน์โหลด
คัดลอกโค้ดที่จัดรูปแบบหรือดาวน์โหลด SVG ที่ทำความสะอาดแล้วได้ทันที
คำถามที่พบบ่อย
ตัวดูโค้ด SVG คืออะไร?
ตัวดูโค้ด SVG ช่วยให้คุณเปิดไฟล์เวกเตอร์ ดูตัวอย่างแบบสด และคัดลอกมาร์กอัปที่จัดรูปแบบแล้วโดยไม่ต้องติดตั้ง Illustrator หรือ Figma เหมาะสำหรับนักพัฒนาและนักออกแบบที่ต้องการตรวจสอบไอคอนที่ส่งออกอย่างรวดเร็ว
คุณสมบัติหลัก
อัปโหลด SVG ใดก็ได้ คุณจะได้ตัวอย่างที่เรนเดอร์แล้วพร้อม XML ที่จัดเยื้องอย่างสวยงามทันที เครื่องมือนับเส้นทาง กลุ่ม และตรวจจับ viewBox เพื่อให้คุณตรวจสอบโครงสร้างได้ในพริบตา
กรณีใช้งานทั่วไป
นักพัฒนา front-end ใช้ตรวจสอบ SVG export ก่อนเพิ่มลงในโค้ด นักออกแบบแชร์สนิปเพ็ตที่จัดรูปแบบใน pull request แทนภาพหน้าจอ ผู้ดูแลไลบรารีไอคอนตรวจหากลุ่มที่ไม่จำเป็นจากเครื่องมือออกแบบ
เคล็ดลับ
ถ้า SVG ดูบวม ให้มองหากลุ่มว่างหรือ transform ที่ซ้ำซ้อนในโค้ดที่จัดรูปแบบ ทำความสะอาดแล้วดาวน์โหลดใหม่ สำหรับ production ให้รันผ่าน minifier หลังตรวจสอบ
ความเป็นส่วนตัว
ไฟล์ไม่เคยออกจากเบราว์เซอร์ของคุณ การแยกวิเคราะห์และจัดรูปแบบทั้งหมดทำฝั่งไคลเอนต์ คุณจึงตรวจสอบไฟล์ที่เป็นความลับได้อย่างปลอดภัย
ตัวดูโค้ด SVG ออนไลน์ - ตรวจสอบและแสดงตัวอย่าง SVG
เรียนรู้ว่าโค้ด SVG คืออะไร วิธีอ่าน SVG markup และวิธีใช้ตัวดู SVG ฟรี