Scalable Vector Graphics (.svg)
W3C มาตรฐานScalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity, CSS styling, and animation.
แปลง SVG เป็น PNG
ตัวแปลงจาก SVG เป็น PNG ฟรีในเบราว์เซอร์ แปลงไฟล์ได้ทันทีบนอุปกรณ์ของคุณ
บีบอัด SVG ออนไลน์
บีบอัดแบบส่วนตัว 100% ในเบราว์เซอร์ – ไฟล์ไม่เคยออกจากอุปกรณ์ของคุณ
ตรวจสอบและดู Metadata
ระบบปฏิบัติการและเครื่องมือวิเคราะห์ไฟล์จะระบุไฟล์ SVG โดยการตรวจสอบลำดับไบต์ไบนารีส่วนต้น:
ลายเซ็นส่วนหัวในระดับไบต์ (Magic Bytes)
ระบบปฏิบัติการและเครื่องมือวิเคราะห์ไฟล์จะระบุไฟล์ SVG โดยการตรวจสอบลำดับไบต์ไบนารีส่วนต้น:
ลายเซ็น HEX (OFFSET 0):
3C 73 76 67การแสดงผลรูปแบบ ASCII: <svg
มาตรฐาน: W3C Recommendation (SVG 1.1 / SVG 2)
ข้อมูลจำเพาะทางเทคนิค
| สถาปัตยกรรมคอนเทนเนอร์ | XML-based text markup document defining 2D vector geometry |
| การบีบอัด | Gzip / Brotli text compression (SVGZ uses gzip compression) |
| การจัดลำดับไบต์ (Byte Endianness) | Not applicable (Text-based UTF-8 / UTF-16 character stream) |
| พื้นที่สี | sRGB, CSS Color Module 4 (Display P3, lab, lch) |
| ช่องสัญญาณและโครงสร้าง | Unlimited resolution vector shapes, bezier curves, typography, and opacity masks |
| ขนาดสูงสุด | Resolution-independent (scales infinitely to any viewport without pixelation) |
| ความโปร่งใส | Full variable alpha transparency and CSS blend modes |
| การสตรีมและแบบโปรเกรสซีฟ | Progressive text stream parsing supported by browser XML parser |
ตารางเปรียบเทียบทางเทคนิค: SVG กับคู่แข่ง
| คุณลักษณะทางเทคนิค | SVG (ปัจจุบัน) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| Rendering Model | Retained mode vector DOM | Immediate mode bitmap canvas | Retained mode fixed page container | Raster pixel grid |
| Styling & CSS | Fully styleable via CSS classes and variables | Requires JavaScript canvas API redraws | No dynamic CSS styling | Fixed raster pixels |
| Infinite Scalability | Yes (mathematical vector curves) | Requires manual resolution scaling | Yes (vector elements) | No (pixelates when enlarged) |
| Interactivity | Native DOM events (hover, click, animations) | Requires manual hit detection math | Static document | Requires image map or canvas |
รูปแบบความเสียหายทั่วไปและคู่มือการกู้คืน Hex
⚠️ Browser displays XML Parsing Error: unclosed token or mismatched tag.
สาเหตุหลัก: Malformed XML syntax, missing closing tags, or unescaped ampersands ('&' instead of '&').
การกู้คืน: Validate with an XML linter (xmllint file.svg) and correct unbalanced tags.
การวิเคราะห์ความปลอดภัยและเวกเตอร์การโจมตีตัวแยกวิเคราะห์
Because SVG is executable XML that supports '<script>' tags and external entities, it presents significant XSS and SSRF risks if untrusted SVGs are displayed.
เวกเตอร์การโจมตีที่ทราบ
- Stored Cross-Site Scripting (XSS) via embedded '<script>' tags or 'onload=' event handlers.
- XML External Entity (XXE) attacks reading local server files when parsed on backend servers.
- Billion Laughs XML entity expansion causing denial of service.
แนวทางปฏิบัติที่ดีที่สุดในการป้องกัน: Always sanitize SVGs using DOMPurify before embedding, or serve SVGs with 'Content-Security-Policy: default-src 'none'' or as '<img>' tags which automatically disable scripts.
ประวัติความเป็นมาและเหตุการณ์สำคัญ
ข้อได้เปรียบและจุดเด่นสำคัญ
- Infinite resolution independence: crisp lines and typography on any display or print scale.
- Extremely small file size for logos, icons, and UI interface elements.
- Fully scriptable and styleable via CSS and JavaScript inside the browser DOM.
ข้อจำกัดทางเทคนิคและข้อควรพิจารณา
- Unsuitable for photographs or complex continuous-tone imagery.
- Complex vector paths with thousands of nodes can cause CPU rendering lag and high battery drain.
- XML nature allows embedded scripting, requiring strict sanitization before rendering untrusted uploads.
เกร็ดความรู้ทางเทคนิคที่น่าสนใจ
- Because SVG is plain XML text, compressing it with Gzip (producing an .svgz file) often reduces size by 70%–80%.
- The viewBox attribute defines an abstract coordinate canvas that maps dynamically to physical screen pixels.
คำถามทางเทคนิคที่พบบ่อย
Can SVG files contain malicious code?
Yes. Because SVG is valid XML, it can contain embedded JavaScript ('<script>') that executes if the SVG is loaded directly in a browser or opened in an inline '<svg>' element. Serving SVGs via an '<img>' tag automatically neutralizes script execution.
When should I use SVG instead of PNG?
Use SVG for icons, logos, charts, illustrations, and typography where crisp scaling across all screen sizes and small file sizes are required. Use PNG or WebP for photographs.
คู่การแปลงไฟล์ SVG ที่เกี่ยวข้อง
Rasterize resolution-independent SVG vector graphics into high-resolution PNG bitmap assets.
Trace and vectorize high-contrast PNG bitmap images into scalable SVG paths.
Compile SVG vector graphics into scalable, printable PDF documents.
Extract vector graphics and paths from PDF pages into standalone SVG files.
Convert 2D CAD DXF drawings into web-viewable SVG vector diagrams.
Export SVG vector shapes into AutoCAD DXF format for CNC and CAD processing.