SVG (Scalable Vector Graphics)
SVG เป็นรูปแบบภาพเวกเตอร์แบบ XML ที่ปรับขนาดได้ทุกความละเอียดโดยไม่สูญเสียคุณภาพ เหมาะอย่างยิ่งสำหรับโลโก้ ไอคอน ภาพประกอบ และกราฟิกแบบโต้ตอบบนเว็บ ไฟล์ SVG สามารถจัดรูปแบบด้วย CSS เพิ่มภาพเคลื่อนไหวด้วย JavaScript และสามารถค้นหาและเข้าถึงได้อย่างเต็มรูปแบบ
ประเภท MIME
image/svg+xml
ประเภท
ข้อความ
การบีบอัด
ไม่สูญเสียคุณภาพ
ข้อดี
- + Infinite scalability without quality loss
- + Tiny file sizes for simple graphics
- + Styleable with CSS and scriptable with JS
- + Accessible and SEO-friendly (text is selectable)
ข้อเสีย
- − Not suitable for photographs or complex raster images
- − Complex SVGs can be large and slow to render
- − Security concerns when accepting user-uploaded SVGs
เมื่อใดควรใช้ .SVG
ใช้ SVG สำหรับโลโก้ ไอคอน ภาพประกอบ แผนภูมิ และกราฟิกใดก็ตามที่ต้องการปรับขนาดได้สมบูรณ์แบบในทุกความละเอียดหรือต้องจัดรูปแบบด้วย CSS
รายละเอียดทางเทคนิค
SVG จัดเก็บภาพเป็นข้อความ XML ที่อธิบายรูปทรงเรขาคณิต เส้นทาง และข้อความ รองรับฟิลเตอร์ การไล่สี การครอบตัด มาสก์ และภาพแรสเตอร์ที่ฝังอยู่ภายใน
ประวัติ
SVG ถูกพัฒนาโดย W3C และเผยแพร่เป็นข้อแนะนำครั้งแรกในปี 2001 SVG 1.1 กลายเป็นมาตรฐานที่ถูกนำไปใช้อย่างกว้างขวางในปี 2003 โดย SVG 2 กำลังอยู่ในระหว่างการพัฒนา
แปลงจาก .SVG
แปลงเป็น .SVG
รูปแบบที่เกี่ยวข้อง
คำศัพท์ที่เกี่ยวข้อง
Learn More
Color Theory for Digital Design: A Practical Guide
Understanding color theory helps you create visually harmonious designs that communicate effectively. This guide covers color models, harmony rules, accessibility …
CSS Units Explained: px, em, rem, vh, and When to Use Each
CSS offers over a dozen length units, each suited to different situations. Understanding the differences between absolute and relative units …
Image Format Guide: JPEG vs PNG vs WebP vs AVIF
Choosing the right image format affects file size, quality, and browser compatibility. This comparison covers the strengths of JPEG, PNG, …
QR Code Generation: Best Practices for Print and Digital
QR codes bridge physical and digital experiences, but poorly generated codes fail to scan. This guide covers sizing, error correction, …
Flexbox vs CSS Grid: A Practical Comparison
Flexbox and CSS Grid are complementary layout systems, not competitors. This guide clarifies when to reach for each one and …
How to Convert Images Between Formats
A practical guide to converting between image formats like JPEG, PNG, WebP, SVG, and HEIC. Learn which conversions are lossless, …