วิธีแก้ไขไฟล์ SVG ในเบราว์เซอร์

อัปเดตเมื่อ

หากต้องการแก้ไข SVG ในเบราว์เซอร์ ให้เปิดไฟล์นั้นในโปรแกรมแก้ไขเวกเตอร์ของ EditItAll ปรับรูปพาธด้วยเครื่องมือปากกา ปรับหรือรวมรูปทรงด้วยการดำเนินการบูลีน แก้ไขข้อความ และเปลี่ยนสีอะไรก็ได้ตามต้องการ บันทึกกลับเป็น SVG หรือส่งออกเป็น PNG ที่ขนาด 2× การเปลี่ยนแปลงทุกอย่างเกิดขึ้นบนอุปกรณ์ของคุณเอง ไม่มีการอัปโหลดใด ๆ ทั้งสิ้น

ทำเลยตอนนี้ ฟรี ในเบราว์เซอร์ของคุณ

Open the vector editor

ทำไมจึงควรแก้ไข SVG โดยตรง

SVG (Scalable Vector Graphics) จัดเก็บภาพในรูปแบบของรูปทรงและพาธ คือคณิตศาสตร์ ไม่ใช่พิกเซล นี่คือเหตุผลที่โลโก้ซึ่งบันทึกเป็น SVG ยังคงคมชัดไม่ว่าจะเป็นไอคอนขนาดเล็กหรือป้ายโฆษณาขนาดใหญ่ และเป็นเหตุผลที่มันเป็นฟอร์แมตที่เหมาะสมสำหรับไอคอน โลโก้ และภาพประกอบ นอกจากนี้ยังหมายความว่าคุณสามารถเปิดไฟล์และแก้ไขรูปทรงจริง ๆ แทนที่จะขยับพิกเซลทีละจุด

การแก้ไขต้นฉบับ SVG มักจะดีกว่าการแก้ไข PNG ที่ส่งออกมาแล้วแทบทุกครั้ง ย้ายจุดยึดหนึ่งจุด เส้นโค้งก็ยังคงเรียบ เปลี่ยนสีพื้น สีก็แม่นยำ ปรับขนาดทั้งภาพ ก็ไม่มีอะไรเบลอ การทำแบบนั้นได้คุณต้องมีโปรแกรมแก้ไขที่เข้าใจเวกเตอร์

เปิดและแก้ไข SVG ทีละขั้นตอน

โปรแกรมแก้ไขเวกเตอร์ของ EditItAll เปิดไฟล์ SVG ได้โดยตรงในเบราว์เซอร์ของคุณ

  • เปิดโปรแกรมแก้ไขแล้วโหลดไฟล์ .svg ของคุณ ไม่ว่าจะเป็นโลโก้ ชุดไอคอน หรือภาพประกอบ
  • ใช้เครื่องมือเลือก (V) เพื่อย้ายและปรับขนาดวัตถุทั้งชิ้น และเครื่องมือเลือกโดยตรง (A) เพื่อจับจุดยึดแต่ละจุด
  • เปลี่ยนสีพื้นและเส้นขอบ แก้ไขข้อความใด ๆ ด้วยเครื่องมือข้อความ (T) และขยับรูปทรงเข้าตำแหน่งด้วยไกด์อัจฉริยะและปุ่มลัดสไตล์ Illustrator

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

ปรับรูปและรวมพาธ

พลังที่แท้จริงอยู่ที่การปรับรูปพาธ เครื่องมือปากกา (P) วางจุดยึดพร้อมแฮนเดิลเบซิเยร์ ทำให้คุณวาดเส้นโค้งใหม่ เพิ่มจุดให้โลโก้ หรือลากเส้นตามรูปทรงใหม่จากศูนย์ได้ ส่วนดินสอมีไว้สำหรับวาดด้วยมือเปล่า

เมื่อต้องการสร้างงานที่ซับซ้อนขึ้น ให้รวมรูปทรงง่าย ๆ ด้วยการดำเนินการบูลีน ได้แก่ Unite เพื่อรวมรูปทรงเข้าด้วยกัน Minus Front เพื่อเจาะรูปหนึ่งออกจากอีกรูปหนึ่ง Intersect เพื่อเก็บไว้เฉพาะส่วนที่ซ้อนทับกัน และ Exclude เพื่อตัดส่วนนั้นออก การคำนวณเหล่านี้ทำงานบนเอนจินเรขาคณิตที่คำนวณแม่นยำ ทำให้ขอบที่ได้ออกมาคมชัดโดยไม่เบี่ยงเบนแม้เพียงเศษเสี้ยวของพิกเซล นี่คือวิธีที่คุณเปลี่ยนสี่เหลี่ยมและวงกลมไม่กี่รูปให้กลายเป็นไอคอนที่สมบูรณ์

บันทึกเป็น SVG หรือส่งออกเป็น PNG

เมื่อเสร็จแล้ว บันทึกกลับเป็น .svg เพื่อให้ไฟล์แก้ไขได้เต็มที่ หรือส่งออกPNG ที่ขนาด 2× เมื่อคุณต้องการภาพแบบราสเตอร์สำหรับเว็บหรือเอกสาร หากคุณมี SVG อยู่แล้วและต้องการแค่ PNG ตัวแปลง SVG เป็น PNG โดยเฉพาะจะทำสิ่งนั้นให้ในขั้นตอนเดียว

ข้อจำกัดตามจริงมีสองข้อ โปรแกรมแก้ไขอ่านไฟล์ SVG มาตรฐานไม่ใช่ไฟล์ .ai หรือ .eps ของ Adobe และไม่รองรับเกรเดียนต์เมช การเติมลวดลาย หรือสี CMYK อย่างไรก็ตาม สำหรับการแก้ไขโลโก้ ไอคอน และภาพประกอบทั่วไปในรูปแบบ SVG ทุกอย่างที่คุณต้องการทำงานอยู่บนอุปกรณ์ของคุณเอง เปิดโปรแกรมแก้ไขเวกเตอร์เพื่อเริ่มต้น

พร้อมลองหรือยัง

ฟรี ไม่ต้องสมัคร และไฟล์ที่คุณเปิดจะไม่ออกจากอุปกรณ์ของคุณ

คำถามที่พบบ่อย

ไฟล์ SVG ของฉันถูกอัปโหลดตอนที่ฉันแก้ไขหรือไม่?+

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

มันเปิดไฟล์ .ai ของ Adobe Illustrator ได้ไหม?+

ไม่ได้ โปรแกรมแก้ไขเปิดไฟล์ SVG มาตรฐาน ไม่ใช่ไฟล์ .ai หรือ .eps ของ Adobe หากงานของคุณอยู่ใน Illustrator ให้ส่งออกหรือบันทึกเป็น SVG ก่อน แล้วจึงเปิดไฟล์ SVG นั้นที่นี่

ฉันสามารถส่งออก SVG ของฉันเป็น PNG ได้ไหม?+

ได้ คุณสามารถส่งออก PNG ที่ขนาด 2× เพื่อให้ได้ภาพราสเตอร์ที่คมชัด หรือใช้ตัวแปลง SVG เป็น PNG โดยเฉพาะ หากสิ่งที่คุณต้องการมีแค่การแปลงไฟล์โดยไม่ต้องแก้ไข

โปรแกรมแก้ไขทำอะไรไม่ได้บ้าง?+

มันอ่านไฟล์ .ai หรือ .eps ของ Adobe ไม่ได้ และไม่มีเกรเดียนต์เมช การเติมลวดลาย หรือสี CMYK แต่สำหรับโลโก้ ไอคอน และภาพประกอบทั่วไปใน SVG เครื่องมือปากกา รูปทรง การดำเนินการบูลีน ข้อความ และเลเยอร์ของมันก็เพียงพอสำหรับงานนั้นแล้ว

ฉันจะเสียงานที่ทำไว้ไหมถ้ารีเฟรชหน้าเว็บ?+

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

คู่มือที่เกี่ยวข้อง

คู่มือเพิ่มเติมเกี่ยวกับ เวกเตอร์และ SVG →