Hiệu ứng tự vẽ với SVG

Có bao giờ các bạn tưởng tượng hiển thị logo của một công ty hay một biểu tượng nào đó theo hiệu ứng tự vẽ chưa? Có một loại hiệu ứng sẽ giúp chúng ta khi nhìn vào giống như các biểu tượng đang vẽ chính nó vậy. Thực ra hiệu ứng này không mới và cũng khá dễ thực hiện.

Hôm nay mình sẽ hướng dẫn các bạn làm được điều đó. Ngoài ra, bạn có thể tham khảo một số ví dụ tại đây.

Hiệu ứng thật là tuyệt phải không các bạn. Chúng ta cứ tưởng tượng khi có một logo và có một hiệu ứng như vậy sẽ giúp trang web trở nên sống động hơn nhiều. Và muốn làm được điều này, chúng ta cần có file svg.

Vậy các bạn đã biết đến SVG chưa nhỉ? SVG là gì? SVG dùng để làm gì?

SVG

SVG (viết tắt của Scalable Vector Graphics) là một ngôn ngữ đánh dấu (markup language) XML và dùng để miêu tả các hình ảnh đồ họa véc tơ hai chiều, tĩnh và hoạt hình, thường dành cho ứng dụng trên các trang mạng.

SVG thuộc tiêu chuẩn mở và được quản lý bởi tổ chức World Wide Web Consortium, một tổ chức quản lý nhiều chuẩn khác như HTML, XHTML… Các tập tin có đuôi “.svg” được mặc định hiểu là tập tin SVG.

SVG có thể phóng to thu nhỏ mọi kích cỡ mà không giảm chất lượng hình ảnh. Vì thế, nó được dùng nhiều trong các bản đồ, sơ đồ.

Ưu điểm:

  • Vì là định dạng đồ họa vector, lợi điểm của SVG là khả năng hiển thị tốt ở mọi kích cỡ và độ phân giải. Với một kích thước tương tự, một tập tin SVG có thể chứa nhiều thông tin hơn là một tập tin định dạng nhị phân khác (GIF, PNG,…).
  • SVG là một chuẩn mở, nó cho phép việc tùy biến theo mục đích sử dụng một cách dễ dàng. Các hình ảnh SVG có thể được dễ dàng sửa chữa và phát triển sau này, khác với đồ họa mảng thường là sản phẩm cuối cùng của các xử lý ảnh, không chứa mã nguồn các lớp ảnh.
  • Các tập tin SVG ở dạng văn bản, việc chỉnh sửa có thể thực hiện bằng các trình soạn thảo đơn giản nhất.

Nhược điểm:

  • SVG là ngôn ngữ không được thiết kế để sửa chữa trực tiếp trên mã nguồn. Để tạo ra các hình ảnh SVG nói chung, cần dùng các công cụ hỗ trợ.
  • Trình duyệt Internet Explorer không hỗ trợ

Thường chúng ta sẽ dùng phần mềm Adobe Illustrator để vẽ những logo và xuất file svg. Bản thân mình cũng không rành phần mềm này, nên ở phần cuối mình chỉ hướng dẫn các bạn nhưng thao tác cơ bản nhất để có được tập tin svg mà thôi. Với phần mềm này chúng ta còn nhiều “chiêu” nữa mà các bạn có thể search thêm.

Còn bây giờ chúng ta tiếp tục tìm hiểu cách thức hoạt động của hiệu ứng này nhé.

Element in SVG

Chuẩn bị một hình svg đơn giản như sau:

Bắt đầu với những ví dụ đơn giản để chúng ta dễ hiểu, để ý thấy hình trên đơn giản chỉ là một đường (path).

Nếu mở tập tin ảnh này trên trình biên soạn text (ví dụ: notepad), chúng ta sẽ thấy cấu trúc của file khá giống với mã HTML.

Hai thuộc tính cần lưu ý ở đây là stroke và stroke-width. Stroke quy định màu của phần tử, stroke-width quy định kích thước của phần tử.

Phần tử path này cũng có hai thuộc tính rất quan trọng mà chúng ta sẽ dùng để tạo hiệu ứng là:

  • stroke-dasharray
  • stroke-dashoffset

Hai thuộc tính nay điều khiển các dấu gạch ngang và khoảng trống tùy chỉnh cho stroke. Stroke-dasharray tùy chỉnh độ dài đoạn gạch nối, stroke-dashoffset tùy chỉnh khoảng cách giữa cách đoạn gạch. Nói thì khó hiểu vậy thôi, các bạn xem ví dụ để có thể hiểu rõ hơn.

Kết quả: Tập hợp các đường nối 20px thay vì đường liền.

Hiệu ứng

Với hai thuộc tính này đã có thể làm hiệu ứng như sau:

 

 

 

Chỉ cần sử dụng CSS như sau là có được hiệu ứng như trên:

Ở đây, chúng ta không đề cập đến cách khai báo và sử dụng keyframes nhé. Các bạn có thể tìm hiểu thêm cách dùng keyframes ở những bài viết về CSS nhé.

Đầu tiên, ta tưởng tượng dash có chiều dài bằng toàn bộ path. Như vậy toàn bộ phần tử path chỉ là 1 dash của nó. Sau đó ta tưởng tượng offset cũng có kích thước bằng dash. Mà offset của dash luôn ở phía trước mỗi dash như vậy toàn bộ phần tử path chỉ hiển thị độ dài của offset.

Sau đó chúng ta chỉ cần cho offset thay đổi về 0 như vậy phần offset sẽ nhỏ dần và phần dash sẽ hiện ra.

Mô tả là thế, các bạn có thể tham khảo ví dụ:

HTML

CSS

Kết quả

 

 

Hiệu ứng thật tuyệt đúng không nào. Điểm khó ở đây là chúng ta phải xác định được chiều dài của các phần tử path. Ở ví dụ trên mình dùng giá trị 1000 vì nó có vẻ đúng với chiều dài của path.

Ta có thể lấy được chiều dài từng path với JAVASCRIPT

Sau khi chạy đoạn script trên ta sẽ có được chiều dài và sử dụng nó cho hiệu ứng CSS


Như vậy đến đây chúng ta đã tạo được hiệu ứng tự vẽ cho những ảnh svg, nhưng chắc hẳn trong đầu các bạn sẽ có một câu hỏi:
“Làm sao có được file svg tương ứng để làm hiệu ứng như vậy”.

Chắc chắn có cách, mình sẽ hướng dẫn các bạn để giải đáp câu hỏi này. Sử dụng một hình ảnh sau:

Bước 1: Sử dụng phầm mềm Adobe Illustrator (AI). để mở ảnh:


Bước 2: Sau đó vào menu Window => Image Trace để chuyển ảnh sang định dạng vector.

Bước 3: Ở menu của Image Trace ta tùy chọn để hình ảnh không bị vỡ

Đề nghị các bạn có thể chỉnh các giá trị như sau: Preset: Black and White Logo, View: Outlines, Mode: Black and White.

Các thông số khác ta có thể chỉnh tùy theo hình ảnh để được chất lượng tốt nhất. Sau đó click vào button expand bên dưới menu để chuyển ảnh sanh định dạng vector

Kết quả

Bước 4: Sau đó, click phải vào ảnh và chọn ungroup để phân phân rã nhóm các vector. Sau khi phân rã ta có thể click chọn xóa những đường thừa

Bước 5: Định dạng màu nền cũng như các đường stroke ta click vào icon ở menu bên trái.

Ta cũng có thể định dạng màu sắc cũng như bề dày của các đường stroke này.

Bước 6: Cuối cùng vào menu Save as và chọn định dạng tập tin SVG để lưu file. Sau đó chúng ta mở file vừa lưu bằng notepad hoặc bất cứ phần mềm đọc văn bản nào để lấy nội dung file SVG và bắt đầu làm hiệu ứng.


Các bạn có thể tải source code đầy đủ tại đây.

Trần Ngọc Hạnh – JANETO         

 
Hãy ủng hộ Fanpage laptrinhvien.io của chúng tôi bằng cách LIKE hoặc SHARE để có thể cập nhật các bài viết mới nhất bạn nhé!
 

TRUNG TÂM ĐÀO TẠO LẬP TRÌNH VIÊN JANETO


 0933067997 – 0933267337
 facebook.com/laptrinhvienio
 YouTube/laptrinhvienio
 tuyensinh@laptrinhvien.io
 Tầng 2 Tòa nhà The Morning Star – 57 Quốc Lộ 13, Phường 26, Quận Bình Thạnh, TP. Hồ Chí Minh.

35

Bình luận

0933 06 7997
0933 26 7337
tuyensinh@laptrinhvien.io