โปรแกรมแก้ไข SVG ออนไลน์

โปรแกรมแก้ไข SVG ระดับมืออาชีพที่ทำงานในเบราว์เซอร์ของคุณทั้งหมด

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

สิ่งที่คุณทำได้

• วาดอย่างแม่นยำ: เครื่องมือปากกาพร้อมเส้นโค้งเบซิเยร์ ดินสอวาดอิสระพร้อมการทำให้เรียบ สี่เหลี่ยมที่มุมโค้ง ลบมุม หรือมุมกลับได้อิสระ วงรี เส้น แปรงก้อน ยางลบ มีด และกรรไกร และรูปร่างที่แก้ไขได้: รูปหลายเหลี่ยม ดาว สามเหลี่ยม กากบาท กรอบ วงแหวน พาย จันทร์เสี้ยว ลูกศร กล่องคำพูด เฟือง หัวใจ เมฆ ดอกไม้ และเกลียว รวมถึงข้อความ
• แก้ไขพาธทีละจุดยึด: ย้ายจุดยึดและที่จับ แปลงระหว่างจุดยึดแบบมุม แบบเรียบ และแบบสมมาตร เพิ่มและลบจุดยึด เชื่อมและแยกพาธ ดัดส่วนเส้นโดยตรง และสแนปที่จับไปยังเส้นสัมผัส
• รวมรูปร่าง: รวม ลบ ตัดกัน ยกเว้น และแบ่ง รวมถึงแปลงเส้นขอบเป็นรูปร่าง ออฟเซ็ตพาธ ทำให้เรียบง่าย และกลับทิศ ทั้งหมดคำนวณโดยเอนจินเรขาคณิตที่รักษาเส้นโค้งของเราเองใน worker เบื้องหลัง
• จัดสไตล์ทุกอย่าง: สีทึบ ไล่สีแบบเส้นตรงและแบบรัศมีพร้อมที่จับบนผืนผ้าใบ ลวดลาย ความทึบแยกสำหรับสีพื้นและเส้นขอบ เส้นประ ปลายเส้น รอยต่อ หัวลูกศร โหมดผสาน เอฟเฟกต์เบลอและเงาตกกระทบ พาธตัดขอบ และมาสก์
• จัดระเบียบ: แผงเลเยอร์ที่ลากเพื่อเรียงลำดับ เปลี่ยนชื่อ และซ้อนกันได้ ล็อกและซ่อน จัดกลุ่มและเลิกจัดกลุ่ม จัดแนวและกระจายตามส่วนที่เลือก อาร์ตบอร์ด หรือวัตถุหลัก แถบสีของเอกสาร และสัญลักษณ์ที่ใช้ซ้ำได้
• ทำงานแบบมือโปร: เส้นนำอัจฉริยะพร้อมป้ายระยะห่างและคำแนะนำระยะเท่ากัน สแนปไปยังกริด พิกเซล เส้นนำจากไม้บรรทัด จุดยึด และพาธ ช่องตัวเลข X/Y/W/H/การหมุน เลิกทำได้ไม่จำกัด และช็อตคัตแบบ Figma และ Illustrator
• โค้ดและการส่งออก: มุมมองโค้ด SVG แบบสองทาง การส่งออก SVG ที่ปรับแล้วพร้อมแสดงขนาด PNG/JPEG/WebP ทุกสเกล และคัดลอกเป็น SVG, data URI, React (JSX หรือ TSX), Tailwind SVG หรือพื้นหลัง CSS
• สร้างมาเพื่องานเว็บ: สีของเอกสารพร้อมแทนที่ในคลิกเดียวและแปลงเป็น currentColor ข้อความเป็นเส้นโครงร่าง แปลงเส้นขอบเป็นรูปร่าง รวมการแปลงรูปและเลิกจัดกลุ่ม ปรับผืนผ้าใบให้พอดีกับเนื้อหา และทำให้พาธที่ยุ่งเหยิงเรียบง่าย
• พื้นที่ทำงานจริง: ภาพวาดหลายชิ้นในแท็บ แต่ละชิ้นมีประวัติการเลิกทำของตัวเอง เมนูสั้นพร้อมเมนูย่อย แผงด้านข้างที่พับเก็บได้ (Ctrl/⌘+B) และแก้ไขแบบเต็มหน้าจอบนโทรศัพท์และเดสก์ท็อป

ทำไมโปรแกรมแก้ไขที่ใช้ SVG โดยตรงจึงสำคัญ

เครื่องมือออกแบบหลายตัวมอง SVG เป็นรูปแบบส่งออก: คุณวาดในโมเดลของพวกเขาเอง แล้ว SVG ถูกสร้างตอนท้าย วิธีนี้ใช้ได้กับไอคอนง่าย ๆ แต่ใช้ไม่ได้เมื่อคุณต้องแก้ไขไฟล์ที่มีอยู่ เก็บ id ที่ CSS หรือ JavaScript ของคุณพึ่งพา หรือเข้าใจว่าทำไมไฟล์ใหญ่กว่าที่ควรถึงสิบเท่า โปรแกรมแก้ไขนี้ทำงานกับเอกสาร SVG โดยตรง กลุ่มยังคงเป็นกลุ่ม การไล่สียังคงเป็นการไล่สี และ <symbol> ที่ใช้ห้าครั้งยังคงเป็นสัญลักษณ์เดียว เมื่อคุณเปลี่ยนชื่อเลเยอร์ คุณกำลังตั้งค่า id ขององค์ประกอบนั้น

รวดเร็วแม้กับไฟล์ขนาดใหญ่

ความเร็วเป็นเป้าหมายการออกแบบตั้งแต่โค้ดบรรทัดแรก ภาพวาดถูกเรนเดอร์โดยเบราว์เซอร์ของคุณโดยตรงในเลเยอร์ที่แยกออกมา ที่จับการเลือก เส้นรอบนอกเมื่อวางเมาส์ และเส้นนำถูกวาดบนโอเวอร์เลย์แยก การขยับเมาส์จึงไม่แตะเอกสารของคุณเลย ดัชนีเชิงพื้นที่ (R-tree) ค้นหาสิ่งที่อยู่ใต้ตัวชี้ได้ในระดับไมโครวินาที แม้มีรูปร่างหลายหมื่นรายการ บนเอกสารที่หนัก การแพนและซูมจะส่งให้ตัวประกอบภาพของ GPU และเวกเตอร์จะถูกเรนเดอร์ใหม่ให้คมชัดเมื่อคุณหยุด งานที่ใช้ทรัพยากรมาก เช่น การดำเนินการบูลีน การออฟเซ็ตพาธ และการปรับแต่ง SVG ทำงานใน Web Worker อินเทอร์เฟซจึงยังตอบสนองดี

เครื่องมือแม่นยำสำหรับงานเวกเตอร์

ใช้เครื่องมือปากกาเพื่อคลิกสร้างมุมและลากสร้างเส้นโค้งเรียบ กด Shift ค้างเพื่อคงมุม 45° และ Alt เพื่อแยกที่จับ ด้วยเครื่องมือจุดยึด คุณลากส่วนเส้นเพื่อดัด ดับเบิลคลิกเพื่อเพิ่มจุดยึด หรือเลือกหลายจุดยึดแล้วจัดแนวได้ เส้นนำอัจฉริยะแสดงเมื่อวัตถุตรงแนวกับขอบหรือจุดกึ่งกลางของวัตถุข้างเคียง และเมื่อระยะห่างระหว่างวัตถุเท่ากัน คุณยังลากเส้นนำออกจากไม้บรรทัดได้ สำหรับค่าที่แน่นอน ให้พิมพ์ X, Y ความกว้าง ความสูง และการหมุนในแผงออกแบบ ช่องรับการคำนวณ เช่น 120+16 หรือ 200/3

ส่งออกได้สะอาดและเล็ก

โปรแกรมแก้ไขมักทิ้งข้อมูลเมตา คำนิยามที่ไม่ได้ใช้ กลุ่มที่ซ้ำซ้อน และตัวเลขที่ละเอียดเกินไปไว้ในไฟล์ที่บันทึก กล่องโต้ตอบส่งออกจะรันตัวปรับแต่งแบบ SVGO ในเบื้องหลัง ปัดตัวเลขตามความละเอียดที่คุณเลือก แปลงข้อมูลพาธเป็นรูปแบบที่สั้นที่สุด ลบข้อมูลเมตาของโปรแกรมแก้ไขและคำนิยามที่ไม่ได้ใช้ ย่อ id และสี และยุบกลุ่มที่ไร้ประโยชน์ การปรับแต่งแต่ละอย่างปิดได้ และกล่องโต้ตอบแสดงขนาดไฟล์ก่อนและหลัง สำหรับผลลัพธ์แรสเตอร์ เลือก PNG, JPEG หรือ WebP ที่ 1×, 2×, 4× หรือขนาดพิกเซลที่แน่นอน มีหรือไม่มีพื้นหลังโปร่งใสก็ได้

สร้างมาเพื่องานเว็บ

SVG ที่ใช้ในเว็บไซต์และแอปต้องการสิ่งที่ต่างจากงานพิมพ์ รายการสีของเอกสารแสดงทุกสีที่ไฟล์ใช้: เปลี่ยนสีหนึ่งแล้วทุกอย่างที่ใช้สีเดียวกันจะเปลี่ยนตาม หรือแปลงเป็น currentColor เพื่อให้ไอคอน React หรือ Tailwind รับสีจาก CSS ไฟล์ที่นำเข้ามักมีกลุ่มซ้อนและการแปลงรูปที่ทำให้แก้ไขพาธยาก: รวมการแปลงรูปและเลิกจัดกลุ่มจะรวมเข้าไปในพิกัดในขั้นตอนเดียว และพอดีกับเนื้อหาจะตัด viewBox ให้พอดีกับงาน รวมเส้นขอบด้วย ข้อความเป็นเส้นโครงร่างและแปลงเส้นขอบเป็นรูปร่างเปลี่ยนตัวอักษรและความหนาเส้นเป็นพาธธรรมดาที่ดูเหมือนกันทุกที่ และทำให้เรียบง่ายจะเอาจุดหลายร้อยจุดออกจากรูปร่างที่ลอกลายหรือวาดอิสระ

ไฟล์ของคุณอยู่บนอุปกรณ์ของคุณ

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

สำรวจเครื่องมือรูปภาพอื่น ๆ