วอลเปเปอร์

SVG เป็น CSS Data URI

เข้ารหัส SVG เป็น data URI แบบ base64 สำหรับฝังใน CSS / HTML โดยตรง

วางรูปหรือคลิกเพื่ออัปโหลด

ทดลองใช้ฟรี

เบื่อกับการที่ทุกไอคอนเล็กๆ ต้องส่งคำขอ HTTP เพิ่มเติมจนทำให้เว็บไซต์ของคุณช้าลงหรือไม่? ตัวแปลง SVG เป็น Data URI ของเราคือคำตอบ เครื่องมือนี้ช่วยให้คุณฝังภาพ SVG ลงใน HTML หรือ CSS ได้โดยตรง ไม่ต้องโหลดไฟล์แยกต่างหาก ช่วยเร่งการแสดงผลหน้าเว็บ ด้วยการแปลงโค้ด SVG ของคุณเป็น data URI แบบ base64 ที่มีขนาดกะทัดรัด คุณสามารถปรับแต่งทรัพยากรและปรับปรุงประสิทธิภาพโดยรวมของเว็บไซต์ได้ภายในไม่กี่วินาที

วิธีการทำงานของตัวแปลง SVG เป็น Data URI

ขั้นตอนง่ายมาก เพียงวางโค้ด SVG ทั้งหมดของคุณ—เริ่มต้นด้วย <svg> และลงท้ายด้วย </svg>—ลงในช่องป้อนข้อมูลแล้วคลิกปุ่มแปลง เครื่องมือของเราจะประมวลผลโค้ดในเบราว์เซอร์ของคุณทันที โดยเข้ารหัสเป็นสตริง base64 จากนั้นจะห่อสตริงนี้ในรูปแบบที่ถูกต้องสำหรับการใช้งานโดยตรง พร้อมให้คุณคัดลอกไปใช้ในคุณสมบัติ background-image ของ CSS หรือแอตทริบิวต์ src ของแท็ก <img> ใน HTML ไม่มีการตั้งค่าที่ซับซ้อน แค่คัดลอกและวาง

เมื่อใดควรใช้ SVG Data URI

การฝัง SVG เป็น data URI เหมาะสำหรับไอคอนและกราฟิกขนาดเล็กที่ใช้งานซ้ำๆ บนเว็บไซต์ เช่น โลโก้ สัญลักษณ์หัวข้อย่อย หรือองค์ประกอบส่วนติดต่อผู้ใช้ ประโยชน์หลักคือการลดคำขอไปยังเซิร์ฟเวอร์ ซึ่งช่วยเพิ่มความเร็วในการโหลดเว็บไซต์ โดยเฉพาะบนอุปกรณ์มือถือ อย่างไรก็ตาม วิธีนี้ไม่เหมาะกับ SVG ที่มีขนาดใหญ่หรือซับซ้อนมาก เนื่องจากการเข้ารหัส base64 จะเพิ่มขนาดไฟล์ประมาณ 33% การฝัง SVG ขนาดใหญ่อาจทำให้ไฟล์ CSS หรือ HTML ของคุณใหญ่ขึ้น ซึ่งจะลบล้างประโยชน์ด้านประสิทธิภาพ สำหรับงานเวกเตอร์ที่ซับซ้อนมากขึ้น ลองดูชุดเครื่องมือ เครื่องมือ SVG เวกเตอร์ ครบวงจรของเรา

เคล็ดลับเพื่อผลลัพธ์ที่ดีที่สุด

เพื่อให้ได้ประโยชน์สูงสุดจากเทคนิคนี้ ควรปรับแต่ง SVG ของคุณให้เหมาะสมก่อนแปลง ไฟล์ SVG ที่เล็กและสะอาดกว่าจะให้ data URI ที่สั้นและมีประสิทธิภาพมากขึ้น เราขอแนะนำให้รันโค้ดของคุณผ่าน เครื่องมือปรับแต่ง SVG ก่อนเพื่อลบข้อมูลที่ไม่จำเป็นและลดขนาด นอกจากนี้ โปรดจำไว้ว่าเมื่อ SVG ถูกฝังเป็น data URI แล้ว คุณจะไม่สามารถจัดสไตล์ส่วนประกอบภายในด้วย CSS ภายนอกได้ มันทำงานคล้ายกับ PNG หรือ JPEG ในเรื่องนั้น สำหรับกราฟิกที่ต้องการการจัดสไตล์แบบไดนามิก การลิงก์ไปยังไฟล์ .svg ภายนอกยังคงเป็นวิธีที่ดีกว่า ค้นหาแรงบันดาลใจและกราฟิกพร้อมใช้งานได้ใน รายการ SVG ของเรา

คำถามที่พบบ่อย

What is an SVG data URI?

An SVG data URI is a string of text that represents an SVG image, encoded in base64 format. This allows you to embed the image directly into HTML or CSS without needing a separate file.

ควรฝัง SVG หรือใช้แท็ก <img> ดีกว่า?

การฝัง SVG เป็น data URI จะดีกว่าสำหรับไอคอนขนาดเล็ก เพื่อลดคำขอ HTTP และปรับปรุงการโหลดหน้าเว็บครั้งแรก สำหรับ SVG ที่มีขนาดใหญ่และซับซ้อน การใช้แท็ก <img> มาตรฐานที่เชื่อมโยงไปยังไฟล์ .svg จะดีกว่าเพื่อการแคช

ฉันจะใช้ SVG base64 ใน CSS ได้อย่างไร?

คุณสามารถใช้ SVG ที่เข้ารหัส base64 ใน CSS ได้โดยตั้งค่าเป็นค่าของคุณสมบัติ `background-image` รูปแบบคือ `url('data:image/svg+xml;base64,...')` โดยที่จุดไข่ปลาคือสตริงที่เข้ารหัสของคุณ

ทำไมข้อมูล URI ของ SVG ถึงยาวจัง?

การเข้ารหัส Base64 จะเพิ่มขนาดไฟล์เดิมประมาณ 33% เพื่อให้ได้ข้อมูล URI ที่สั้นลง คุณควรย่อโค้ด SVG ก่อนเพื่อลบอักขระและความคิดเห็นที่ไม่จำเป็นออก

ฉันสามารถจัดสไตล์ SVG ที่ฝังเป็น data URI ได้หรือไม่?

ไม่ คุณไม่สามารถจัดสไตล์เส้นทางภายในของ SVG ที่เป็น data URI โดยใช้ CSS ภายนอกจากหน้าเว็บของคุณได้ ในบริบทนี้ เบราว์เซอร์จะถือว่ามันเป็นภาพนิ่งแบบแรสเตอร์ เช่น PNG

SVG data URIs ส่งผลเสียต่อ SEO หรือไม่?

ไม่ สิ่งเหล่านี้ไม่ได้ส่งผลเสียต่อ SEO โดยเนื้อแท้ เมื่อใช้อย่างถูกต้องสำหรับไอคอนขนาดเล็ก สิ่งเหล่านี้สามารถช่วยเพิ่มความเร็วของหน้าเว็บ ซึ่งเป็นปัจจัยการจัดอันดับเชิงบวก หลีกเลี่ยงการใช้สำหรับรูปภาพขนาดใหญ่ที่อาจทำให้การแยกวิเคราะห์ HTML/CSS ของคุณช้าลง

Base64 กับ SVG ที่เข้ารหัส URL ต่างกันอย่างไร?

ทั้งสองวิธีใช้สำหรับฝัง SVG โดย Base64 เป็นรูปแบบการเข้ารหัสจากไบนารีเป็นข้อความที่เหมาะกับข้อมูลทุกประเภท ส่วนการเข้ารหัส URL (หรือเปอร์เซ็นต์เอนโค้ดดิ้ง) จะทำให้ XML ของ SVG ปลอดภัยต่อการใช้งานภายในสตริง URL

เครื่องมือนี้จัดเก็บข้อมูล SVG ของฉันหรือไม่?

ไม่ เครื่องมือของเราทำงานภายในเบราว์เซอร์ของคุณเท่านั้น โค้ด SVG ของคุณจะไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์ของเรา ทำให้ข้อมูลของคุณเป็นส่วนตัว

เกี่ยวกับ SVG เป็น CSS Data URI

SVG เป็น CSS Data URI เป็นเครื่องมือออนไลน์ฟรีจาก Wallpapers.com ที่ทำงานในเบราว์เซอร์ของคุณเท่านั้น — ไม่ต้องติดตั้ง ไม่มีลายน้ำ ไม่ต้องลงทะเบียนอีเมลสำหรับการลองครั้งแรก เข้ารหัส SVG เป็น data URI แบบ base64 สำหรับฝังใน CSS / HTML โดยตรง

วิธีใช้ SVG เป็น CSS Data URI

  1. วางรูปภาพของคุณในพื้นที่อัปโหลด (เดี่ยวหรือหลายไฟล์ — เปิด Bulk ที่ด้านบน)
  2. เลือกการตั้งค่าที่เครื่องมือแสดง (ขนาด, รูปแบบ, คุณภาพ)
  3. คลิก Run ผลลัพธ์จะดาวน์โหลดอัตโนมัติ — ไม่ต้องบันทึกเอง

เมื่อใดควรใช้

กรณีการใช้งานทั่วไปได้แก่: เตรียมรูปภาพสำหรับอัปโหลดเว็บ, รายการสินค้าอีคอมเมิร์ซ, แพลตฟอร์มโซเชียลมีเดียที่มีข้อจำกัดรูปแบบ, และแปลงไฟล์จากอุปกรณ์หรือแอปหนึ่งไปยังอีกอุปกรณ์หนึ่ง

ฟรี vs พรีเมียม

ผู้เยี่ยมชมทุกคนได้รับทดลองใช้ฟรี; ผู้ใช้ที่ลงชื่อเข้าใช้ฟรีได้รับโควต้ารายวันสูงกว่า สมัครสมาชิก พรีเมียม เพื่อการใช้งานไม่จำกัด, ประมวลผลเป็นกลุ่มสูงสุด 200 รูปต่องาน, คิวลำดับความสำคัญ, และการเรียกดูไม่มีโฆษณา

เครื่องมือที่เกี่ยวข้อง

กำลังมองหาสิ่งที่แตกต่างเล็กน้อย? ลอง SVG เป็น PNG Converter , ตัวแปลง SVG เป็น JPG หรือ ตัวแปลง SVG เป็น WebP — หรือเรียกดูทั้งหมด SVG / เวกเตอร์ เครื่องมือ.

⭐ พรีเมียม

ปลดล็อกทุกเครื่องมือ — ไม่มีข้อจำกัด ไม่ต้องรอ

  • ✓ 200 AI เครดิต / เดือน — สร้างภาพ อัปสเกล อินเพนต์
  • ✓ การประมวลผลแบบกลุ่ม (สูงสุด 200 ไฟล์ในครั้งเดียว)
  • ✓ 8K ดาวน์โหลด + ไม่มีโฆษณา
  • ✓ คิวลำดับความสำคัญ — ไม่จำกัดอัตรา
ทดลองใช้ฟรี 7 วัน →
สด
สร้างวอลเปเปอร์
ด้วย AI
›
ลอง →