ตัวดู SVG
วางมาร์กอัป SVG ดิบแล้วดูผลลัพธ์ที่เรนเดอร์ได้ทันที
พรีวิวจะปิดสคริปต์และการอ้างอิงภายนอก แต่ยังให้คุณตรวจ viewBox และรายละเอียดขนาดได้
พรีวิว SVG: วางโค้ดดิบแล้วตรวจผลทันที
ตรวจ viewBox และขนาด: ตรวจความโปร่งใสและเนื้อหาที่อาจไม่ปลอดภัย
วิธีใช้งาน
- วางโค้ด SVG หรือโหลดไฟล์ `.svg`
- สลับพื้นหลังและระดับซูมเพื่อตรวจการแสดงผล
- ตรวจ viewBox รายละเอียดขนาด และคำเตือน แล้วบันทึก SVG หากต้องการ
ตัวอย่าง
SVG ไอคอนแบบง่าย
ข้อมูลนำเข้า
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><circle cx="60" cy="60" r="52" fill="#0ea5e9"/><path d="M36 62l16 16 32-40" fill="none" stroke="#fff" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/></svg>
ผลลัพธ์
ไอคอนวงกลมสีน้ำเงินจะแสดงผล และ viewBox จะแสดงเป็น `0 0 120 120` ในแผงข้อมูล
คำถามที่พบบ่อย
SVG ของฉันถูกอัปโหลดไปที่ใดไหม?
ไม่ ทั้ง SVG ที่วางและไฟล์ที่โหลดจะอยู่ในเบราว์เซอร์ของคุณและไม่ส่งไปยังเซิร์ฟเวอร์
SVG ที่มี script หรือ foreignObject จะเกิดอะไรขึ้น?
พรีวิวปลอดภัยจะลบองค์ประกอบเหล่านั้นก่อนแสดงผลและแสดงคำเตือนในแผงข้อมูล
SVG ที่อ้างอิงรูปภาพหรือฟอนต์ภายนอกจะแสดงเหมือนเดิมไหม?
ไม่เสมอไป การอ้างอิงภายนอกถูกปิดใช้งาน ดังนั้นรูปลักษณ์อาจต่างจากสภาพแวดล้อมเดิม เครื่องมือนี้เน้นการตรวจในเครื่องอย่างปลอดภัย
ทำไม SVG ของฉันไม่แสดง?
สาเหตุที่พบบ่อยคือ XML ไม่ถูกต้อง แอตทริบิวต์ผิด หรือ root element ไม่ใช่ `svg` ตรวจข้อความผิดพลาดที่เครื่องมือแสดง
ทำไมถึงสลับพื้นหลัง?
พื้นที่โปร่งใสและไอคอนสีอ่อนอาจดูต่างกันมากตามพื้นหลัง เครื่องมือนี้จึงให้ทดสอบพื้นหลังลายตาราง สีขาว และสีเข้มได้อย่างรวดเร็ว
หมายเหตุ
- เพื่อความปลอดภัย การอ้างอิง URL ภายนอกและองค์ประกอบอันตรายจะถูกปิดก่อนแสดงผล
- SVG ที่พึ่งพาฟอนต์หรือรูปภาพภายนอกอาจไม่เหมือนในสภาพแวดล้อมต้นฉบับ
- ไฟล์ SVG ขนาดใหญ่มากจะสลับออกจากโหมดพรีวิวสดโดยอัตโนมัติและให้คุณเรนเดอร์ด้วยตนเอง