เครื่องมือสร้าง CSS พื้นหลัง SVG
แปลงไฟล์ SVG เป็น Data URI สำหรับ background-image CSS ได้ทันที
เพิ่มประสิทธิภาพโดยการลบแท็กที่ไม่จำเป็น ช่วยลดคำขอ HTTP
ป้อนโค้ด SVG
วางไฟล์ SVG ที่นี่
เกี่ยวกับเครื่องมือสร้าง CSS พื้นหลัง SVG
"เครื่องมือสร้าง CSS พื้นหลัง SVG" เป็นเครื่องมือสำหรับนักพัฒนาฟรี ที่ช่วยแปลงโค้ดของไฟล์ภาพเวกเตอร์ SVG เป็นรูปแบบ (Data URI) ที่สามารถโหลดได้โดยตรงด้วยคุณสมบัติ background-image ของ CSS
แตกต่างจากวิธีการปกติที่อัปโหลดไฟล์รูปภาพไปยังเซิร์ฟเวอร์และอ้างอิงด้วย URL การฝังข้อมูลรูปภาพลงในไฟล์ CSS โดยตรงจะช่วยลดคำขอ HTTP เพิ่มเติม ซึ่งช่วยให้เวลาในการโหลดหน้าเว็บเร็วขึ้น (PageSpeed)
เครื่องมือนี้จะลบความคิดเห็นและแท็ก meta ที่ไม่จำเป็นโดยอัตโนมัติ (เพิ่มประสิทธิภาพ) ในระหว่างกระบวนการแปลง ช่วยลดขนาดไฟล์ที่ใหญ่ขึ้นจากการฝังโค้ดให้เหลือน้อยที่สุด กระบวนการทั้งหมดดำเนินการอย่างปลอดภัยในเบราว์เซอร์ของคุณ
วิธีใช้งานเครื่องมือสร้าง CSS พื้นหลัง SVG
ป้อนโค้ด SVG
วางโค้ด SVG ของคุณ (<svg>...</svg>) ลงในช่องป้อนข้อมูลโดยตรง หรือลากและวางไฟล์ SVG จากคอมพิวเตอร์ของคุณ
ตรวจสอบและปรับแต่งหน้าตัวอย่าง
หน้าตัวอย่างจะถูกสร้างขึ้นอัตโนมัติ โปรดปรับแต่งสีพื้นหลัง ขนาด และการทำซ้ำตามที่คุณต้องการ
คัดลอกโค้ด CSS
คัดลอกโค้ด CSS ที่ได้ซึ่งมี background-image: url("data:image/..."); จากพื้นที่แสดงผลเพื่อใช้ในโปรเจ็กต์ของคุณ
คำศัพท์เกี่ยวกับเครื่องมือสร้าง CSS พื้นหลัง SVG
- Data URI (Data URI Scheme)
- เป็นวิธีการแปลงข้อมูลไฟล์ (เช่น รูปภาพ) ให้เป็นสตริงและเขียนโดยตรงแทนการใช้ URL ซึ่งมีรูปแบบเป็น
data:image/svg+xml,... - การเข้ารหัส URL (URL Encoding)
- รูปแบบที่แปลงอักขระพิเศษใน SVG (<, >, # ฯลฯ) ให้อยู่ในรูปแบบเช่น
%3Cเนื่องจาก SVG เป็นรูปแบบข้อความ วิธีนี้จึงมีแนวโน้มที่จะเพิ่มขนาดไฟล์น้อยกว่าเมื่อเทียบกับ Base64 - Base64
- รูปแบบที่แปลงข้อมูลไบนารีเป็นสตริง (A-Z, a-z, 0-9 ฯลฯ) ตามกฎเฉพาะ ขนาดหลังจากการแปลงจะอยู่ที่ประมาณ 1.33 เท่า (ใหญ่ขึ้น 33%) ของขนาดดั้งเดิม
- การเพิ่มประสิทธิภาพ SVG (SVGO ฯลฯ)
- SVG ที่ส่งออกจาก Illustrator หรือ Figma มักมีแท็กที่ไม่จำเป็น การขึ้นบรรทัดใหม่ และความคิดเห็นเฉพาะสำหรับโปรแกรมแก้ไข นี่คือกระบวนการลบออกเพื่อลดขนาดไฟล์
คำถามที่พบบ่อย (FAQ) เกี่ยวกับเครื่องมือสร้าง CSS พื้นหลัง SVG
- Q.ข้อมูลของฉันถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?
- ไม่ การเพิ่มประสิทธิภาพ การเข้ารหัส และการแปลง SVG ทั้งหมดดำเนินการในเบราว์เซอร์ของคุณ จะไม่มีการส่งไฟล์หรือข้อมูลใดๆ ไปยังเซิร์ฟเวอร์ภายนอก
- Q.ฉันควรเลือกการเข้ารหัส URL หรือ Base64?
- โดยทั่วไป แนะนำให้ใช้ "การเข้ารหัส URL" เนื่องจาก SVG เป็นข้อความ ในสภาพแวดล้อมที่เซิร์ฟเวอร์ใช้การบีบอัด Gzip/Brotli การเข้ารหัส URL จะส่งผลให้ขนาดการส่งข้อมูลสุดท้ายเล็กกว่า Base64 (ซึ่งเพิ่มขนาดไฟล์ขึ้นประมาณ 33%)
- Q.การเพิ่มประสิทธิภาพจะทำให้รูปลักษณ์ของ SVG เปลี่ยนไปหรือไม่?
- ไม่ เฉพาะข้อมูลที่ไม่จำเป็นซึ่งไม่ส่งผลต่อรูปลักษณ์ภายนอก (ความคิดเห็น แท็ก meta เฉพาะของโปรแกรมแก้ไข แท็ก
<title>ฯลฯ) เท่านั้นที่จะถูกลบออกอย่างปลอดภัยโดยใช้นิพจน์ทั่วไป ดังนั้นผลลัพธ์การแสดงผลจะยังคงเหมือนเดิมทุกประการ - Q.จะเกิดอะไรขึ้นหาก SVG มีรูปภาพภายนอก?
- SVG ที่มีการอ้างอิงภายในไปยังรูปภาพภายนอก (เช่น PNG/JPG ผ่านลิงก์ URL) อาจแสดงผลไม่ถูกต้องแม้ว่าจะแปลงเป็น Data URI แล้ว เครื่องมือนี้ทำงานได้ดีที่สุดสำหรับข้อมูลเวกเตอร์ที่สร้างจากเส้นทาง (path) หรือรูปหลายเหลี่ยม (polygon) เท่านั้น
การใช้งานรูปภาพพื้นหลัง CSS SVG
สร้างลวดลายพื้นหลัง (Pattern)
เหมาะสำหรับการทำซ้ำลวดลาย SVG ที่ไร้รอยต่อ เช่น จุด ลายทาง หรือรูปทรงเรขาคณิต ซึ่งจะแสดงผลได้อย่างคมชัดโดยไม่ขึ้นอยู่กับความละเอียด
ปรับปรุงประสิทธิภาพ
เมื่อใช้ไอคอนหรือโลโก้ขนาดเล็กเป็นรูปภาพพื้นหลัง การฝังลงใน CSS จะช่วยลดจำนวนคำขอ HTTP ที่จำเป็นในการโหลดไฟล์รูปภาพแยกต่างหาก ช่วยให้โหลดหน้าเว็บได้เร็วขึ้น
ไอคอนแบบตอบสนอง (Responsive)
ด้วยการฝังไอคอน SVG ลงใน CSS เป็นเครื่องหมายหัวข้อ (เช่น การใช้องค์ประกอบเทียม ::before) ไอคอนเหล่านี้จะถูกวาดอย่างคมชัดในทุกอุปกรณ์
การเขียนโค้ดอีเมล HTML
ในอีเมล HTML ที่มักบล็อกการโหลดรูปภาพภายนอก วิธีนี้สามารถใช้เป็นเทคนิคเพื่อแสดงการตกแต่งแบบอินไลน์บนไคลเอนต์อีเมลบางประเภทได้
ส่งความคิดเห็น
โปรดแจ้งให้เราทราบความคิดเห็นของคุณเพื่อช่วยปรับปรุงเครื่องมือ
การส่งความคิดเห็นถูกระงับชั่วคราว
เซิร์ฟเวอร์ไม่ว่างหรือระบบป้องกันสแปมทำงานอยู่ โปรดลองอีกครั้งในภายหลัง