รวม SVG

รวม SVG

รวมไฟล์ SVG หลายไฟล์เข้าเป็นไฟล์เดียว จัดเรียงเป็นแถว คอลัมน์ ตาราง หรือซ้อนทับ — แต่ละไฟล์ยังคงการไล่เฉดสี ฟิลเตอร์ และสไตล์ของตัวเองไว้

รวม SVG

☞ ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ไม่มีการอัปโหลดไฟล์

วางไฟล์ SVG ของคุณที่นี่

หรือคลิกเพื่อเลือก — สูงสุด 12 ไฟล์ SVG

ไม่มีอะไรรบกวนข้ามไฟล์

ทำไมการเอา SVG สองไฟล์มาแปะต่อกันจึงมักพัง

ไฟล์ SVG สองไฟล์อาจถูกต้องสมบูรณ์ในตัวเอง แต่พังทันทีที่มาอยู่ในเอกสารเดียวกัน ทั้งคู่อาจนิยามการไล่เฉดสีที่มี id เป็น "a" เหมือนกัน และทั้งคู่อาจพกสไตล์ชีตจาก Illustrator ที่ตั้งชื่อทุกอย่างว่า .st0 มาด้วย พอเอามาต่อกัน การไล่เฉดสีอันที่สองก็จะไปอ้างอิงอันแรกอย่างเงียบ ๆ ส่วนสไตล์ชีตหนึ่งก็ไปทับอีกอัน — ไฟล์เปิดได้ปกติ เพียงแต่หน้าตาผิดเพี้ยน

เครื่องมือนี้เปลี่ยนชื่อทุก id และทุกคลาสในแต่ละไฟล์ต้นทางด้วยคำนำหน้าเฉพาะของมัน แล้วเขียนทุกการอ้างอิงใหม่ให้ตรงกัน ทั้งค่าใน url() ส่วนอ้างอิงของ href สไตล์แบบอินไลน์ และตัวเลือกภายในอิลิเมนต์ style จากนั้นแต่ละไฟล์จะถูกวางไว้ใน svg ซ้อนของตัวเอง ซึ่งทำให้มันมีวิวพอร์ตส่วนตัวสำหรับระบบพิกัดของมัน

สามขั้นตอน

วิธีรวมไฟล์ SVG

01

วางไฟล์

เพิ่มไฟล์ .svg ได้สูงสุด 12 ไฟล์ — ทั้งหมดยังอยู่ในอุปกรณ์ของคุณ

02

จัดเรียง

แถว คอลัมน์ ตาราง หรือซ้อนทับ พร้อมกำหนดระยะห่างตามต้องการ

03

ดาวน์โหลด

ได้ SVG ไฟล์เดียวที่บรรจุทุกอย่างไว้

ตอบสั้น ๆ

คำถามที่พบบ่อยเรื่องการรวม SVG

การไล่เฉดสีและฟิลเตอร์ของฉันจะรอดไหม

รอด id ของแต่ละไฟล์จะได้คำนำหน้า (f1-, f2- และต่อไปเรื่อย ๆ) และทุกการอ้างอิงถึงมันจะถูกเขียนใหม่ ดังนั้นสองไฟล์ที่ต่างก็ใช้ url(#a) จะไปชี้ที่นิยามของตัวเอง แทนที่จะแย่งอันเดียวกัน

แล้วชื่อคลาสอย่าง .st0 ล่ะ

ได้รับการจัดการแบบเดียวกัน ไฟล์ที่ส่งออกจาก Illustrator และ Figma ตั้งชื่อแทบทุกอย่างว่า .st0 หรือ .cls-1 การชนกันของคลาสจึงพบบ่อยกว่าการชนกันของ id เสียอีก — แอตทริบิวต์ class และตัวเลือกในอิลิเมนต์ style จะถูกเติมคำนำหน้าไปพร้อมกัน

เปลี่ยนลำดับได้ไหม

ได้ — ใช้ลูกศรในรายการไฟล์ ลำดับตรงนั้นคือลำดับในการจัดวาง จากซ้ายไปขวาและจากบนลงล่าง

ไฟล์จะถูกปรับขนาดไหม

ไม่ แต่ละไฟล์ยังคงขนาดของตัวเองและถูกวางตามเดิม เมื่อจัดเป็นแถวจะถูกจัดกึ่งกลางแนวตั้ง ส่วนในตารางแต่ละช่องจะใหญ่เท่าไฟล์ที่ใหญ่ที่สุด หากต้องการให้ขนาดเท่ากัน ให้ใช้ตัวปรับขนาด SVG ก่อน

โหมดซ้อนทับทำอะไร

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

ไฟล์ของฉันถูกอัปโหลดไหม

ไม่ ทุกอย่างถูกแยกวิเคราะห์และประกอบขึ้นในเบราว์เซอร์ของคุณ