ครอบตัด SVG
☞ ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ไม่มีการอัปโหลดไฟล์วางไฟล์ SVG ที่นี่
หรือคลิกเพื่อเลือก — เฉพาะ SVG
ตัวอย่าง
ครอบตัด SVG
ลากกรอบบน SVG ของคุณเพื่อเลือกส่วนที่ต้องการเก็บไว้ สิ่งที่เปลี่ยนมีแค่ viewBox — ทุกเส้นพาธยังอยู่ครบเหมือนเดิม คุณจึงย้อนขยายกรอบกลับได้เสมอ
หรือคลิกเพื่อเลือก — เฉพาะ SVG
ตัวอย่าง
เป็นหน้าต่าง ไม่ใช่มีด
SVG เก็บภาพวาดไว้ในระบบพิกัดเดียว และ viewBox ก็คือหน้าต่างที่คุณมองผ่านเข้าไป เลื่อนหน้าต่างนั้นก็เท่ากับครอบตัดภาพแล้ว — ไม่มีเส้นพาธใดถูกแก้ ไม่มีจุดใดถูกลบ และไม่มีการวาดใหม่ นั่นคือเหตุผลที่ผลลัพธ์เป๊ะทุกขนาด และเหตุผลที่คุณขยายหน้าต่างกลับทีหลังแล้วได้ภาพเต็มคืนมา
สิ่งที่ต้องแลกคือไฟล์ไม่เล็กลง ส่วนที่อยู่นอกหน้าต่างยังอยู่ในไฟล์ เพียงแต่ไม่ถูกแสดง หากอยากให้มันหายไปจริง ๆ ให้ครอบตัดที่นี่ก่อน แล้วค่อยส่งไฟล์ผ่านตัวปรับแต่ง SVG
สามขั้นตอน
เลือกไฟล์ .svg — ไฟล์ยังอยู่ในอุปกรณ์ของคุณ
จัดกรอบให้ได้ส่วนที่ต้องการ หรือพิมพ์ค่า viewBox ที่แน่นอนลงไป
ตัวงานเดิม เพียงเปลี่ยนหน้าต่างที่ใช้มอง
ตอบสั้น ๆ
ไม่ และนั่นเป็นเรื่องปกติ การครอบตัดเป็นแค่การเลื่อน viewBox รูปทรงที่อยู่นอกกรอบจึงยังอยู่ในไฟล์ เพียงแต่เบราว์เซอร์ไม่วาดมันออกมา หากอยากเก็บกวาดส่วนที่เหลือ ให้ส่งไฟล์ที่ครอบตัดแล้วผ่านตัวปรับแต่ง SVG
ได้ เพราะไม่มีอะไรถูกลบ เพียงเปิดไฟล์ที่ครอบตัดแล้วขึ้นมาที่นี่อีกครั้งแล้วลากกรอบออก ภาพเต็มก็กลับมา นี่คือความต่างในทางปฏิบัติจากการครอบตัดไฟล์ JPG
มันคือหน่วยผู้ใช้ของ viewBox ซึ่งเป็นระบบพิกัดของ SVG เอง ไฟล์หนึ่งอาจกว้าง 24 หน่วยแต่แสดงผลที่ 512 พิกเซลก็ได้ ระบบจะย่อแอตทริบิวต์ width และ height ตามสัดส่วนให้คุณ ไฟล์ที่ครอบตัดแล้วจึงแสดงผลในขนาดที่คุณคาดไว้
ระบบจะเติมให้หนึ่งอัน โดยอิงตาม width และ height ของไฟล์ หากไม่มี viewBox ก็ไม่มีหน้าต่างให้เลื่อน การครอบตัดจึงไม่มีอะไรให้ทำ การเติมเข้าไปไม่เปลี่ยนหน้าตาที่มองเห็นแต่อย่างใด
ถ้า SVG ของคุณไม่มีแอตทริบิวต์ width และ height อยู่แล้ว — ซึ่งเป็นรูปแบบปกติของไอคอนที่กำหนดขนาดด้วย CSS — มันก็ยังคงเป็นเช่นนั้น แอตทริบิวต์เหล่านี้จะถูกเขียนใหม่เฉพาะเมื่อมันมีอยู่แต่แรกเท่านั้น
ไม่ ไฟล์ถูกแยกวิเคราะห์และเขียนใหม่ในเบราว์เซอร์ของคุณ