20 công cụ SVG miễn phí cho đồ họa đẹp hơn (Cập nhật)

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 SVG. Nhưng khi nói đến thiết kế web, chúng ta nên luôn tối ưu hóa để có kết quả nhẹ nhàng hơn.

Đây 20 công cụ bạn có thể sử dụng để làm việc với SVG một cách nhanh chóng và hiệu quả. Chúng tôi có hầu hết các công cụ trực tuyến, có thể giúp tối ưu hóa, chuyển đổi, tạo mẫu và hơn thế nữa.

Cách tạo hoạt ảnh SVG bằng CSS

Cách tạo hoạt ảnh SVG bằng CSS

Hoạt ảnh SVG có thể được thực hiện thông qua các phần tử gốc như . Nhưng đối với những người … Đọc thêm

Hệ tọa độ SVG tương tác

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 tọa độ SVG hoạt động. Sử dụng viewBoxpreserveAspectRatio 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.

svg-graphics-tools
b64

b64 là một công cụ đơn giản để tối ưu hóa hình ảnh sau đó chuyển chúng thành đị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.

svg-graphics-tools
SVGO

SVG được xuất có thể chứa thông tin không cần thiết có thể được loại bỏ mà không ảnh hưởng đến kết quả hiển thị. Nếu bạn muốn xóa siêu dữ liệu trình chỉnh sửa, nhận xét hoặc các yếu tố ẩn, bạn có thể sử dụng SVGO.

Bạn có thể nhập SVGO qua 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 một Phiên bản GUI trực quan hơn và dễ sử dụng. Chỉ 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-graphics-tools
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ẽ tải phiên bản SVG đã xuất của bạn đượ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-graphics-tools
Công cụ chuyển đổi SVG sang PNG

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ụ Chuyển đổi SVG sang PNG này để nhận kết quả đầu ra hình ảnh ở định dạng PNG và cả URI dữ liệu PNG Base64 nếu bạn cần.

svg-graphics-tools
Rạp xiếc SVG

Nếu bạn cho rằng hoạt ảnh của trình tải là tuyệt vời, thì bây giờ bạn có thể tạo nó một cách dễ dàng bằng cách sử dụng SVG với Rạp xiếc SVG. Các công cụ 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 bạn bằng cách sử dụng hoạt ảnh lặp. Đặ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-graphics-tools
SVG Sprite

SVG Sprite là một Node.js mô-đun, tối ưu hóa một loạt các tệp SVG, biến chúng thành kiểu sprite SVG bao gồm các CSS sprite truyền thống cho hình ảnh nền và / hoặc nền trước, ngăn xếp SVG và hơn thế nữa.

Quasi

Với gần như bạn có thể tạo ra Tinh thể hình ảnh như những gì bạn thấy bên dưới. Máy phát điện này là thử nghiệm, nhưng kết quả chắc chắn rất tuyệt. Bạn có thể thử bằng cách thay đổi giá trị tùy chọn, sau đó tải xuống kết quả bằng nút 'Lưu SVG'.

svg-graphics-tools
Mẫu trơn

Tạo mẫu với SVG chưa bao giờ dễ dàng hơn hoặc thú vị hơn. 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.

svg-graphics-tools
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.

svg-graphics-tools
Xuất PSD sang 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 chuyển đổi thiết kế của bạn trên không gian làm việc Photoshop thành SVG, là một định dạng không được hỗ trợ trong Photoshop. Tải xuống Script vào công cụ này, sau đó sao chép vào Adobe Photoshop/presets/scripts thư mục.

Đổi tên tên lớp vectơ với 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ừ Tệp> Tập lệnh> PS sang SVG.

Bộ lọc SVG

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ụ hình dung những hiệu ứng này, sau đó cung cấp cho bạn một đoạn mã để làm cho nó dễ dàng nhúng hiệu ứng vào dự án của bạn.

svg-graphics-tools
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.

hình thái
Trình tạo đường dẫn clip

SVG cho phép bạn nhấp vào clip hình ảnh với Hình dạng. Đ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 cái gì nếu hình dạng có nhiều điểm hoặc là hình đa giác? Đó là nơi bạn cần công cụ Clip Path Generator này.

svg-graphics-tools
Chartist.js

Chartist.js là một thư viện để tạo 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 hình đối với họ.

Máy phát dấu gạch ngang hành trình SVG

Đây là một công cụ đơn giản để tạo đường đứt nét sử dụ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.

svg-graphics-tools
Phương pháp vẽ: Một trình soạn thảo SVG đơn giản

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.

svg-graphics-tools
Xuất Flash sang SVG động

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 hoạt ảnh flash của bạn 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.

Bạn có thể xuất thành SVG khi nói đến Hình dạng, Biểu tượng Bitmaps, Tweens Chuyển động Cổ điển, Hình dạng tweens (đối với những người khác, có thể nói là thành công).


Bạn đang xem : 20 công cụ SVG miễn phí cho đồ họa đẹp hơn (Cập nhật)

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *