SVG Viewer - 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
  • SVG Viewer là một công cụ web cho phép tải SVG lên và xử lý xem trước cùng chỉnh sửa mã trên cùng một màn hình
  • Có thể thực hiện ngay trong trình duyệt các thao tác chỉnh sửa cơ bản như xoay, lật trái/phải·trên/dưới, thay đổi kích thước và dọn dẹp mã
  • Ví dụ tối ưu hóa cho thấy kích thước SVG được giảm từ 578 bytes xuống 493 bytes, tương đương -15%
  • Ngoài tải xuống SVG, công cụ còn cung cấp các hướng chuyển đổi sang React, React Native, PNG, Data URI
  • Danh sách biểu tượng cùng các thao tác tải lên·sao chép·tải xuống·chia sẻ nằm trên cùng một màn hình, giúp đi nhanh từ việc kiểm tra SVG đến tái sử dụng

Chỉnh sửa và tối ưu hóa SVG

  • SVG Viewer là công cụ web để xem, chỉnh sửa và tối ưu hóa tệp SVG
  • Màn hình chỉnh sửa hiển thị đồng thời mã SVG và phần xem trước, giúp kiểm tra ngay kết quả sau khi sửa mã

  • Các thao tác được cung cấp

    • Rotate
    • Flip Y
    • Flip X
    • Change dimensions
    • Optimize
    • Prettify
    • Clear
    • SVG mẫu được hiển thị ở kích thước 400px x 400px, và vùng chỉnh sửa mã hiển thị mã <svg>
    • Trạng thái tối ưu hóa được hiển thị là 578 bytes → 493 bytes, -15%

Nhập và xuất

  • Các thao tác với tệp cung cấp Upload, Copy, Download, Share
  • Đích xuất hoặc chuyển đổi:
  • Trên màn hình hiển thị nhiều mục biểu tượng SVG như eye-close, gps, minus, lock-line, email, battery, document, comment, home, search, wifi cùng với Load More SVGs
  • Công cụ cũng cung cấp các liên kết feedback, terms of service và privacy policy

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-04-28
Ý kiến trên Hacker News

  • Có một công cụ SVG nền web tôi hay dùng là https://jakearchibald.github.io/svgomg/. Đây là công cụ tối ưu hóa SVG cho phép tinh chỉnh thiết lập rất chi tiết

  • Tôi không ngờ cuối tuần mà thứ này lại gây chú ý trên Hacker News như vậy. Chúng tôi là một công ty nhỏ ở Vancouver, BC và làm công cụ phần mềm: https://www.checkersoftware.ca/
    Nếu có câu hỏi gì cứ cho tôi biết

    • Tôi muốn hỏi liệu các bạn có định tiếp tục duy trì webapp này theo mô hình dựa trên quảng cáo, hay trong tương lai gần sẽ có phiên bản pro trả phí với tính năng bổ sung
    • Hầu hết ví dụ đều có nhiều path chứa chuỗi số rất dài nên khó nhận ra ngay path nào tương ứng với hình nào trong ảnh.
      Tôi muốn hỏi liệu trong trình chỉnh sửa có thể làm cho khi rê chuột lên đoạn mã thì màu hoặc đường viền của đường dẫn đó tạm thời thay đổi, và với việc chọn văn bản cũng hoạt động tương tự hay không
    • Tôi không phải lập trình viên React nên hỏi vì không rõ, tính năng xuất SVG sang React dùng để làm gì.
      Có lý do nào khiến lập trình viên React dùng tính năng xuất sang React thay vì nhúng SVG inline không?
    • Tôi luôn dùng công cụ này khi làm icon

  • Tôi mới nghịch thử một chút, nhưng nó có vẻ sẽ rất hữu ích khi một ngày nào đó tôi muốn xử lý những vấn đề lặt vặt mà tôi thường gặp với SVG. UI rất dễ hiểu và phản hồi về thay đổi cũng rõ ràng nên tôi đã bookmark ngay.
    Có một số SVG khi tải lên thì thoáng chốc làm trang bị kéo rộng ra, rồi chỉ một lát sau mới về đúng kích thước mong muốn. Tôi đã thử chỉnh viewBox, width, height nhưng chưa giải quyết được; phải làm sao để giảm hiện tượng bị kéo giãn lúc đầu này?

    • Hiện tượng SVG chớp lên trước khi style được áp dụng có thể sửa bằng cách chỉ định rõ viewBox (viewBox) và viewport (width, height): https://www.sarasoueidan.com/blog/svg-style-inheritance-and-...
    • Tôi tò mò không biết có thể chuyển SVG sang định dạng khác ngay tại chỗ nhanh hơn cả trình duyệt hay không. Từ góc nhìn người không chuyên, nghe như kiểu khởi tạo một bitmap ở kích thước tối đa rồi parse SVG để vẽ vào đó

  • Đây là một công cụ rất tốt. Có nhiều tính năng gom lại trong một chỗ. Bình thường tôi dùng phpStorm, nó không có tối ưu hóa kiểu SVGOMG nhưng dọn dẹp mã khá ổn.
    Tôi muốn có ví dụ tốt hơn để bắt đầu chỉnh sửa, và sẽ hay hơn nếu dùng được cả các hình cơ bản khác chứ không chỉ path. Có lưới nữa thì sẽ hữu ích.
    Ví dụ, biểu tượng tìm kiếm có thể tạo bằng circle và line với viewBox được thiết lập chuẩn. Nếu đặt gốc tọa độ ở tâm hình tròn thì chỉ cần bán kính mà không cần giá trị x, y, kiểu như vậy có thể tối ưu đến mức vô lý.
    Một icon tìm kiếm thông thường lại bị nghiền thành path chứa hàng trăm con số kiểu NASA với sáu chữ số thập phân. Thực ra chỉ cần một hình tròn được định nghĩa bằng số nguyên là đủ, chứ không cần đống tạp nham mà Adobe Illustrator xuất ra.
    SVG là một phương tiện nghệ thuật và tôi thực sự rất thích nó. Nhưng có vẻ cả nghệ sĩ lẫn lập trình viên đều không nhìn nó như vậy. Vì thế đa số SVG không thật sự thể hiện được tinh thần của những gì nó có thể làm, và cũng không cho thấy rõ rằng nó hơn cả một định dạng tệp đơn thuần

  • SVG thực sự rất mạnh. Tuần trước tôi gặp vấn đề với ảnh trong suốt parallax có filter drop-shadow, hiển thị rất tệ trên Mac Safari và iOS, và cách giải quyết là tạo viền ngoài của ảnh bằng SVG rồi dùng filter SVG với feGaussianBlur để đổ bóng.
    Tôi vẫn có cảm giác mình mới chỉ chạm vào bề mặt những gì SVG có thể làm. Tôi vẫn dùng svgomg để tối ưu, nhưng công cụ này có vẻ có thêm khá nhiều tính năng hữu ích

    • Tôi bắt đầu với frontend desktop Qt/QML, rồi dần tự hỏi có thể xây được bao nhiêu thứ chỉ bằng các cấu trúc như imagemap SVG.
      Mở Jupyter cùng với kết nối dữ liệu và công cụ SVG là một trải nghiệm khá khai sáng
    • Về mặt thực tế hay chính trị thì chắc không khả thi, nhưng sẽ thật tuyệt nếu DWG, DXF, DGN được SVG thay thế. Việc bản vẽ 2D trong ngành AEC không dùng ổn trên phần lớn chương trình là điều vô lý

  • Tôi dùng Inkscape, thiếu gì thì bổ sung bằng Xara Xtreme hoặc bản miễn phí cũ trên Linux.
    Nhưng tối ưu hóa SVG nghĩa là gì?

    • Là loại bỏ thông tin không cần thiết. Inkscape thêm vào khá nhiều thứ. Ví dụ, hãy xuất một SVG đơn giản từ Figma, mở bằng Inkscape rồi lưu lại, sau đó so sánh sẽ thấy khác biệt

  • Tôi thực sự thích trang này và đã dùng nó không đếm xuể. Nó cực kỳ hữu ích để hiểu các phần tử SVG kỳ lạ và nhanh chóng xem kết quả

  • Vài năm trước tôi mua BoxySVG trên Mac với giá 10 đô, đó là một công cụ nhỏ gọn và đáng tin cậy.
    https://boxy-svg.com/

    • Có vẻ giờ họ đã chuyển sang mô hình đăng ký. Tôi chỉ cần nó vài lần mỗi năm nên với 10 đô thì tôi thích kiểu mua một lần rồi giữ luôn hơn. Monodraw cũng là kiểu tôi mua một lần để đó, thi thoảng dùng nhưng vẫn thấy đáng giá nên rất thích
    • Boxy có thể được khuyến nghị như một trình chỉnh sửa SVG nhẹ nhanh và tiện để chỉnh sửa qua loa

  • Đây là tài nguyên và công cụ tôi thích nhất khi đụng tới SVG. Tôi đã tìm rất nhiều nhưng chưa thấy thứ gì tốt hơn