ตัวดูและแก้ไข SVG
ดูตัวอย่าง แก้ไข และเพิ่มประสิทธิภาพไฟล์ SVG ออนไลน์ ตัวอย่างแบบเรียลไทม์ การแก้ไขโค้ด และเครื่องมือเพิ่มประสิทธิภาพ
รูปแบบ SVG คืออะไร?
SVG (Scalable Vector Graphics) เป็นรูปแบบภาพเวกเตอร์ berbasis XML ที่อนุญาตให้ปรับขนาดได้ไม่จำกัดโดยไม่สูญเสียคุณภาพ ใช้กันอย่างแพร่หลายสำหรับโลโก้ ไอคอน และกราฟิกเว็บ
ความแตกต่างระหว่าง SVG และ PNG คืออะไร?
SVG เป็นรูปแบบเวกเตอร์ที่ใช้สูตรคณิตศาสตร์เพื่ออธิบายกราฟิกและสามารถขยายได้ไม่จำกัดโดยไม่สูญเสียคุณภาพ PNG เป็นรูปแบบแรสเตอร์ที่ประกอบด้วยพิกเซลซึ่งจะเบลอเมื่อขยาย SVG เหมาะสำหรับโลโก้ ไอคอน และไดอะแกรม ในขณะที่ PNG เหมาะสำหรับภาพถ่ายมากกว่า
ดูรูปแบบไฟล์อะไรได้บ้าง?
เครื่องมือนี้ดูไฟล์ SVG คุณสามารถวางโค้ด SVG โดยตรงหรืออัปโหลดไฟล์ .svg จากอุปกรณ์ของคุณ
แก้ไขโค้ด SVG โดยตรงได้หรือไม่?
ได้ คุณสามารถแก้ไขซอร์สโค้ด SVG ในแผงแก้ไขและดูการเปลี่ยนแปลงในแผงตัวอย่างแบบเรียลไทม์
ตัวอย่างแบบเรียลไทม์ทำงานอย่างไร?
แผงตัวอย่างจะอัปเดตโดยอัตโนมัติเมื่อคุณพิมพ์ในเครื่องมือแก้ไขโค้ด แสดงให้คุณเห็นอย่างชัดเจนว่า SVG ของคุณจะแสดงผลในเบราว์เซอร์อย่างไร
เพิ่มประสิทธิภาพ SVG ของฉันอย่างไร?
คลิกปุ่มเพิ่มประสิทธิภาพเพื่อลบช่องว่าง คอมเมนต์ เมทาดาท้า และแอตทริบิวต์ซ้ำซ้อน ลดขนาดไฟล์
ฉันสามารถเปลี่ยนสีและสไตล์ SVG ได้หรือไม่?
ได้ คุณสามารถแก้ไขสีเติม สีเส้น ความทึบ และแอตทริบิวต์สไตล์อื่นๆ โดยตรงในโค้ด SVG
SVG รองรับแอนิเมชันหรือไม่?
ได้ SVG รองรับแอนิเมชันผ่าน SMIL (Synchronized Multimedia Integration Language) และแอนิเมชัน CSS คุณสามารถสร้างเอฟเฟกต์เช่นการเคลื่อนไหว การเปลี่ยนสี และการแปลงรูปร่างโดยตรงใน SVG
รองรับเบราว์เซอร์ใดบ้าง?
เครื่องมือนี้ทำงานในเบราว์เซอร์สมัยใหม่ทั้งหมดรวมถึง Chrome, Firefox, Safari และ Edge
ฉันจะตรวจสอบไวยากรณ์ SVG ได้อย่างไร?
เครื่องมือจะเน้นข้อผิดพลาดไวยากรณ์ในโค้ด SVG ของคุณโดยอัตโนมัติ ช่วยให้คุณระบุและแก้ไขปัญหาได้ทันที
ฉันสามารถปรับขนาด SVG โดยไม่สูญเสียคุณภาพได้หรือไม่?
ได้ SVG เป็นรูปแบบเวกเตอร์ที่สามารถปรับขนาดเป็นขนาดใดก็ได้โดยไม่สูญเสียคุณภาพหรือเป็นพิกเซล
ข้อมูล SVG ของฉันถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?
ไม่ การประมวลผลทั้งหมดเกิดขึ้นในเครื่องในเบราว์เซอร์ของคุณ เนื้อหา SVG ของคุณไม่เคยออกจากอุปกรณ์
วิธีใช้ ตัวดูและแก้ไข SVG
SVG Viewer & Editor แสดงผล SVG ทันทีที่คุณวางโค้ดหรือวางไฟล์ และแก้ไขมาร์กอัปไปพร้อมพรีวิวแบบเรียลไทม์ ทุกอย่างทำงานในเบราว์เซอร์ของคุณ
- วางโค้ด SVG ลงในตัวแก้ไขที่มีคำใบ้ว่า “Paste SVG code here or drag & drop a file...” หรือลากไฟล์ .svg มาวางบนหน้าเว็บ
- กราฟิกจะแสดงผลทันทีในพรีวิวเรียลไทม์ถัดจากโค้ด
- แก้ไขแอตทริบิวต์อย่าง viewBox, width, height, fill หรือข้อมูล path ได้โดยตรงในโค้ด พรีวิวจะอัปเดตตามที่พิมพ์
- แก้ปัญหาที่พบบ่อยได้ทันที เช่น ขาดแอตทริบิวต์ xmlns หรือ viewBox ตัดรูปบางส่วนออก
- เมื่อพรีวิวเรียบร้อยแล้ว ให้คัดลอกโค้ดสุดท้ายออกไปใช้
ถ้าพรีวิวยังว่างเปล่า ให้ตรวจว่าโค้ดเริ่มด้วย <svg และมีเนมสเปซ xmlns ครบ — การขาด xmlns เป็นสาเหตุที่พบบ่อยที่สุด
เครื่องมือที่เกี่ยวข้อง
- ตัวเพิ่มประสิทธิภาพ SVG เพิ่มประสิทธิภาพและบีบอัดไฟล์ SVG ทันทีในเบราว์เซอร์ ลบเมทาดาท้า ความคิดเห็น และข้อมูลที่ไม่จำเป็น ลดขนาดไฟล์ได้สูงสุด 60%
- ตัวแปลง SVG เป็น PNG แปลง SVG เป็น PNG, JPEG หรือ WebP ทันทีในเบราว์เซอร์ ปรับสเกล ขนาด และสีพื้นหลังได้ ฟรี เป็นส่วนตัว ไม่ต้องอัปโหลด
- เครื่องคำนวณ Chmod เครื่องคำนวณ chmod ออนไลน์ฟรีเพื่อแสดงและคำนวณสิทธิ์ไฟล์ Linux ด้วยช่องทำเครื่องหมาย แปลงระหว่างสัญกรณ์ตัวเลข (755, 644) และสัญลักษณ์ (rwxr-xr-x) ทันที รองรับสิทธิ์พิเศษเช่น setuid, setgid, sticky bit
- ตาราง ASCII ข้อมูลอ้างอิงการเข้ารหัสอักขระ ASCII ครบถ้วนพร้อมรหัสทศนิยม เลขฐานสิบหก ฐานแปด ฐานสอง เอนทิตี HTML และคำอธิบายอักขระ ค้นหาและกรองได้ทันที
- เครื่องมือทดสอบคำขอ HTTP ทดสอบ REST API โดยตรงในเบราว์เซอร์ของคุณ ส่งคำขอ GET, POST, PUT, DELETE ด้วย header, body และพารามิเตอร์ที่กำหนดเอง ดูสถานะ header และ body JSON ของการตอบกลับทันที
- ตัวสร้าง .htaccess สร้างกฎ Apache .htaccess สำหรับการเปลี่ยนเส้นทาง เขียนใหม่ ส่วนหัวความปลอดภัย แคช และอื่นๆ
- ตัวสร้าง Robots.txt ตัวสร้าง robots.txt ออนไลน์ฟรี สร้างและปรับแต่งไฟล์ robots.txt เพื่อควบคุมการรวบรวมข้อมูลของเครื่องมือค้นหา จัดการการเข้าถึงของระบบรวบรวมข้อมูล และปรับปรุง SEO ของเว็บไซต์ของคุณ
- ตัวสร้าง Sitemap ตัวสร้าง XML sitemap ออนไลน์ฟรี เพิ่ม URL ตั้งค่าลำดับความสำคัญและความถี่ สร้าง sitemap ที่ดีต่อ SEO ได้ทันที