Trình xem SVG - Công cụ xem, chỉnh sửa và tối ưu hóa tệp SVG

 (svgviewer.dev)
4 điểm bởi GN⁺ 2024-04-28 | 1 bình luận | Chia sẻ qua WhatsApp

Phân tích tệp ảnh SVG

  • Tệp ảnh SVG có kích thước rộng 400px, cao 400px
  • Cấu trúc cơ bản:
    • Ngoài cùng là một hình chữ nhật có width="124", height="124"
    • Bo góc bằng thuộc tính rx="24"
    • Tô nền màu cam bằng thuộc tính fill="#F97316"
  • Các hình chính:
    • Hình đa giác màu trắng được vẽ bằng thẻ <path>
      • Thuộc tính d chứa thông tin tọa độ đường dẫn
      • Được tô màu trắng bằng fill="white"
    • Một hình tròn màu đen được vẽ bằng thẻ <circle>
      • Vị trí và kích thước được chỉ định bằng cx="63.2109" cy="37.5391" r="18.1641"
      • Được tô màu đen bằng fill="black"
    • Một hình chữ nhật bán trong suốt được vẽ xoay 45 độ bằng thẻ <rect>
      • Độ trong suốt được đặt bằng opacity="0.4"
      • Được tô màu cam nhạt bằng fill="#FDBA74"
      • Biến đổi xoay bằng transform="rotate(-45 81.1328 80.7198)"
  • Tối ưu kích thước tệp:
    • Giảm 15%, từ 578 bytes ban đầu xuống còn 493 bytes

Ý kiến của GN⁺

  • SVG là định dạng đồ họa vector nên có ưu điểm là vẫn sắc nét khi phóng to/thu nhỏ mà không bị vỡ hình. Ngược lại, so với ảnh bitmap như JPEG, PNG thì nếu độ phức tạp cao, kích thước tệp có thể lớn hơn.
  • Kích thước tệp nhỏ nên có vẻ sẽ tải nhanh trên web. Tuy nhiên, nếu là hình quá phức tạp thì PNG lại có thể có lợi hơn.
  • Việc tận dụng nhiều tính năng như rx, circle, rotate để thể hiện cảm giác chiều sâu trong một thiết kế đơn giản là khá ấn tượng.
  • Sử dụng màu trắng và đen trên nền cam để tạo độ tương phản màu sắc, giúp tăng khả năng đọc.
  • Có vẻ được tạo ra để dùng làm biểu tượng, logo, v.v. Ý nghĩa hay công dụng của hình màu cam nhạt vẫn khiến người xem tò mò.

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-04-28
Ý kiến trên Hacker News
  • SVGOMG, một công cụ tối ưu hóa SVG, được giới thiệu như một công cụ SVG nền web hữu ích khác
  • Một công ty nhỏ có trụ sở tại Vancouver tên là Checker Software đã phát triển công cụ này cùng nhiều công cụ phần mềm khác
  • Giao diện dễ hiểu và cung cấp phản hồi rõ ràng về các thay đổi, nên có vẻ sẽ hữu ích để xử lý những vấn đề nhỏ phát sinh khi dùng SVG
    • Ví dụ như hiện tượng SVG bị phóng to rồi thu nhỏ lại trong chốc lát khi tải, khác với kích thước dự định
  • Có một lỗi(?) thú vị là tính năng zoom của canvas có thể tăng vô hạn
  • SVG là một công cụ rất mạnh; gần đây cũng có trường hợp dùng bộ lọc SVG và feGaussianBlur để giải quyết vấn đề render ảnh trong suốt parallax khi dùng filter: drop-shadow trên Safari và iOS
  • Trong bối cảnh đang cần nhiều công cụ tốt hơn cho SVG, mọi người nhìn chung hoan nghênh sự xuất hiện của công cụ này
  • Cũng có ý kiến cho biết khi tạo SVG từ văn bản, trình biên tập này không parse được nội dung sinh ra, nhưng trình xem SVG của CodeBeautify thì hoạt động tốt
  • Những công cụ nhỏ như thế này được đánh giá là rất phù hợp với tinh thần của Hacker News (HN)