Hyvector – โปรแกรมแก้ไข SVG ที่รวดเร็วและทันสมัย

 (hyvector.com)
3 คะแนน โดย GN⁺ 2025-05-11 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • ในงานกราฟิกเวกเตอร์ โดยไม่จำเป็นต้องเปิดแอปเดสก์ท็อปหนัก ๆ Hyvector มอบเวิร์กโฟลว์สำหรับแก้ไขและส่งออก SVG ในเบราว์เซอร์ได้ภายในไม่กี่วินาที
  • สามารถจัดการงานด่วนอย่างการแก้ไขไอคอน การร่างโลโก้ หรือการจัดระเบียบพาธ SVG ได้ทันที โดยไม่ต้องสร้างบัญชีหรือดาวน์โหลดแอปขนาดใหญ่
  • การประมวลผลทั้งหมดอยู่ภายในเครื่องในแบบ ให้ความสำคัญกับความเป็นส่วนตัวเป็นอันดับแรก และมุ่งให้เริ่มใช้งานได้รวดเร็วพร้อมใช้หน่วยความจำน้อย
  • รองรับ cross-format shaping สำหรับข้อความสองทิศทาง ระบบอักษรที่ซับซ้อน และอักษรเชื่อมต่ออย่าง Arabic
  • นักพัฒนาเดี่ยวสร้างรากฐานหลักเป็นเวลา 5 ปี จากนั้นกำลังเพิ่มฟีเจอร์อย่างสีแบบโกลบอล ความหนาเส้นแบบไดนามิก และฟอนต์แบบแปรผันบน core engine ที่เสถียรแล้ว

เวิร์กโฟลว์แก้ไข SVG แบบไม่ต้องติดตั้ง

  • Hyvector คือโปรแกรมแก้ไข SVG และกราฟิกเวกเตอร์ที่ทำงานได้ทันทีในเบราว์เซอร์
  • เน้นเวิร์กโฟลว์สำหรับเปิดไฟล์อย่างรวดเร็ว แก้ไข แล้วส่งออกกราฟิก
  • ใช้งานได้โดยไม่ต้องสร้างบัญชีหรือดาวน์โหลดแอปขนาดใหญ่
  • งานที่เหมาะกับการจัดการอย่างรวดเร็ว ได้แก่
    • การแก้ไขไอคอน
    • การร่างโลโก้
    • การจัดระเบียบพาธ SVG

สภาพแวดล้อมการทำงานที่เบาและความเป็นส่วนตัว

  • ทำงานได้จากทุกที่โดยไม่ต้องติดตั้ง
  • มุ่งให้เริ่มใช้งานได้รวดเร็วและใช้หน่วยความจำน้อย
  • ใช้วิธีแบบ ให้ความสำคัญกับความเป็นส่วนตัวเป็นอันดับแรก โดยการประมวลผลทั้งหมดอยู่ภายในเครื่อง

ฟีเจอร์การแก้ไขและสถานะการพัฒนา

  • การรองรับตัวพิมพ์

    • รองรับข้อความสองทิศทางอย่างครบถ้วน
    • จัดการระบบอักษรที่ซับซ้อนได้
    • รองรับ cross-format shaping สำหรับอักษรเชื่อมต่ออย่าง Arabic

  • เครื่องมือแก้ไขเวกเตอร์

    • มีมุมมองต้นไม้องค์ประกอบแบบลากแล้ววาง
    • ควบคุมพาธได้อย่างละเอียดผ่านระบบ transform ครบชุด รวมถึงการเอียง การหมุน และการปรับขนาด
    • มีแปรงระบายสีพร้อมโหมดลบที่ทรงพลัง

  • โปรเจกต์ของนักพัฒนาเดี่ยว

    • ตอนแรกเริ่มจากโปรเจกต์เสริมแบบรวดเร็ว แต่ด้วยความซับซ้อนของกราฟิกเวกเตอร์จึงใช้เวลาดำเนินการ 5 ปี
    • รากฐานหลักเสร็จสมบูรณ์แล้ว และ core engine อยู่ในสถานะเสถียร
    • ฟีเจอร์ถัดไปที่กำลังเตรียมอยู่ ได้แก่ สีแบบโกลบอล (global colors), ความหนาเส้นแบบไดนามิก (dynamic stroke widths), ฟอนต์แบบแปรผัน (variable fonts) เป็นต้น

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-05-11
ความคิดเห็นบน Hacker News

  • เจ๋งดี โปรเจกต์เสริมของผมคือ ไลบรารีเรนเดอร์ SVG ด้วย C++ แต่หาโปรแกรมแก้ไข SVG ดี ๆ ยากมาก
    ปกติก็จะทำงานใน Illustrator แล้วค่อยจัดระเบียบมาร์กอัปที่สร้างออกมา หรือไม่ก็กลับไปใช้ตัวแก้ไขแบบข้อความอย่าง https://www.svgviewer.dev/
    UX ขัดเกลามาค่อนข้างดี และตอนนี้ก็รองรับฟีเจอร์มากกว่าเครื่องมืออื่น ๆ ที่ผมเคยลองหาแล้วด้วย อ้างอิงไว้ โปรเจกต์ของผมคือ https://github.com/jwmcglynn/donner และต้นแบบ “ตัวแก้ไข” บนเว็บ (ตอนนี้แก้ไขได้เฉพาะแบบอิงโค้ด) อยู่ที่ https://jwmcglynn.github.io/donner-editor/
    SVG มีศักยภาพสูง แต่ได้รับผลกระทบจากการที่เครื่องมือไม่ค่อยดี เลยดีใจที่เห็นความพยายามใหม่ ๆ ในด้านนี้

    • Inkscape มีปัญหาอะไรเหรอ? มีบั๊กอยู่บ้าง แต่ที่เหลือก็ทำงานได้ค่อนข้างดี

  • เป็นจุดเริ่มต้นที่ดี มีฟีเจอร์ชัดเจนบางอย่างที่รู้สึกว่ายังขาดอยู่
    เครื่องมือโหนดควรพยายาม snap โหนดเริ่ม/จบเข้าหากันเวลาแก้ไข และตอนสร้างใหม่ โดยเฉพาะในเครื่องมือดินสอ อาจตั้งระยะ snap ให้กว้างขึ้นได้
    วิธีแบบดึง/ดันเพื่อเปลี่ยนรูปทรงสไตล์ Flash/Futurewave SmartSketch ของ Wick Editor น่าจะเหมาะกับมือถือมากกว่าเครื่องมือโหนดสำหรับแก้ไขมาก
    ถ้าการทำมุมมนในรูปหลายเหลี่ยมยังใช้ไม่ได้ ก็ควรซ่อนหรือปิดใช้งานไปก่อน

  • อยากให้ Karbon ของ KDE ออกมาเป็นแบบนี้ เป็น ตัวแก้ไข SVG ที่เป็นมิตร แต่เร็วและทรงพลัง
    ถ้าเป็นไปได้ อยากให้มีฟีเจอร์แบบใน SVG Path Editor0 ด้วย เช่น การเปลี่ยนพิกัดแบบ absolute เป็น relative หรือการแก้ไขเส้นตรงและเส้นโค้งของแต่ละ path แยกกัน ฟีเจอร์พวกนี้ผมหาไม่เจอในตัวแก้ไขอื่น
    อีกฟีเจอร์ที่ถ้ามีก็ยอดเยี่ยม แต่คงงานใหญ่มากหรืออาจกลายเป็นโปรเจกต์แยกต่างหาก คือ แอนิเมชัน

    • มีหลายโปรเจกต์ที่ชื่อ “SVG Path Editor” แต่ตัวนี้เป็นตัวที่พัฒนามากที่สุดและใช้งานได้ดีที่สุดเท่าที่ผมเคยเห็น

  • ดูดีนะ ไม่ได้จะวิจารณ์เสีย ๆ หาย ๆ แต่ผมคิดมาตลอดว่าในตัวแก้ไข ตัว SVG เองเป็นระดับ abstraction ที่ไม่ถูกต้อง สิ่งที่ต้องการไม่ใช่ตัวแก้ไข SVG แต่เป็นโปรแกรมวาดเวกเตอร์
    แน่นอนว่าควรเรนเดอร์ออกมาเป็น SVG ที่ปรับแต่งมาอย่างดี แต่ถ้าสร้าง UI/UX โดยยึดแนวคิดของ SVG อย่าง path, clip path เป็นศูนย์กลาง มันไม่เป็นมิตรกับผู้ใช้ปลายทาง ตรงนี้แหละที่ผมหงุดหงิดกับ Inkscape อยู่เสมอ
    ฟีเจอร์ที่ทรงพลังจริง ๆ น่าจะเป็นการใส่สิ่งแบบ modifier ของ Blender (array, mirror ฯลฯ) เข้าไปในตัวแก้ไขเวกเตอร์ เพื่อให้ทำ การแก้ไขแบบไม่ทำลายต้นฉบับ ได้

    • จริง ๆ แล้วนั่นคือทิศทางของเครื่องมือนี้ มีโมเดลวัตถุภายในอยู่ แต่ตอนนี้การแมปจาก SVG ไปยังโมเดลภายในยังเกือบ 1:1
      ข้อยกเว้นแรกคือ clip path ซึ่งใน Hyvector จะมองเป็น path ที่มีเส้นขอบและการเติมสี รวมถึงคอนเทนต์ที่ถูกตัดออกนอก path นั้น การจัดการ clip path ใน SVG ค่อนข้างยุ่งยากและไม่ค่อยเป็นธรรมชาติ
      ถ้าพัฒนาต่อไปได้ ฟีเจอร์อย่างการทำมุมมนของ path, การทำ boolean แบบไม่ทำลายต้นฉบับ, ความกว้างเส้นขอบแบบแปรผัน, การเติมสีหลายชั้น, การบิดรูป น่าจะตามมา
      อย่างไรก็ตาม อยากให้รูปแบบส่งออกยังคงเป็น SVG เพราะมันดีมากสำหรับเว็บและสามารถจัดสไตล์ด้วย CSS ได้ ดังนั้นเอฟเฟกต์ต่าง ๆ ต้องส่งออกเป็น SVG จริงได้ และจะพยายามเลี่ยงวิธีแบบบางตัวแก้ไขที่เวลา export เป็น SVG แล้วเอาบิตแมปปลอมยัดไว้ใน SVG เช่น conic gradient จะยังไม่มีจนกว่า SVG จะรองรับสักวันหนึ่ง
    • LPE ของ Inkscape ก็คือสิ่งนั้นพอดี เป็น modifier ของ path แบบไม่ทำลายต้นฉบับ ส่วนตัวแก้ไข Graphite.rs ในบางแง่ก็ให้ความสำคัญกับเอฟเฟกต์แบบไม่ทำลายต้นฉบับมากกว่า

  • ผมพยายามแก้ไขไอคอนนี้เพื่อวางลูกศรไว้ตรงกลางวงกลม แต่เพราะ มาสก์ไม่ถูกตรวจจับอย่างถูกต้อง เลยเห็นแค่วงกลมสีดำ
    http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
    height="20" viewBox="0 0 20 20" stroke-width="2" stroke="black">

    • ตามที่เขียนไว้ข้างบน มาสก์และฟิลเตอร์ ยังไม่รองรับ
      สำหรับไอคอนนี้ clip path อาจเหมาะกว่ามาสก์ ถ้าอยากสร้างไอคอนรูปร่างแบบเดียวกัน ก็เอาองค์ประกอบในมาสก์มาวางใน Hyvector แล้วทำงานต่อได้

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

  • ชอบ UX มาก ใช้ได้ดีมากแม้บน แท็บเล็ต Android ที่รองรับ Wacom
    ไม่แน่ใจว่าวิธีแก้ไข spline ที่ให้ลากจุดใดก็ได้บนเส้นแทนการปรับ handle แต่ละอันนั้นคิดขึ้นเองหรือเอามาจากที่อื่น แต่ชอบมากจริง ๆ
    เห็นแค่ว่าการเลื่อนด้วยการแตะใน tree ทางซ้ายไม่ทำงาน นอกนั้นลื่นมาก อยากรู้ว่าทำคีย์ลัดไว้ด้วยหรือยัง

    • การลากเส้นโค้งทำได้ง่ายกว่าที่คิด ผมคิดว่าได้ไอเดียการทำมาจากบทสนทนาใน Google Forum ที่เก่ามาก ๆ
      การกด Shift ค้างไว้ระหว่างลากเพื่อรักษาทิศทางของ handle ก็ทำงานด้วย
      tree ทางซ้ายทำให้ลงตัวกับทุกอุปกรณ์ได้ยาก ต้องรองรับทั้งคลิก, แตะเพื่อคลิก, ลากแล้ววาง, ปัดเพื่อเลื่อน, แตะเพื่อเลื่อน ฯลฯ และในขณะเดียวกันก็ต้องทำงานเหมือนรองรับองค์ประกอบหลายร้อยรายการ ยังมีปัญหาอย่างการปัดเลื่อนบน iOS กับอาการกระตุกเล็กน้อย แต่ใส่ไว้ในรายการแล้ว
      คีย์ลัดมีใช้บนอุปกรณ์ที่ไม่ใช่มือถือแล้ว ถ้าเปิดเมนูจากแถบเมนู จะเห็นคีย์ลัดอยู่ด้านขวาของรายการเมนู

  • ผมหาวิธีใช้ไม่เจอ สร้างเส้นตรงขึ้นมาได้ แต่หาวิธีย้ายหรือปรับขนาดไม่เจอ แม้จะมี handle สำหรับลากปรากฏขึ้น
    ก็ไม่รู้ว่าจะสร้างรูปร่างอื่นอย่างสี่เหลี่ยมหรือวงกลมได้อย่างไร ลองกดปุ่มที่เห็นแทบทั้งหมดหลายลำดับอยู่ประมาณยี่สิบครั้ง แต่ส่วนใหญ่ไม่มีอะไรเกิดขึ้น

    • เครื่องมือรูปร่างอยู่บนแถบเครื่องมือหลัก ระหว่างเครื่องมือข้อความกับเครื่องมือรูปภาพ ตัวเลือกรูปร่างสองอันแรกคือสี่เหลี่ยมกับวงกลม
    • แอปแบบนี้ควรมี คำใบ้ เกี่ยวกับวิธีใช้เครื่องมือเยอะ ๆ และให้ปิดได้ภายหลัง จะช่วยได้มาก

  • เจ๋งมาก ขอให้โปรเจกต์นี้ประสบความสำเร็จ
    ถ้าจะให้ฟีดแบ็กจากมุมมอง first impression ผมคิดว่าเวลาเริ่มต้น ควรเปิดเอกสารเปล่าแบบไม่มีชื่อที่พร้อมให้ลองเล่นได้ทันที และเลือกเครื่องมือสนุก ๆ อย่างดินสอ Bezier ไว้เป็นเครื่องมือเริ่มต้นจะเป็นอย่างไร
    ผมมีแรงจูงใจพอที่จะกดไปกดมา จนรู้ว่าไม่มีเอกสารเปิดอยู่ แล้วค่อยสร้างเอกสารใหม่ เปลี่ยนเครื่องมือ และเริ่มลองเล่น แต่ผู้ใช้จำนวนมากจะไม่ทำแบบนั้น โดยเฉพาะเรื่องที่ไม่มีเอกสารเปิดอยู่น่าจะเป็นอุปสรรคใหญ่ที่สุด
    เป็นเรื่องที่ดูเล็ก แต่ถ้าทำ canvas เริ่มต้นให้ใหญ่ขึ้นอีกนิดก็น่าจะดี เช่น สี่เหลี่ยมจัตุรัส 512 หรือ 500 เพราะเวลาที่คนจะให้จริง ๆ ตอนลองเครื่องมือใหม่มีแค่ 10–20 วินาทีแรก เท่านั้น ถ้าดึงเขาไว้ในช่วงนั้นไม่ได้ เขาก็จะออกไป และจะเสียผู้ใช้จำนวนมาก
    ดูดีมาก และขอบคุณที่เอามาแชร์

    • เห็นด้วย ดูเจ๋งดี แต่ผิดหวังตอนกดดินสอแล้วพยายามขีดเขียนทันทีแต่ไม่มีอะไรเกิดขึ้น
      แม้สร้างเอกสารใหม่แล้วลองใช้ดินสอ ก็ยังไม่มีอะไรเกิดขึ้น สุดท้ายก็หาวิธีใช้ไม่เจอ
      ใช้เครื่องมือ Bezier เพิ่มโหนดได้สองสามอัน แต่จัดการมันด้วยเครื่องมือไหนก็ไม่ได้ หรือว่าการลากบน Chrome/Windows พังไปเลยกันนะ?

  • ดี และเห็นศักยภาพเยอะ ฟีดแบ็กง่าย ๆ คือการวาง แถบเครื่องมือลอย ไว้ด้านบนทำให้เสียสมาธิและกินพื้นที่วาดภาพจริง
    น่าจะทำเป็นแถบเครื่องมือปกติ หรือวางไว้ด้านล่างของ canvas จะดีกว่า หรือไม่ก็ทำให้ย้ายตำแหน่งหรือพับเก็บได้

    • แถบเครื่องมือถูกออกแบบใหม่และย้ายตำแหน่งมาหลายรอบแล้ว ถ้าหน้าต่างแคบเกินไปก็จะพับอยู่แล้ว ดังนั้นการเพิ่มปุ่มพับน่าจะง่ายมาก