Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Svg Là Gì Và 20 Ví Dụ SVG Trong Thiết Kế Website

Svg Là Gì Và 20 Ví Dụ SVG Trong Thiết Kế Website


Ngày 7 Tháng 10 Năm 2020

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu những hiệu ứng animation svg text giúp cho trang web có thiết kế đẹp và bắt mắt hơn nhé!

SVG Là Gì?

Trước khi đi vào ví dụ thì mình xin giới thiệu qua một chút về SVG nha!
SVG là cụm từ viết tắt của Scalable Vector Graphics, nó sử dụng cấu trúc XML để hiển thị hình ảnh dưới dạng vector. Bạn có thể nhúng trực tiếp vào file HTML để sử dụng bằng việc dùng thẻ <svg>. Một số lợi ích khi sử dụng SVG trong trang web là:

  • Kích thước nhỏ, khả năng nén tốt.
  • Dễ dàng hiển thị trên nhiều màn hình thiết bị mà không bị vỡ hình ảnh.
  • Dễ dàng mở rộng và chỉnh sửa.
  • Tốc độ tải trang sẽ nhanh hơn so cới các loại định dạng hình ảnh khác(JPG, GIF, PNG...)

Nếu bạn muốn tham khảo thêm các bài viết hướng dẫn sử dụng SVG thì có thể xem ở bên dưới nhé:

Các Ví Dụ SVG HTML CSS Javascript

Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to HTML. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.

Thiết Kế SVG Text Mask HTML CSS

Thiết Kế SVG Text Mask HTML CSS

Và bên dưới là dự án trên Codepen nhé!

See the Pen SVG text mask by Marco Barría (@fixcl) on CodePen.

Nguồn

Cách Tạo SVG Text Animation Javascript

Cách Tạo SVG Text Animation Javascript

Và bên dưới là dự án trên Codepen nhé!

See the Pen SVG text animation by Cassie Evans (@cassie-codes) on CodePen.

Nguồn

Tạo SVG Text Animation Bằng Animaejs

Tạo SVG Text Animation Bằng Animaejs

Và bên dưới là dự án trên Codepen nhé!

See the Pen Hand written SVG text animation by Matthew Ellis (@mellis84) on CodePen.

Nguồn

Thiết Kế SVG CSS

Thiết Kế SVG CSS

Và bên dưới là dự án trên Codepen nhé!

See the Pen SVG Text Portrait by Lisi (@lisilinhart) on CodePen.

Nguồn

Cách Tạo SVG Text Animation Bằng CSS

CSS3 - SVG Text Animation

Và bên dưới là dự án trên Codepen nhé!

See the Pen CSS3 - SVG Text Animation by HIPE (@hipe) on CodePen.

Nguồn

Thiết Kế SVG Text Gradient Animation CSS

Thiết Kế SVG Text Gradient Animation CSS

Và bên dưới là dự án trên Codepen nhé!

See the Pen SVG text with animated gradient fill by Brad Daily (@bradleyboy) on CodePen.

Nguồn

Thiết Kế SVG Text Animation JS

Thiết Kế SVG Text Animation JS

Và bên dưới là dự án trên Codepen nhé!

See the Pen Curved SVG Text by GRAY GHOST (@grayghostvisuals) on CodePen.

Nguồn

Cách Tạo Hiệu Ứng Chuyển Động SVG Text Javascript

Cách Tạo Hiệu Ứng Chuyển Động SVG Text Javascript

Và bên dưới là dự án trên Codepen nhé!

See the Pen Animating SVG Text by Omar Elbaga (@omarel) on CodePen.

Nguồn

Thiết Kế SVG Text Border Animation

Thiết Kế SVG Text Border Animation

Và bên dưới là dự án trên Codepen nhé!

See the Pen SVG Text by ANA MAFLA (@ANAMAFLA) on CodePen.

Nguồn

Cách Tạo SVG Text Animation Bằng CSS

Cách Tạo SVG Text Animation Bằng CSS

Và bên dưới là dự án trên Codepen nhé!

See the Pen SVG Text Animation in CSS by Maciej Leszczyński (@asistapl) on CodePen.

Nguồn

Hiệu Ứng SVG Text Glitch Effect

Universal SVG Glitch

Và bên dưới là dự án trên Codepen nhé!

See the Pen Universal SVG Glitch by Dirk Weber (@DirkWeber) on CodePen.

Nguồn

Tạo Hiệu Ứng Loading SVG Animation

Tạo Hiệu Ứng Loading SVG Animation

Và bên dưới là dự án trên Codepen nhé!

See the Pen SVG Text Filling with Water by Lucas Bebber (@lbebber) on CodePen.

Nguồn

Thiết Kế Multi Line SVG Text

Thiết Kế Multi Line SVG Text

Và bên dưới là dự án trên Codepen nhé!

See the Pen Multi-line SVG text by Chris Gannon (@chrisgannon) on CodePen.

Nguồn

Ví Dụ CSS Javascript SVG Cho Website

Ví Dụ CSS Javascript SVG Cho Website

Và bên dưới là dự án trên Codepen nhé!

See the Pen SVG text on an interactive bezier path. by Graham Pyne (@gpyne) on CodePen.

Nguồn

Ví Dụ CSS SVG Background

Book cover - SVG text + Writing Mode

Và bên dưới là dự án trên Codepen nhé!

See the Pen Book cover - SVG text + Writing Mode by Cameron Fitzwilliam (@CameronFitzwilliam) on CodePen.

Nguồn

Hiệu Ứng SVG Text HTML5 CSS3

SVG Text HTML5 CSS3

Và bên dưới là dự án trên Codepen nhé!

See the Pen SVG text effect by Max Gruson (@bleepbloop) on CodePen.

Nguồn

Ví Dụ 3D SVG Text

Ví Dụ 3D SVG Text

Và bên dưới là dự án trên Codepen nhé!

See the Pen Shaded Text by Rafael González (@rgg) on CodePen.

Nguồn

Hiệu Ứng SVG Text Animation

Hiệu Ứng SVG Text Animation

Và bên dưới là dự án trên Codepen nhé!

See the Pen SVG Text Animation #1.. animated dashed stroke pattern by Ebram Marzouk (@P3R0) on CodePen.

Nguồn

Thiết Kế SVG Gradient Filled Text

Thiết Kế SVG Gradient Filled Text

Và bên dưới là dự án trên Codepen nhé!

See the Pen SVG Gradient Filled Text by Brenna O'Brien (@brenna) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những hiệu ứng hover animation svg text hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!