SVG Viewer - เครื่องมือดู แก้ไข และปรับแต่งไฟล์ SVG

 (svgviewer.dev)
4 คะแนน โดย GN⁺ 2024-04-28 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • SVG Viewer เป็นเว็บเครื่องมือที่ให้คุณอัปโหลด SVG แล้วจัดการ พรีวิวและแก้ไขโค้ด ได้ในหน้าจอเดียว
  • สามารถทำ งานแก้ไขพื้นฐาน เช่น หมุน, พลิกซ้ายขวา·บนล่าง, เปลี่ยนขนาด, จัดระเบียบโค้ด ได้โดยตรงในเบราว์เซอร์
  • ตัวอย่างการ Optimize แสดงผลลัพธ์ที่ลดขนาด SVG จาก 578 bytes เหลือ 493 bytes ลดลง -15%
  • นอกจากดาวน์โหลด SVG แล้ว ยังมีเส้นทางแปลงเป็น React, React Native, PNG, Data URI ให้ด้วย
  • มีรายการไอคอนและการทำงานอัปโหลด·คัดลอก·ดาวน์โหลด·แชร์อยู่ในหน้าจอเดียว ทำให้ตรวจสอบ SVG ไปจนถึงนำกลับมาใช้ซ้ำได้อย่างรวดเร็ว

การแก้ไขและ Optimize SVG

  • SVG Viewer เป็นเว็บเครื่องมือสำหรับ ดู, แก้ไข และ Optimize ไฟล์ SVG
  • หน้าจอแก้ไขแสดงโค้ด SVG และพรีวิวคู่กัน ทำให้ตรวจสอบผลจากการแก้โค้ดได้ทันที

  • การจัดการที่มีให้

    • Rotate
    • Flip Y
    • Flip X
    • Change dimensions
    • Optimize
    • Prettify
    • Clear
    • SVG ตัวอย่างจะแสดงในขนาด 400px x 400px และมีโค้ด <svg> แสดงในพื้นที่แก้ไขโค้ด
    • สถานะการ Optimize แสดงเป็น 578 bytes → 493 bytes, -15%

การนำเข้าและส่งออก

  • การทำงานกับไฟล์รองรับ Upload, Copy, Download, Share
  • ปลายทางการส่งออกหรือแปลงไฟล์:
  • ในหน้าจอมีรายการไอคอน SVG หลายรายการ เช่น eye-close, gps, minus, lock-line, email, battery, document, comment, home, search, wifi และมี Load More SVGs แสดงอยู่
  • ยังมีลิงก์ Feedback, Terms of Use และ Privacy Policy ให้ด้วย

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

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

 
GN⁺ 2024-04-28
ความคิดเห็นบน Hacker News

  • เครื่องมือ SVG บนเว็บที่ใช้บ่อยคือ https://jakearchibald.github.io/svgomg/ เป็น เครื่องมือเพิ่มประสิทธิภาพ SVG ที่ปรับการตั้งค่าได้ละเอียดมาก

    • ใช้ https://yqnn.github.io/svg-path-editor/ บ่อยขึ้นเรื่อย ๆ ถ้า Inkscape จัดการภายใน path ได้ตรงไปตรงมาแบบนี้ก็คงดี และงานอย่าง การแปลงค่าสัมบูรณ์/ค่าสัมพัทธ์ ก็สะดวกเป็นพิเศษ
    • ถ้าจะเพิ่มเครื่องมือ SVG ที่ชอบอีกตัว ก็มี https://svgcrop.com/ ซึ่งเป็น เครื่องมือตัด SVG เมื่อมีพื้นที่ว่างกว้าง ๆ รอบ SVG หรือมีองค์ประกอบแปลก ๆ ที่ทำให้จัดกึ่งกลางยาก มันจะตัดตามองค์ประกอบที่มองเห็น
    • เครื่องมือนี้ก็ดี: https://www.softr.io/tools/svg-shape-generator
    • ใช้เครื่องมือนี้ตอนเตรียมชุดสัญลักษณ์ SVG: https://daveknispel.github.io/svg2use/
    • SVGOMG ใช้ได้ที่นี่ด้วย: https://svgomg.net/

  • ไม่คิดเลยว่าจะเป็นประเด็นบน Hacker News ช่วงสุดสัปดาห์แบบนี้ เราเป็นบริษัทเล็ก ๆ ใน Vancouver, BC และทำเครื่องมือซอฟต์แวร์: https://www.checkersoftware.ca/
    ถ้ามีคำถามก็บอกได้เลย

    • อยากรู้ว่ามีแผนจะให้เว็บแอปนี้เป็นแบบ อิงโฆษณา ต่อไปหรือไม่ หรือในอนาคตอันใกล้จะมี เวอร์ชัน pro แบบเสียเงินพร้อมฟีเจอร์เพิ่มเติมหรือเปล่า
    • ตัวอย่างส่วนใหญ่มี path ที่เป็นตัวเลขยาว ๆ อยู่มาก ทำให้ดูทันทีได้ยากว่า path ไหนตรงกับรูปทรงใดในภาพ
      อยากรู้ว่าจะทำให้เมื่อเอาเคอร์เซอร์ไปวางบนโค้ดในเอดิเตอร์แล้ว สีหรือเส้นขอบของ path นั้นเปลี่ยนชั่วคราว และทำงานคล้ายกันกับการเลือกข้อความได้ไหม
    • ไม่ใช่นักพัฒนา React เลยไม่ค่อยรู้ จึงอยากถามว่า ฟีเจอร์ส่งออก SVG เป็น React มีไว้ใช้ทำอะไร
      มีเหตุผลอะไรที่นักพัฒนา React จะใช้ฟีเจอร์ส่งออกเป็น React แทนการใส่ SVG แบบ inline ไหม?
    • ใช้เครื่องมือนี้ตลอดเวลาทำงานกับไอคอน

  • ลองเล่นดูนิดหน่อยแล้ว ดูเหมือนจะมีประโยชน์มากเวลาสักวันต้องแก้ปัญหาจุกจิกที่เจอกับ SVG ที่ใช้อยู่ UI เข้าใจง่าย และ feedback ต่อการเปลี่ยนแปลงก็ชัดเจน เลย bookmark ไว้ทันที
    SVG บางไฟล์มีปัญหาว่าระหว่างโหลด มันขยายหน้าให้กว้างขึ้นชั่ววูบหนึ่ง แล้วอีกเสี้ยววินาทีก็เข้าที่ตามขนาดที่ตั้งใจไว้ ลองปรับ viewBox, width, height แล้วแต่ยังแก้ไม่ได้ ควรทำอย่างไรเพื่อลด อาการยืดตอนเริ่มต้น นี้?

    • อาการ SVG กระพริบก่อนสไตล์ถูกนำมาใช้แก้ได้ด้วยการกำหนด viewBox (viewBox) และ viewport (width, height) ให้ชัดเจน: https://www.sarasoueidan.com/blog/svg-style-inheritance-and-...
    • อยากรู้ว่าสามารถแปลง SVG เป็นฟอร์แมตอื่นแบบทันทีได้เร็วกว่าที่เบราว์เซอร์ทำหรือไม่ จากมุมมองคนไม่เชี่ยวชาญ ฟังดูเหมือนเป็นการ initialize bitmap ด้วยขนาดสูงสุดแล้ว parse SVG ลงไปในนั้น

  • เป็นเครื่องมือที่ดีจริง ๆ รวมฟีเจอร์ไว้ในที่เดียวเยอะมาก ปกติใช้ phpStorm ซึ่งไม่มีฟีเจอร์ optimize แบบ SVGOMG แต่จัดระเบียบโค้ดได้ดี
    ถ้ามีตัวอย่างที่ดีกว่านี้สำหรับเริ่มแก้ไขก็คงดี และอยากให้ใช้ รูปทรงพื้นฐาน อื่น ๆ ไม่ใช่แค่ path อย่างเดียว ถ้ามีกริดก็น่าจะมีประโยชน์
    ตัวอย่างเช่น ไอคอนค้นหาสามารถสร้างด้วย circle และ line ที่ตั้ง viewBox ไว้ดี ๆ ได้ ถ้าวางจุดกำเนิดไว้ที่ศูนย์กลางวงกลม ก็ใช้แค่รัศมีโดยไม่ต้องมีค่า x, y และสามารถ optimize ได้อย่างไม่น่าเชื่อในลักษณะนี้
    ไอคอนค้นหาทั่วไปมักถูกบดรวมเป็น path ที่มี ตัวเลขแบบ NASA ทศนิยมหกตำแหน่งนับร้อยตัว ทั้งที่จริง ๆ แค่วงกลมหนึ่งวงที่นิยามด้วยจำนวนเต็มก็พอแล้ว ไม่ต้องใช้เศษขยะที่ Adobe Illustrator export ออกมา
    SVG เป็นสื่อเชิงศิลปะ และผมชอบมันมากจริง ๆ แต่ดูเหมือนทั้งศิลปินและนักพัฒนาจะไม่ได้มองแบบนั้น ดังนั้น SVG ส่วนใหญ่จึงไม่ค่อยสะท้อนจิตวิญญาณของสิ่งที่มันทำได้ และไม่ค่อยแสดงให้เห็นว่ามันเป็นมากกว่าแค่ฟอร์แมตไฟล์ธรรมดา

  • SVG ทรงพลังมากจริง ๆ สัปดาห์ที่แล้วมีปัญหาภาพโปร่งใสแบบ parallax ที่ใส่ฟิลเตอร์ drop-shadow แสดงผลเละบน Mac Safari และ iOS วิธีแก้คือสร้างเส้นขอบภาพเป็น SVG แล้วใส่เงาด้วยฟิลเตอร์ SVG ที่มี feGaussianBlur
    ยังรู้สึกเหมือนเพิ่งแตะผิวเผินของสิ่งที่ SVG ทำได้เท่านั้น ที่ผ่านมาใช้ svgomg สำหรับ optimization แต่เครื่องมือนี้ดูเหมือนมีฟีเจอร์ที่เป็นประโยชน์มากกว่าอยู่พอสมควร

    • เริ่มจาก Qt/QML desktop frontend แล้วก็เริ่มคิดว่าจะสร้างได้มากแค่ไหนด้วยองค์ประกอบแบบ SVG image map
      พอลองเปิด Jupyter ร่วมกับ data connection และเครื่องมือ SVG ก็เป็นประสบการณ์ที่เปิดหูเปิดตามาก
    • แม้ในทางปฏิบัติหรือทางการเมืองอาจเป็นไปไม่ได้ แต่ถ้า DWG, DXF, DGN ถูกแทนที่ด้วย SVG ได้จริง ๆ ก็คงดีมาก มันไม่สมเหตุสมผลเลยที่แบบ 2D ในอุตสาหกรรม AEC ใช้งานได้ไม่ดีในโปรแกรมส่วนใหญ่

  • ใช้ Inkscape และถ้ายังไม่พอก็ใช้ Xara Xtreme หรือเวอร์ชันฟรีเก่าสำหรับ Linux
    แต่การ optimize SVG หมายความว่าอะไร?

    • คือการลบข้อมูลที่ไม่จำเป็นออก Inkscape เพิ่มอะไรหลายอย่างเข้ามาเยอะ เช่น ลอง export SVG ง่าย ๆ จาก Figma แล้วเปิดและบันทึกด้วย Inkscape จากนั้นเปรียบเทียบดู จะเห็นความแตกต่าง

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

  • หลายปีก่อนซื้อ BoxySVG บน Mac ในราคา 10 ดอลลาร์ เป็นเครื่องมือขนาดเล็กที่เชื่อถือได้
    https://boxy-svg.com/

    • ตอนนี้ดูเหมือนจะเปลี่ยนไปเป็น โมเดล subscription แล้ว ต้องใช้แค่ปีละไม่กี่ครั้ง ถ้า 10 ดอลลาร์ก็อยากซื้อเก็บไว้ใช้ต่อไปมากกว่า Monodraw เป็นแบบนั้น ซื้อครั้งเดียวเก็บไว้ ใช้เป็นครั้งคราว แต่ยังเป็นเครื่องมือที่น่าพอใจอยู่
    • Boxy แนะนำได้ในฐานะ เอดิเตอร์ SVG เบา ๆ ที่เร็วสำหรับแก้คร่าว ๆ

  • เป็นทั้งทรัพยากรและเครื่องมือที่ชอบที่สุดเวลาจัดการ SVG ค้นหามาเยอะแล้วแต่ยังไม่เจออะไรที่ดีกว่านี้