in

20 công cụ xử lý file SVG miễn phí

SVG đang trở nên phổ biến trong thiết kế web ngày nay và bạn có thể sử dụng các công cụ như Illustrator hoặc Inkscape để tạo đồ họa chuẩn file SVG.

Interactive SVG Coordinate System

Khi bạn làm việc với SVG, bạn không thể rời khỏi tọa độ của nó.

Đây là một công cụ tương tác tuyệt vời của Sara Souiden, để giúp bạn tìm hiểu cách hoạt động của tọa độ SVG. Sử dụng viewBox và preserveAspectRatio trên SVG, được hướng dẫn bởi các đường màu cam và màu tím và một thước đo tiện dụng, bạn có thể vừa chơi vừa tìm hiểu cách hoạt động của tọa độ SVG.

b64

b64 là một công cụ đơn giản để tối ưu hóa hình ảnh sau đó chuyển chúng sang định dạng base64. Bạn có thể thả hình ảnh SVG của mình (các định dạng khác như JPG và PNG cũng hoạt động) sau đó lấy CSS với hình nền base64.

SVGO

SVG được xuất có thể chứa thông tin không cần thiết, chúng có thể bị xóa mà không ảnh hưởng đến kết quả hiển thị. Nếu bạn muốn xóa các dữ liệu này, bạn có thể sử dụng SVGO.

Bạn có thể sử dụng SVGO qua dòng lệnh npm $[sudo] npm install -g svgo hoặc sử dụng phiên bản GUI cung cấp tính năng kéo và thả để xử lý tối ưu hóa SVG của bạn.

SVG OMG

SVG OMG biến dòng lệnh của SVGO (công cụ trước đó) thành phiên bản GUI trực quan và dễ sử dụng hơn.

Chỉ cần chuyển đổi các nút để kích hoạt hoặc hủy kích hoạt từng tính năng. Cuối cùng, bạn có thể lấy kết quả dưới dạng tệp hình ảnh và mã.

SVG Now

Khi bạn làm việc trên Illustrator, SVG được xuất chứa một số thông tin không cần thiết. Với công cụ này, bạn sẽ nhận được phiên bản SVG đã xuất được tối ưu hóa ngay từ không gian làm việc Illustrator của bạn. Công cụ này thêm một bảng điều khiển với một số tùy chọn để tối ưu hóa SVG.

SVG to PNG converter

Bạn muốn xuất tệp SVG sang dạng PNG mà không cần mở các ứng dụng như Illustrator để làm như vậy? Sử dụng công cụ này để nhận kết quả đầu ra hình ảnh ở định dạng PNG.

SVG Circus

Công cụ này cho phép bạn tạo bộ tải, con quay hoặc bất cứ thứ gì tương tự của riêng mình bằng cách sử dụng hoạt ảnh lặp lại. Đặt ‘Actor’, vị trí, kích thước, màu sắc và những thứ khác từ bảng điều khiển, sau đó xuất để nhận kết quả.

SVG Sprite

SVG Sprite là một module Node.js giúp tối ưu hóa một loạt các file SVG và biến chúng thành các kiểu sprite SVG.

Quasi

Với quasi, bạn có thể tạo hình ảnh Quasicrystal giống như những gì bạn thấy bên dưới.

Plain Pattern

Tạo mẫu với SVG chưa bao giờ dễ dàng và thú vị hơn thế. Tải lên hình ảnh của bạn, thu nhỏ tỷ lệ hoặc thay đổi khoảng cách, xoay và tô màu lại cho đến khi bạn có được một mẫu đẹp. Bạn có thể xem trước kết quả trước khi tải xuống.

Trianglify Generator

Tạo các mẫu hình học SVG đẹp mắt với Trianglify Generator. Bạn có thể đặt độ ngẫu nhiên / biến thể màu, kích thước chi tiết và chọn bảng màu để làm việc. Công cụ này là phiên bản GUI của Trianglify.

Export PSD to SVG

Nếu bạn sử dụng Photoshop làm trình chỉnh sửa hình ảnh cho công việc của mình, đôi khi bạn có thể cần phải chuyển đổi thiết kế của mình trên không gian làm việc Photoshop thành SVG, đây là một định dạng không được hỗ trợ trong Photoshop. Tải Script xuống công cụ này, sau đó sao chép vào thư mục Adobe Photoshop/presets/scripts.

Đổi tên lớp vector thành phần mở rộng SVG (ví dụ: layer1 trở thành layer1.svg) và bây giờ bạn có thể chạy tập lệnh từ File > Scripts > PS to SVG.

SVG Filters

Bạn có biết rằng với SVG, bạn có thể thêm các hiệu ứng như màu sắc, độ bão hòa, độ mờ, lớp phủ màu tuyến tính và nhiều hiệu ứng khác vào hình ảnh không? Đây là một công cụ hiển thị các hiệu ứng này, sau đó cung cấp cho bạn một đoạn mã để bạn dễ dàng nhúng hiệu ứng vào dự án của mình.

SVG Morpheous

SVG Morpheous là một thư viện JavaScript cho phép bạn biến đổi biểu tượng SVG từ hình dạng này sang hình dạng khác. Bạn có thể đặt hiệu ứng làm dịu, thời lượng của hoạt ảnh chuyển tiếp và cả hướng xoay.

Clip path generator

SVG cho phép bạn nhấp vào image clip với Shape. Điều này khá dễ dàng nếu hình dạng có dạng hình vuông hoặc hình tròn. Nhưng nếu hình dạng có nhiều điểm hoặc là hình đa giác thì sao? Đó là nơi bạn cần công cụ Clip Path Generator này.

Chartist.js

Chartist.js là một thư viện để tạo các biểu đồ đáp ứng có thể tùy chỉnh cao. Nó sử dụng SVG để hiển thị các biểu đồ, cũng có thể được tạo hoạt ảnh bằng cách sử dụng SMIL. Với thư viện này, bạn có thể tạo biểu đồ đường, biểu đồ hình tròn, biểu đồ thanh và các loại biểu đồ khác và thậm chí thêm hoạt ảnh cho chúng.

SVG stroke dash generator

Đây là một công cụ đơn giản để tạo các đường đứt nét bằng SVG stroke-dasharray. Đầu tiên, hãy chọn một loại dấu gạch ngang từ danh sách, sau đó tùy chỉnh nó về chiều rộng, chiều cao, xoay hoặc màu sắc. Sau đó, bạn có thể lấy mã HTML và CSS để áp dụng dòng gạch ngang này trong dự án của mình.

Method Draw: A Simple SVG Editor

Method Draw là một trình soạn thảo SVG dựa trên web, với giao diện trực quan đi kèm với các công cụ trên cả hai mặt của canvas.

Bạn có thể vẽ đường thẳng, hình dạng, nhập văn bản hoặc sử dụng các hình dạng dựng sẵn, sau đó chỉnh sửa các thuộc tính của các đối tượng được vẽ. Xuất hình ảnh ở định dạng SVG (cũng có định dạng SVG base64) hoặc lưu trực tiếp ở định dạng PNG.

Export Flash to animated SVG

Mặc dù nó không còn phổ biến nữa, nhưng có khả năng một số bạn khó buông Flash. Nếu vậy, bạn có thể chuyển flash của mình thành SVG để giữ cho nó hoạt động tương thích với các công nghệ mới hơn. Công cụ này tạo thành một phần mở rộng cho ứng dụng Flash và có thể hoạt động trên CS5, CS6 và CC.

Written by Linh Nguyễn

Leave a Reply

Exit mobile version