Bài viết này tổng hợp các tài nguyên tốt nhất để bạn có thể nhận được các biểu tượng SVG chất lượng cao.

Bootstrap Icons

Bộ sưu tập biểu tượng chính thức từ Bootstrap, một trong những khung HTML / CSS phổ biến nhất. Nó chứa hơn 1500 biểu tượng ở cả định dạng SVG và SVG, giúp bạn linh hoạt hơn nhiều.

Boxicon

Boxicon chứa hơn 1500 biểu tượng được nhóm thành nhiều danh mục như Thương mại điện tử, Tài chính và Âm nhạc cho phép bạn dễ dàng sắp xếp và tìm bộ sưu tập cụ thể.

Mỗi biểu tượng có một định dạng khác nhau; bạn không chỉ có thể chọn và tải chúng xuống dưới dạng SVG mà còn sử dụng chúng làm biểu tượng font chữ.

Feather Icons

Tìm kiếm hơn 200 biểu tượng được thiết kế đẹp mắt . Một điều mà tôi yêu thích ở bộ sưu tập là nó cho phép bạn tùy chỉnh kích thước, độ rộng nét vẽ và màu sắc trước khi tải xuống các biểu tượng.

Iconoir

Iconoir là một bộ sưu tập mã nguồn mở và miễn phí với hơn 900 biểu tượng với nhiều định dạng bao gồm SVG, Font, React.js, và thậm chí cả Figma và Framer.

Ionicons

Một bộ sưu tập các biểu tượng từ Ionic framework được thiết kế để sử dụng trên ứng dụng Web, Mobile hoặc Desktop.

Tabler Icons

Chứa hơn 1300 biểu tượng, Tabler là một trong những bộ sưu tập hoàn hảo để đưa vào thiết kế web hoặc ứng dụng của bạn. Nó trông sắc nét, nhất quán và có thể tùy chỉnh.

Radix Icons

Một tập hợp các biểu tượng được thiết kế với đặc điểm đường viền mỏng. Mỗi biểu tượng có kích thước 15 × 15 pixel và trông sắc nét trên màn hình. Bạn có thể tải bộ sưu tập dưới dạng tệp Figma, tệp Sketch, IconJar, SVG hoặc NPM.

Heroicons

Heroicons cung cấp một bộ hơn 200 biểu tượng. Mỗi biểu tượng có 2 kiểu “Outline” và “Filled” và có sẵn dưới dạng thư viện thành phần SVG, JSX và Vue.

Ant Design Icons

Biểu tượng này là một phần của hệ thống Ant Design. Nhưng bạn có thể cài đặt bộ sưu tập biểu tượng như một thành phần độc lập thông qua NPM. Mỗi biểu tượng có sẵn dưới dạng một thành phần React.js và sẽ được hiển thị dưới dạng SVG.

Remix Icon

Remix Icon là một bộ sưu tập tuyệt vời của hơn 2000 biểu tượng. Một số biểu tượng có một số biến thể. Ví dụ, có hơn một tá biến thể cho các biểu tượng trang chủ. Điều này cho phép bạn chọn biểu tượng phù hợp nhất cho tính cách trang web của bạn.

Material Design Icons

Đây là bộ sưu tập biểu tượng từ hệ thống thiết kế “Material” của Google. Nó đi kèm với giao diện người dùng trực quan mang lại sự thuận tiện để triển khai biểu tượng trong một số nền tảng khác nhau bao gồm Web với SVG hoặc biểu tượng, Android, iOS, Flutter,…

Octicons

Một thư viện biểu tượng từ Github, những biểu tượng này đã được tạo cho hệ thống thiết kế “Primer” của họ, cụ thể là các ứng dụng Github, làm cho nó trở thành một bộ hoàn hảo nếu bạn xây dựng một trang web hoặc ứng dụng tích hợp với Github.

Icons Grommet

Một tập hợp các biểu tượng SVG được xây dựng dưới dạng các thành phần của React.js. Bạn có thể tìm thấy một số biểu tượng độc đáo trong bộ sưu tập và một số biểu tượng thậm chí có sẵn với đầy đủ màu sắc thay vì chỉ có màu trắng và đen.

CSS.gg

Trang web này cung cấp khoảng 700 biểu tượng chất lượng cao. Bộ sưu tập biểu tượng có sẵn ở nhiều định dạng bao gồm CSS, SVG, TypeScript, Figma, Adobe XD và như một API endpoint.

Typicons

Typicons là một bộ sưu tập các biểu tượng hiện đại đẹp mắt được thiết kế cho các ứng dụng web hoặc bản địa – thiết bị di động và máy tính để bàn.

The post 15 trang web tải biểu tượng SVG miễn phí appeared first on Nhật Phúc.

Bài viết này sẽ chia sẻ một vài thư viện JavaScript giúp bạn có thể dễ dàng tạo các SVG animation.

Vivus

Vivus là một thư viện JavaScript cung cấp cho SVG của bạn vẻ ngoài như được vẽ . Vivus hoạt động hiệu quả mà không cần bất kỳ thư viện phụ nào (ví dụ: jQuery). Chỉ cần đưa tập tin .js vào HTML của bạn và chỉ định phần tử SVG mà bạn muốn tạo animation, cùng với một số tùy chọn đặt trước để bắt đầu hoạt ảnh ngay lập tức.

Ví dụ:

new Vivus( 'svg-element', { type: 'oneByOne', duration: 200 });

Phần trên sẽ tạo hiệu ứng cho phần tử SVG có svg-elementID trong 200 mili giây. Mỗi phần tử của SVG này sẽ được vẽ lần lượt trong khung thời gian đó.

Bonsai

Bonsai là một thư viện JavaScript mạnh mẽ cho phép bạn vẽ, biến hình cũng như tạo hình ảnh động cho các yếu tố đồ họa trên các trang web.

Nó hỗ trợ cả loại đồ họa HTML5 Canvas và SVG. Với Bonsai, bạn có thể tạo một hình chữ nhật hoặc hình tròn đơn giản hoặc nếu bạn thích, một trò chơi hoạt hình nhiều người chơi.

Bạn có thể sử dụng Orbit để cảm nhận cách Bonsai hoạt động trong live action hoặc xem một vài ví dụ ấn tượng sau đây để lấy cảm hứng từ đó.

Velocity

Velocity là một thư viện JavaScript được xây dựng để tạo animation nhanh. Tốc độ của Velocity khi hiển thị hoạt ảnh cực kỳ nhanh. Nó vượt trội hơn jQuery và thậm chí cả CSS.

API của Velocity hoạt động tương tự như animation trong jQuery ngoại trừ nó sử dụng keyword alias $.velocity() thay vì $.animate(). Ngoài ra, bạn có thể sử dụng các từ khóa hoạt ảnh giống hệt nhau, chẳng hạn như fadeIn và fadeOut.

RaphaelJS

RaphaelJS là một thư viện cho phép bạn vẽ cũng như tạo animation SVG vector trên các trang web. Nó hỗ trợ một loạt các trình duyệt, điều này khiến Raphael trở thành thư viện JavaScript đáng tin cậy nhất.

Với RaphaelJS, bạn có thể xây dựng các biểu đồ phân tích tương tác, bản đồ thế giới và các tương tác trong trò chơi tương tự như trong Counter Strike.

SnapSVG

SnapSVG là một thư viện JavaScript phổ biến khác cho SVG animation được phát triển bởi nhà phát triển Raphael, Dmitry Baranovskiy, cùng với Adobe Web Platform Team ngay từ đầu.

Không giống như Raphael, SnapSVG chỉ dành cho các trình duyệt mới nhất. Điều đó cho phép thư viện nhỏ hơn đáng kể so với Raphael và hỗ trợ các tính năng SVG như cắt và tạo mặt nạ.

Lazy Line Painter

Lazy Line Painter là một plugin jQuery để tạo SVG animation để tạo hiệu ứng cho chuỗi bản vẽ, tương tự như Vivus.

SVG.js

SVG.js là một thư viện nhẹ để thao tác và tạo ảnh động cho SVG. Với thư viện này, bạn sẽ có thể tạo hoạt ảnh cho kích thước, vị trí hoặc màu sắc trong phần tử SVG của mình.

Bạn cũng có thể áp dụng các plugin bổ sung để thêm các chức năng bổ sung. Ví dụ này sử dụng plugin svg.filter.js để áp dụng các bộ lọc như làm mờ gaussian, khử bão hòa, tương phản, nâu đỏ, v.v. cho hình ảnh.

Walkway

Walkway hỗ trợ ba loại element: path, line, và polyline.

The post 8 thư viện JavaScript để tạo ảnh SVG động appeared first on Nhật Phúc.