ฝังภาพและฟอนต์ใน SVG
เพิ่ม SVG 1 รายการ พร้อมภาพ (PNG, JPEG, WebP, GIF) หรือฟอนต์ (TTF, OTF, WOFF, WOFF2) ที่ SVG นั้นอ้างอิง แล้วรวมเป็น SVG 1 รายการ เพื่อไม่ต้องแชร์ทรัพยากรแยกต่างหาก ระบุทรัพยากรที่จะใช้สำหรับแต่ละการอ้างอิงแล้วสร้าง SVG เมื่อตัวอย่างแสดงผลสำเร็จ คุณจะบันทึกได้ ทรัพยากรที่ URL ภายนอกจะไม่ถูกดึงมาโดยอัตโนมัติ
คุณทำอะไรได้
รวมรูปภาพและฟอนต์ไว้ในไฟล์เดียว
ฝังทรัพยากรในเครื่องที่เพิ่มเข้ามาไว้ใน SVG เพื่อลดความจำเป็นในการส่งทรัพยากรแยกต่างหาก
ตรวจสอบรายการอ้างอิงและทรัพยากร
ระบุไฟล์ที่สอดคล้องกันสำหรับแต่ละพาธรูปภาพหรือชื่อฟอนต์ใน SVG ระบบจะไม่สร้าง SVG ที่ยังมีรายการอ้างอิงที่แก้ไขไม่ได้เหลืออยู่
ตรวจสอบการแสดงผลของ SVG ที่สร้างแล้วและบันทึก
ตรวจดูการแสดงผลในฐานะรูปภาพ แล้วบันทึก SVG ที่ฝังทรัพยากรแล้ว ไฟล์ต้นฉบับจะไม่ถูกเขียนทับ
วิธีใช้งาน
เพิ่ม SVG และทรัพยากร
เลือก SVG หนึ่งไฟล์พร้อมรูปภาพและฟอนต์ที่ SVG นั้นอ้างอิง คุณสามารถเพิ่มทั้งหมดพร้อมกันจากโฟลเดอร์ได้
จับคู่ทรัพยากรที่จะฝัง
ตรวจสอบไฟล์ในเครื่องที่จะใช้สำหรับแต่ละรายการอ้างอิง สำหรับรายการอ้างอิงที่จับคู่อัตโนมัติไม่ได้ ให้เลือกจากทรัพยากรที่เพิ่มเข้ามาแล้ว
สร้าง SVG
เมื่อไม่มีรายการอ้างอิงที่ยังแก้ไขไม่ได้เหลืออยู่ ให้กด “สร้าง SVG พร้อมรูปภาพและฟอนต์”
ตรวจสอบการแสดงผลและบันทึก
ตรวจสอบข้อความและรูปภาพในตัวอย่างที่สร้างก่อนบันทึก หากแสดงผลไม่ได้ ให้ตรวจสอบ SVG ต้นฉบับและทรัพยากร
มีประโยชน์เมื่อ
ส่งมอบ SVG และทรัพยากรไปพร้อมกัน
รวมกราฟิกที่อ้างอิงรูปภาพและฟอนต์ในคนละโฟลเดอร์ ให้เป็น SVG ไฟล์เดียวที่ส่งมอบได้ง่าย
ตรวจสอบสาเหตุที่รายการอ้างอิงใช้งานไม่ได้
เปรียบเทียบทรัพยากรที่ต้องการกับไฟล์ที่เพิ่มเข้ามา แล้วระบุรูปภาพหรือฟอนต์ที่ยังขาดอยู่
การทำงานของรายการอ้างอิงและการฝัง
พาธสัมพัทธ์และการจับคู่ไฟล์
รายการอ้างอิงจะถูกจับคู่อัตโนมัติเมื่อพาธอ้างอิงที่สัมพัทธ์กับ SVG ตรงกับพาธของทรัพยากรที่เพิ่มเข้ามาเพียงรายการเดียว ให้เลือกด้วยตนเองเมื่อมีไฟล์ชื่อเดียวกันอยู่คนละโฟลเดอร์หรือเมื่อตัวเลือกทับซ้อนกัน
ระบุไฟล์สำหรับแต่ละชื่อฟอนต์
เครื่องมือนี้ไม่ดึงฟอนต์จากอุปกรณ์ของคุณโดยอิงเพียงชื่อฟอนต์ที่อยู่ใน SVG ให้เพิ่มไฟล์ฟอนต์ที่จำเป็นและระบุไฟล์ที่ตรงกัน
ไม่ดึงทรัพยากรที่อยู่ใน URL มาโดยอัตโนมัติ
แม้จะมีการอ้างอิง URL ภายนอก ให้จัดหารูปภาพหรือฟอนต์ไว้ในเครื่องและระบุเข้าไป หน้าจอนี้ไม่มีคำสั่งดึงทรัพยากรจาก URL
การฝังแยกจากการลดขนาดไฟล์
การฝังข้อมูลรูปภาพไว้ใน SVG อาจทำให้ไฟล์ SVG มีขนาดใหญ่ขึ้น ฟอนต์จะถูกแปลงเป็น WOFF2 และฝังไว้ ใช้เครื่องมือแยกในการเพิ่มประสิทธิภาพโค้ด SVG
ความแตกต่างตามวิธีแสดงผล
ตัวอย่างจะแสดง SVG ในฐานะรูปภาพ ไม่รับประกันว่าจะเหมือนกันในทุกแอป จึงควรตรวจสอบการแสดงผลที่ต้องการในปลายทางด้วย
คำถามที่พบบ่อย
ควรทำอย่างไรเมื่อไม่พบทรัพยากร
เพิ่มรูปภาพหรือฟอนต์ แล้วระบุในช่องเลือกของแต่ละรายการอ้างอิง การจับคู่อัตโนมัติอาจไม่ทำงานเมื่ออยู่คนละโฟลเดอร์ มีพาธซ้ำ หรือเป็น URL ภายนอก
ใช้ทรัพยากรประเภทใดได้บ้าง
รูปภาพเป็นได้ PNG, JPEG, WebP หรือ GIF ส่วนฟอนต์เป็นได้ TTF, OTF, WOFF หรือ WOFF2 ต้องระบุ SVG ทีละไฟล์
ค้นหาฟอนต์ให้อัตโนมัติหรือไม่
เครื่องมือนี้ไม่ค้นหาฟอนต์จากอุปกรณ์หรือเว็บโดยอิงเพียงชื่อฟอนต์ เพิ่มและเลือกไฟล์ที่คุณมีในเครื่อง
ทรัพยากรที่ฝังไว้แล้วจะเป็นอย่างไร
รูปภาพและฟอนต์ที่ฝังเป็น data URI รวมถึงรายการอ้างอิงรูปแบบ # ภายใน SVG จะไม่ถูกนับเป็นรายการอ้างอิงภายนอก คุณสามารถสร้าง SVG ได้หากไม่เหลือรายการอ้างอิงที่ตรวจพบแล้วยังไม่ได้แก้ไข
เกิดอะไรขึ้นเมื่อคุณเพิ่มหรือเลือกทรัพยากรใหม่
ถ้าคุณเพิ่มเฉพาะทรัพยากร รายการนั้นจะถูกเพิ่มเข้าไปในรายการและทรัพยากรที่กำหนดไว้ก่อนหน้าจะยังคงอยู่ ตรวจสอบการจับคู่อัตโนมัติในกรณีที่มีตัวเลือกที่พาธเหมือนกันเพิ่มขึ้น เป็นต้น ส่วนอินพุตที่มี SVG ใหม่จะแทนที่ SVG ปัจจุบันและทรัพยากรทั้งหมดของมัน
จะทำอย่างไรหากมีรายการอ้างอิงที่ไม่รองรับ
ไม่สามารฝังการใช้งานภายนอกหรือการอ้างอิงสคริปต์ได้ และ SVG ที่มีการ import CSS ภายนอกก็โหลดไม่ได้ กรุณาจัดระเบียบรายการอ้างอิงในแอปต้นฉบับหรือแอปที่เหมาะสมก่อนเลือก SVG
SVG จะเล็กลงหรือไม่
การลดขนาดไฟล์ไม่ใช่จุดประสงค์ของเครื่องมือนี้ การฝังทรัพยากรไว้ใน SVG อาจทำให้ไฟล์ใหญ่ขึ้น ใช้การเพิ่มประสิทธิภาพ SVG หากต้องการทำความสะอาดโค้ด
จะทำอย่างไรหาก SVG ที่สร้างแล้วแสดงผลไม่ได้
ตัวเลือกบันทึกจะไม่แสดงบนหน้าจอนี้จนกว่า SVG จะแสดงผลสำเร็จ ตรวจสอบ SVG ต้นฉบับและทรัพยากร ตรวจทานการจับคู่หรือไฟล์ แล้วสร้างอีกครั้ง
อินพุตและผลลัพธ์
- อินพุต
- SVG 1 ไฟล์ พร้อมรูปภาพและฟอนต์ เพิ่มจากไฟล์หรือโฟลเดอร์ได้
- รูปภาพ
- ข้อมูลต้นฉบับของรูปภาพที่เพิ่มเข้ามาจะถูกฝังไว้ รูปภาพจะไม่ถูกปรับขนาดหรือบีบอัด
- ฟอนต์
- ฟอนต์ที่จับคู่แล้วจะถูกแปลงเป็น WOFF2 และฝังไว้
- ผลลัพธ์
- original-name-embedded.svg คุณสามารถบันทึกได้หลังจากที่ SVG ที่สร้างแล้วแสดงผลสำเร็จ