20 công cụ SVG hữu ích cho đồ họa tốt hơn
Ngày nay, SVG đang trở nên phổ biến trong thiết kế web 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ẹ hơn.
Đây 20 công cụ mà 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.
Hệ thống tọa độ tương tác SVG
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 phối hợp SVG. Sử dụng khung nhìn và bảo tỉ lệ trên SVG, được hướng dẫn bởi các đường màu cam và tím và một thước kẻ tiện dụng, bạn có thể chơi trong khi tìm hiểu cách thức tọa độ của SVG.
b64
b64 là một công cụ đơn giản để tối ưu hóa hình ảnh sau đó biế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 gốc64 làm kết quả.
CỨU
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ả kết xuất. Nếu bạn muốn xóa siêu dữ liệu biên tập, bình luận hoặc các yếu tố ẩn, bạn có thể sử dụng SVGO.
Bạn có thể giới thiệu SVGO qua npm, $ [sudo] npm cài đặt -g svgo hoặc sử dụng phiên bản GUI cung cấp 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 CỨU (công cụ trước đó) thành một Phiên bản GUI mà trực quan hơn và dễ sử dụng. Chỉ chuyển 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ũng có thể lấy kết quả dưới dạng tệp hình ảnh và mã.
SVG ngay
Khi bạn làm việc trên Illustrator, SVG đã 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ẽ lấy phiên bản tối ưu hóa của SVG đã xuất của bạn 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. Bạn có thể nhận SVG ngay từ trang Tiện ích đám mây sáng tạo.
Chuyển đổi SVG sang PNG
Muốn xuất tệp SVG sang dạng PNG? Nếu không 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 đầu ra hình ảnh ở định dạng PNG và URI dữ liệu PNG Base64 nếu bạn cần.
Xiếc SVG
Nếu bạn nghĩ rằng hình động của trình tải là tuyệt vời, bây giờ bạn có thể tạo nó dễ dàng bằng cách sử dụng SVG với Xiếc SVG. Các công cụ cho phép bạn tạo trình tải của riêng bạn, spinner hoặc bất cứ thứ gì tương tự bằng cách sử dụng hoạt hình lặp. Đặt 'Diễn viên', 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ả.
Sprite SVG
SVG Sprite là một mô-đun Node.js, giúp tối ưu hóa một loạt các tệp SVG, và biến chúng thành các kiểu sprite SVG bao gồm các họa tiết CSS truyền thống cho hình nền và / hoặc hình nền trước, ngăn xếp SVG và hơn thế nữa.
Quasi
Với quasi bạn có thể tạo hình ảnh Quasicstall như những gì bạn thấy dưới đây. Máy phát điện này là thử nghiệm, nhưng kết quả chắc chắn là tuyệt vời. Bạn có thể chơi xung quanh 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'.
Hoa văn trơn
Tạo các mẫu với SVG chưa bao giờ được dễ dàng hơn hoặc vui vẻ hơn. Tải lên hình ảnh của bạn, thu nhỏ 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.
Máy phát điện tam giác
Tạo các mẫu hình học SVG đẹp với Máy phát điện tam giác. 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.
Gradient SVG
Bạn biết bạn có thể tạo độ dốc bằng CSS nhưng bạn có biết rằng bạn có thể làm tương tự với SVG không? Cách dễ nhất để tạo độ dốc trên SVG là bằng cách sử dụng công cụ này. Chỉ cần nhập bắt đầu và dừng màu sau đó bạn sẽ nhận được mã cho kết quả được tạo. Một dự phòng về CSS cũng được bao gồm.
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 phải 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 cho công cụ này, sau đó sao chép vào Adobe Photoshop / cài đặt trước / script thư mục.
Đổi tên tên lớp vector bằng 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 cho hình ảnh? Đây là một công cụ hình dung các hiệu ứng này, sau đó cung cấp cho bạn một đoạn để làm cho nó dễ dàng nhúng hiệu ứng vào dự án của bạn.
Hình thái SVG
Hình thái SVG là một thư viện JavaScript cho phép bạn biến một biểu tượng SVG từ hình này sang hình khác. Bạn có thể đặt hiệu ứng nới lỏng, thời lượng của hình ảnh động chuyển tiếp và cả hướng xoay.
Trình tạo đường dẫn clip
SVG cho phép bạn nhấp vào clip hình ảnh với Shape. Điều này khá dễ dàng nếu hình dạng ở dạng hình vuông hoặc hình tròn. Nhưng cái gì nếu hình dạng là một hình 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.
Chartist.js
Chartist.js là một thư viện để tạo biểu đồ đáp ứng tùy biến cao. Nó sử dụng SVG để hiển thị các biểu đồ, cũng có thể được tạo hình động bằ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 cho chúng.
Máy phát đột quỵ SVG
Đây là một công cụ đơn giản để tạo đường đứt nét sử dụng SVG đột quỵ. Đầu tiên chọn một loại dấu gạch ngang từ danh sách, sau đó tùy chỉnh nó theo chiều rộng, chiều cao, xoay hoặc màu. 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 bạn.
Phương pháp vẽ: Trình soạn thảo SVG đơn giản
Phương thức Draw là trình soạn thảo SVG dựa trên web, với một giao diện trực quan đi kèm với các công cụ trên cả hai mặt của khung vẽ. Bạn có thể vẽ các đường, hình, văn bản đầu vào hoặc sử dụng các hình có 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 trong PNG.
Xuất Flash sang SVG hoạt hình
Mặc dù nó không còn phổ biến nữa, nhưng có khả năng một số bạn gặp khó khăn khi buông Flash. Nếu vậy, bạn có thể biến hoạt hì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 Bitmap, Chuyển động cổ điển, Thanh thiếu niên hình dạng (đối với những người khác, có thành công có thể tranh cãi).
