ครอบตัด SVG

ครอบตัด SVG

ลากกรอบบน SVG ของคุณเพื่อเลือกส่วนที่ต้องการเก็บไว้ สิ่งที่เปลี่ยนมีแค่ viewBox — ทุกเส้นพาธยังอยู่ครบเหมือนเดิม คุณจึงย้อนขยายกรอบกลับได้เสมอ

ครอบตัด SVG

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

วางไฟล์ SVG ที่นี่

หรือคลิกเพื่อเลือก — เฉพาะ SVG

เป็นหน้าต่าง ไม่ใช่มีด

การครอบตัด SVG เปลี่ยนอะไรกันแน่

SVG เก็บภาพวาดไว้ในระบบพิกัดเดียว และ viewBox ก็คือหน้าต่างที่คุณมองผ่านเข้าไป เลื่อนหน้าต่างนั้นก็เท่ากับครอบตัดภาพแล้ว — ไม่มีเส้นพาธใดถูกแก้ ไม่มีจุดใดถูกลบ และไม่มีการวาดใหม่ นั่นคือเหตุผลที่ผลลัพธ์เป๊ะทุกขนาด และเหตุผลที่คุณขยายหน้าต่างกลับทีหลังแล้วได้ภาพเต็มคืนมา

สิ่งที่ต้องแลกคือไฟล์ไม่เล็กลง ส่วนที่อยู่นอกหน้าต่างยังอยู่ในไฟล์ เพียงแต่ไม่ถูกแสดง หากอยากให้มันหายไปจริง ๆ ให้ครอบตัดที่นี่ก่อน แล้วค่อยส่งไฟล์ผ่านตัวปรับแต่ง SVG

สามขั้นตอน

วิธีครอบตัด SVG

01

วางไฟล์ SVG

เลือกไฟล์ .svg — ไฟล์ยังอยู่ในอุปกรณ์ของคุณ

02

ลากกรอบ

จัดกรอบให้ได้ส่วนที่ต้องการ หรือพิมพ์ค่า viewBox ที่แน่นอนลงไป

03

ดาวน์โหลด

ตัวงานเดิม เพียงเปลี่ยนหน้าต่างที่ใช้มอง

ตอบสั้น ๆ

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

การครอบตัดทำให้ไฟล์เล็กลงไหม

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

ยกเลิกการครอบตัดได้ไหม

ได้ เพราะไม่มีอะไรถูกลบ เพียงเปิดไฟล์ที่ครอบตัดแล้วขึ้นมาที่นี่อีกครั้งแล้วลากกรอบออก ภาพเต็มก็กลับมา นี่คือความต่างในทางปฏิบัติจากการครอบตัดไฟล์ JPG

ทำไมตัวเลขถึงไม่ใช่พิกเซล

มันคือหน่วยผู้ใช้ของ viewBox ซึ่งเป็นระบบพิกัดของ SVG เอง ไฟล์หนึ่งอาจกว้าง 24 หน่วยแต่แสดงผลที่ 512 พิกเซลก็ได้ ระบบจะย่อแอตทริบิวต์ width และ height ตามสัดส่วนให้คุณ ไฟล์ที่ครอบตัดแล้วจึงแสดงผลในขนาดที่คุณคาดไว้

ไฟล์ของฉันไม่มี viewBox

ระบบจะเติมให้หนึ่งอัน โดยอิงตาม width และ height ของไฟล์ หากไม่มี viewBox ก็ไม่มีหน้าต่างให้เลื่อน การครอบตัดจึงไม่มีอะไรให้ทำ การเติมเข้าไปไม่เปลี่ยนหน้าตาที่มองเห็นแต่อย่างใด

ยังตอบสนองตามขนาดหน้าจอได้อยู่ไหม

ถ้า SVG ของคุณไม่มีแอตทริบิวต์ width และ height อยู่แล้ว — ซึ่งเป็นรูปแบบปกติของไอคอนที่กำหนดขนาดด้วย CSS — มันก็ยังคงเป็นเช่นนั้น แอตทริบิวต์เหล่านี้จะถูกเขียนใหม่เฉพาะเมื่อมันมีอยู่แต่แรกเท่านั้น

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

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