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

 (svgviewer.dev)
4 คะแนน โดย GN⁺ 2024-04-28 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

การวิเคราะห์ไฟล์ภาพ SVG

  • ไฟล์ภาพ SVG ขนาดกว้าง 400px สูง 400px
  • โครงสร้างพื้นฐาน:
    • ด้านนอกสุดมีสี่เหลี่ยมผืนผ้าขนาด width="124", height="124" อยู่
    • ใช้คุณสมบัติ rx="24" เพื่อทำมุมโค้งมน
    • ใช้คุณสมบัติ fill="#F97316" เพื่อเติมพื้นหลังสีส้ม
  • รูปทรงหลัก:
    • วาดรูปหลายเหลี่ยมสีขาวด้วยแท็ก <path>
      • ในคุณสมบัติ d จะมีข้อมูลพิกัดของพาธ
      • เติมสีขาวด้วย fill="white"
    • วาดวงกลมสีดำด้วยแท็ก <circle>
      • กำหนดตำแหน่งและขนาดด้วย cx="63.2109" cy="37.5391" r="18.1641"
      • เติมสีดำด้วย fill="black"
    • วาดสี่เหลี่ยมผืนผ้าแบบกึ่งโปร่งใสที่หมุน 45 องศาด้วยแท็ก <rect>
      • ตั้งค่าความโปร่งใสด้วย opacity="0.4"
      • เติมด้วยสีส้มอ่อน fill="#FDBA74"
      • แปลงการหมุนด้วย transform="rotate(-45 81.1328 80.7198)"
  • การปรับขนาดไฟล์ให้เหมาะสม:
    • ลดลง 15% จากต้นฉบับ 578 bytes เหลือ 493 bytes

ความเห็นของ GN⁺

  • SVG เป็นฟอร์แมตกราฟิกแบบเวกเตอร์ จึงมีข้อดีคือขยายหรือย่อแล้วภาพยังคมชัดไม่แตก แต่เมื่อเทียบกับภาพบิตแมปอย่าง JPEG, PNG หากมีความซับซ้อนมาก ขนาดไฟล์ก็อาจใหญ่กว่าได้
  • ขนาดไฟล์ค่อนข้างเล็ก จึงน่าจะโหลดบนเว็บได้รวดเร็ว แต่ถ้าเป็นภาพที่ซับซ้อนมาก PNG อาจได้เปรียบกว่า
  • น่าประทับใจที่ใช้ฟีเจอร์ต่าง ๆ เช่น rx, circle, rotate เพื่อสร้างมิติภาพได้แม้จะดูเรียบง่าย
  • ใช้พื้นหลังสีส้มคู่กับสีขาวและสีดำเพื่อสร้างคอนทราสต์ของสี ทำให้อ่านหรือมองเห็นได้ชัดเจนขึ้น
  • ดูเหมือนถูกสร้างมาเพื่อใช้เป็นไอคอนหรือโลโก้ และชวนสงสัยว่ารูปทรงสีส้มอ่อนนั้นมีความหมายหรือหน้าที่อะไร

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

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

 
GN⁺ 2024-04-28
ความคิดเห็นบน Hacker News
  • SVGOMG ซึ่งเป็นเครื่องมือเพิ่มประสิทธิภาพ SVG ถูกแนะนำว่าเป็นอีกหนึ่งเครื่องมือ SVG แบบเว็บที่มีประโยชน์
  • บริษัทเล็ก ๆ จากแวนคูเวอร์ชื่อ Checker Software เป็นผู้พัฒนาเครื่องมือนี้รวมถึงเครื่องมือซอฟต์แวร์อื่น ๆ อีกหลายตัว
  • UI เข้าใจง่ายและให้ฟีดแบ็กต่อการเปลี่ยนแปลงได้อย่างชัดเจน จึงน่าจะมีประโยชน์ในการแก้ปัญหาเล็ก ๆ น้อย ๆ ที่เกิดขึ้นเวลาใช้งาน SVG
    • ตัวอย่างเช่น ปัญหาที่ SVG ขยายใหญ่เกินขนาดที่ตั้งใจไว้ชั่วขณะตอนโหลดแล้วค่อยย่อกลับ
  • มีบั๊ก(?) ที่น่าสนุกตรงฟังก์ชันซูมของแคนวาสสามารถซูมต่อไปได้แบบไม่สิ้นสุด
  • SVG เป็นเครื่องมือที่ทรงพลังมาก และมีตัวอย่างล่าสุดที่ใช้ SVG filter และ feGaussianBlur เพื่อแก้ปัญหาการเรนเดอร์ภาพโปร่งใสแบบ parallax ที่ใช้ filter: drop-shadow บน Safari และ iOS
  • ในช่วงที่ยังต้องการเครื่องมือสำหรับ SVG ที่มากขึ้นและดีกว่านี้ บรรยากาศโดยรวมคือยินดีต้อนรับการมาถึงของเครื่องมือนี้
  • มีความเห็นด้วยว่าเมื่อสร้าง SVG จากข้อความ เอดิเตอร์นี้ไม่สามารถพาร์สคอนเทนต์ที่สร้างขึ้นได้ แต่ SVG viewer ของ CodeBeautify ทำงานได้ดี
  • เครื่องมือเล็ก ๆ แบบนี้ถูกมองว่าสอดคล้องกับจิตวิญญาณของ Hacker News ได้เป็นอย่างดี