Để tạo nội dung hấp dẫn cho thiết bị di động, bạn cần cân bằng lượng dữ liệu tải xuống với mức độ tác động hình ảnh tối đa. Đồ hoạ vectơ là một cách tuyệt vời để mang lại kết quả hình ảnh tuyệt đẹp bằng cách sử dụng băng thông tối thiểu.
Nhiều người nghĩ rằng canvas là cách duy nhất để vẽ một tổ hợp vectơ và đường quét trên web, nhưng có một số giải pháp thay thế có một số ưu điểm. Một cách hay để vẽ vectơ là sử dụng Đồ hoạ vectơ có thể mở rộng (SVG). Đây là một phần quan trọng của HTML5.
Chúng ta đều biết thiết kế thích ứng là một phần quan trọng trong việc xử lý nhiều kích thước màn hình và SVG là lý tưởng để dễ dàng xử lý nhiều kích thước màn hình.
SVG là một cách tuyệt vời để trình bày bản vẽ đường nét dựa trên vectơ và là một bổ sung tuyệt vời cho bitmap, loại hình ảnh này phù hợp hơn với hình ảnh tông màu liên tục.
Một trong những điều hữu ích nhất về SVG là nó không phụ thuộc vào độ phân giải, nghĩa là bạn không cần phải suy nghĩ về số pixel trên thiết bị của mình, kết quả sẽ luôn được điều chỉnh theo tỷ lệ và được trình duyệt tối ưu hoá để trông đẹp mắt.
Các công cụ tạo nội dung phổ biến như ứng dụng Drawing trong Google Drive, Inkscape, Illustrator, Corel Draw và nhiều công cụ khác tạo SVG, vì vậy, có rất nhiều cách để tạo nội dung. Chúng ta sẽ tìm hiểu một số cách sử dụng thành phần SVG, cùng một số mẹo tối ưu hoá để bạn bắt đầu.
Nguyên tắc cơ bản về việc mở rộng quy mô
Hãy bắt đầu với một tình huống đơn giản – bạn muốn một hình ảnh đồ hoạ toàn trang làm nền cho trang web của mình. Việc luôn có biểu trưng của công ty hoặc bất cứ thứ gì tương tự như vậy ở chế độ toàn màn hình trong nền sẽ rất hữu ích, nhưng tất nhiên là rất khó để có được một biểu trưng hài hoà với tất cả các kích thước màn hình hiện tại. Để minh hoạ, chúng ta sẽ bắt đầu với biểu trưng HTML5 khiêm tốn.
Biểu trưng HTML5 được hiển thị bên dưới – và bạn đã đoán đúng, biểu trưng này bắt nguồn từ tệp SVG.
Nhấp vào biểu trưng và xem trên bất kỳ trình duyệt hiện đại nào và bạn sẽ thấy biểu trưng thay đổi kích thước đẹp mắt theo mọi kích thước cửa sổ. Hãy thử mở hình ảnh đó trong trình duyệt bạn yêu thích, đổi kích thước cửa sổ và quan sát để thấy hình ảnh sắc nét ở mọi mức độ phóng đại. Nếu muốn thử điều đó với hình ảnh bitmap, chúng ta sẽ phải phân phát nhiều kích thước khác nhau cho mỗi màn hình mà chúng ta có thể gặp phải, hoặc buộc phải chấp nhận hình ảnh được điều chỉnh theo tỷ lệ có pixel xấu xí.
Vậy thì vấn đề là gì? Nếu bạn không biết thì đây là định dạng duy nhất có tỷ lệ độc lập với thiết bị mà chúng tôi đang sử dụng để xem nội dung. Vì vậy, chúng ta chỉ cần phân phát một thành phần cho người dùng mà không cần biết kích thước màn hình hoặc cửa sổ của họ – thật gọn gàng!
Nhưng chờ đã, còn nhiều điều thú vị hơn nữa – biểu trưng HTML5 chỉ có 1427 byte! Ôi, kích thước này quá nhỏ nên hầu như không ảnh hưởng đến bất kỳ gói dữ liệu di động nào khi tải, giúp tải nhanh và tiết kiệm chi phí cho người dùng!
Một điểm thú vị khác về tệp SVG là bạn có thể nén tệp bằng GZIP để giảm kích thước tệp hơn nữa. Khi bạn nén SVG theo cách đó, đuôi tệp phải được thay đổi thành ".svgz". Đối với biểu trưng HTML5, biểu trưng này sẽ thu nhỏ chỉ còn 663 byte khi nén – và hầu hết các trình duyệt hiện đại đều xử lý dễ dàng!
Với tệp ví dụ trên một số thiết bị mới nhất, chúng ta thấy có lợi thế gấp 60 lần khi sử dụng dữ liệu vectơ nén! Ngoài ra, xin lưu ý rằng những phép so sánh này được thực hiện giữa JPEG và SVG, chứ không phải PNG. Tuy nhiên, JPEG là định dạng có tổn hao, dẫn đến chất lượng thấp hơn so với SVG hoặc PNG. Nếu chúng ta sử dụng PNG, lợi thế sẽ là hơn 80 lần, điều này thật đáng kinh ngạc!
Nhưng tất nhiên, PNG và JPEG không được tạo ra như nhau. Một số mẹo tối ưu hoá khuyên bạn nên sử dụng JPEG thay vì PNG, nhưng không phải lúc nào cũng vậy. Hãy xem các hình ảnh bên dưới. Hình ảnh bên trái là hình ảnh PNG của phần trên cùng bên phải của biểu trưng HTML5 được phóng to 6x. Hình ảnh ở bên phải cũng giống như vậy nhưng được mã hoá bằng JPEG.
Dễ thấy rằng việc tiết kiệm kích thước tệp ở định dạng JPEG sẽ gây ra một số tác dụng phụ, chẳng hạn như các điểm ảnh màu ở các cạnh sắc nét – có thể khiến võng mạc của bạn nghĩ rằng mình cần đeo kính:-) Công bằng mà nói, JPEG được tối ưu hoá cho ảnh và đó là lý do tại sao định dạng này không phù hợp với hình minh hoạ vectơ. Trong mọi trường hợp, phiên bản SVG có chất lượng giống với PNG, vì vậy, phiên bản này sẽ thắng trên tất cả các tài khoản – cả về kích thước tệp và độ rõ ràng.
Tạo nền vectơ
Hãy xem cách bạn có thể sử dụng tệp vectơ làm nền của trang. Một cách dễ dàng là khai báo tệp nền bằng cách sử dụng vị trí cố định CSS:
<style>
#bg {
position:fixed;
top:0;
left:0;
width:100%;
z-index: -1;
}
</style>
<img src="HTML5-logo.svgz" id="bg" alt="HTML5 logo"></pre>
Bạn sẽ nhận thấy rằng bất kể kích thước màn hình là bao nhiêu, hình ảnh đều được định cỡ vừa vặn với các cạnh sắc nét và rõ ràng.
Tất nhiên, chúng ta muốn đặt một số nội dung lên nền.
Tuy nhiên, như bạn có thể thấy, kết quả không được như mong đợi vì chúng ta không thể đọc văn bản. Vậy chúng tôi nên làm gì?
Điều chỉnh nền để trông đẹp hơn
Điều rõ ràng chúng ta cần làm là làm cho tất cả màu trong hình nền sáng hơn. Điều này dễ dàng đạt được bằng cách sử dụng thuộc tính độ mờ CSS - hoặc sử dụng độ mờ trong chính tệp SVG. Bạn có thể thực hiện việc này chỉ bằng cách thêm mã này vào nội dung CSS:
#bg {
opacity: 0.2;
}
Thao tác này sẽ cho bạn kết quả như sau:
Mặc dù giải pháp này dễ thực hiện nhưng có thể trở thành vấn đề về hiệu suất trên thiết bị di động. Đối với hầu hết các trình duyệt dành cho thiết bị di động hiện tại, việc sử dụng thuộc tính độ mờ có thể chậm hơn nhiều so với đối tượng mờ.
Giải pháp hiệu quả hơn
Việc sửa đổi màu trong nội dung SVG gốc tốt hơn nhiều so với việc đặt độ mờ bằng CSS. Dưới đây là biểu trưng HTML5 được sửa đổi để trông mờ đi bằng cách thay đổi màu sắc được sử dụng và trong quá trình này, tránh sử dụng thuộc tính độ mờ. Vì vậy, hình nền bên dưới trông giống hệt kết quả của việc thay đổi độ mờ, nhưng thực tế sẽ vẽ nhanh hơn rất nhiều, tiết kiệm thời gian CPU và tiết kiệm thời lượng pin quý giá trong quá trình này.
Giờ đây, chúng ta đã nắm được một số kiến thức cơ bản, hãy chuyển sang một số tính năng khác.
Sử dụng hiệu ứng chuyển màu một cách hiệu quả
Giả sử chúng ta muốn tạo một nút. Chúng ta có thể bắt đầu bằng cách tạo một hình chữ nhật với các góc bo tròn đẹp mắt. Sau đó, chúng ta có thể thêm một hiệu ứng chuyển màu tuyến tính đẹp mắt để tạo cho nút một số hoạ tiết đẹp mắt. Mã để thực hiện việc này có thể trông giống như sau:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="blueshiny">
<stop stop-color="#a0caf6" offset="0"/>
<stop stop-color="#1579df" offset="0.5" />
<stop stop-color="#1675d6" offset="0.5"/>
<stop stop-color="#115ca9" offset="1"/>
</linearGradient>
</defs>
<g id="button" onclick="alert('ouch!');">
<rect fill="url(#blueshiny)" width="198" height="83" x="3" y="4" rx="15" />
<text x="100" y="55" fill="white" font-size="18pt" text-anchor="middle">Press me</text>
</g>
</svg>
Nút kết quả sẽ có dạng như sau:
Hãy lưu ý cách hiệu ứng chuyển màu mà chúng ta đã thêm đi từ trái sang phải. Đây là hướng chuyển màu mặc định trong SVG. Tuy nhiên, chúng ta có thể làm tốt hơn vì một số lý do: thẩm mỹ và hiệu suất. Hãy thử thay đổi hướng chuyển màu để trông đẹp mắt hơn một chút. Việc đặt các thuộc tính "x1", "y1", "x2" và "y2" trên hiệu ứng chuyển màu tuyến tính sẽ kiểm soát hướng của màu tô.
Chỉ cần đặt thuộc tính 'y2' cho phép chúng ta thay đổi độ dốc theo đường chéo. Vì vậy, thay đổi nhỏ về mã này:
<linearGradient id="blueshiny" y2="1">
sẽ mang đến cho chúng ta một giao diện khác cho nút, cuối cùng sẽ có giao diện như hình dưới đây.
Chúng ta cũng có thể dễ dàng thay đổi độ dốc để chuyển từ trên xuống dưới bằng cách thay đổi một chút mã:
<linearGradient id="blueshiny" x2="0" y2="1">
và kết quả sẽ giống như hình ảnh dưới đây.
Vậy nội dung thảo luận về các góc khác nhau của độ dốc là gì?
Hóa ra ví dụ cuối cùng – ví dụ có hiệu ứng chuyển màu chạy từ trên xuống dưới là ví dụ nhanh nhất để vẽ trên hầu hết các thiết bị. Đây là một bí mật ít người biết trong số những người đam mê đồ hoạ viết mã trình duyệt, đó là hiệu ứng chuyển màu dọc (từ trên xuống dưới) vẽ gần nhanh như màu đồng nhất. (Lý do là việc vẽ một đối tượng được thực hiện theo các đường ngang trên trang – và phần cốt lõi của mã vẽ hiểu rằng màu sắc không thay đổi trên mỗi dòng, vì vậy, chúng sẽ tối ưu hoá màu sắc đó).
Vì vậy, khi bạn chọn sử dụng hiệu ứng chuyển màu trong thiết kế trang, hiệu ứng phụ sẽ nhanh hơn và tốn ít pin hơn. Tốc độ tăng này cũng áp dụng cho các hiệu ứng chuyển màu CSS, vì vậy, nó không chỉ là một hiệu ứng SVG.
Nếu cảm thấy thực sự thích phiêu lưu với kiến thức gradient mới này, thì chúng ta có thể thêm một dải chuyển màu thú vị phía sau biểu trưng HTML5 của mình bằng cách thêm mã bên dưới:
<defs>
<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0" />
<stop stop-color="#CCCCFF" offset="0.2" />
<stop stop-color="#CCFFCC" offset="0.4" />
<stop stop-color="#FFFFCC" offset="0.6" />
<stop stop-color="#FFEDCC" offset="0.8" />
<stop stop-color="#FFCCCC" offset="1" />
</linearGradient>
</defs>
<rect x="-200" y="-160" width="910" height="830" fill="url(#grad1)"/></pre>
Đoạn mã ở trên thêm một dải chuyển màu tuyến tính dọc đã làm mờ vào nền của biểu trưng HTML5 để tạo ra một sắc thái đa màu tinh tế, chạy nhanh – nhanh như một nền màu đồng nhất.
Nếu tải nội dung trong trình duyệt trên máy tính và đổi kích thước thành tỷ lệ khung hình cực đại, bạn sẽ thấy các thanh màu trắng xuất hiện ở đầu/cuối hoặc bên trái/bên phải. Dù sao, sau khi các thay đổi mã được thực hiện phía trên nền kết quả sẽ có dạng như sau:
Tạo ảnh động một cách dễ dàng
Bây giờ, bạn có thể thắc mắc ý nghĩa khi sử dụng hiệu ứng chuyển màu SVG làm phông nền cho trang của mình là gì. Thật vậy, bạn có thể làm điều đó với độ dốc của CSS, nhưng một lợi thế của SVG là bản thân độ dốc đó nằm trong DOM. Điều này có nghĩa là bạn có thể sửa đổi nó bằng tập lệnh, nhưng quan trọng hơn là bạn có thể tận dụng khả năng tạo ảnh động tích hợp sẵn của SVG để thêm các thay đổi tinh tế vào nội dung của mình.
Ví dụ: chúng ta sẽ sửa đổi biểu trưng HTML5 đầy màu sắc bằng cách thay đổi định nghĩa chuyển màu tuyến tính thành mã dưới đây:
<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0">
<animate attributeName="stop-color"
values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCCCFF" offset="0.2">
<animate attributeName="stop-color"
values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCFFCC" offset="0.4">
<animate attributeName="stop-color"
values="#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFFFCC" offset="0.6">
<animate attributeName="stop-color"
values="#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFEDCC" offset="0.8">
<animate attributeName="stop-color"
values="#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFCCCC" offset="1">
<animate attributeName="stop-color"
values="#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
</linearGradient>
Hãy xem hình ảnh bên dưới để biết kết quả của những thay đổi trên.
Mã này đang thay đổi màu của hiệu ứng chuyển màu tuyến tính thông qua tất cả các điểm dừng màu mà chúng ta đã xác định trong một chu kỳ liên tục mất 20 giây để chạy. Hiệu ứng của việc đó là hiệu ứng chuyển màu trông như đang di chuyển lên trang theo chuyển động liên tục không bao giờ dừng lại.
Điều tuyệt vời là bạn không cần phải viết kịch bản! Đó là lý do tính năng này vừa chạy dưới dạng một hình ảnh được tham chiếu trên trang này, vừa giúp giảm khối lượng công việc trên CPU dành cho thiết bị di động bằng cách không cần đến tập lệnh.
Ngoài ra, chính trình duyệt có thể tận dụng kiến thức về bản vẽ để đảm bảo mức hao tổn CPU tối thiểu được sử dụng để tạo ảnh động bắt mắt.
Có một lưu ý: một số trình duyệt hoàn toàn không xử lý kiểu ảnh động này, nhưng trong trường hợp đó, bạn vẫn sẽ có nền màu đẹp nhưng điều này sẽ không thay đổi – bạn có thể giải quyết vấn đề này bằng cách sử dụng tập lệnh (và requestAnimationFrame) nhưng điều đó nằm ngoài phạm vi bài viết này.
Một điều nữa cần lưu ý là tệp SVG không nén này chỉ có 2922 byte – cực kỳ nhỏ để cung cấp hiệu ứng đồ hoạ phong phú như vậy, giúp người dùng và các gói dữ liệu đó hài lòng trong quá trình này.
Tiếp theo nên làm gì?
Có nhiều trường hợp SVG không phải là định dạng lý tưởng, ảnh và video được thể hiện tốt hơn ở các định dạng khác. Văn bản là một ví dụ khác, trong đó HTML và CSS gốc hoạt động tốt hơn nhiều. Tuy nhiên, đây có thể là lựa chọn lý tưởng khi bạn sử dụng công cụ này để vẽ hình minh hoạ bằng đường nét.
Chúng tôi đã đề cập đến một số cách sử dụng cơ bản cơ bản dành cho đồ hoạ SVG, cho thấy việc tạo nội dung nhỏ mang đến đồ hoạ sống động toàn màn hình mà không cần tải nhiều xuống rất dễ dàng. Chỉ cần một chút cải tiến nhỏ đối với nội dung, bạn có thể dễ dàng tạo ra kết quả đồ hoạ tuyệt vời với một lượng nhỏ mã đánh dấu. Trong bài viết tiếp theo, chúng ta sẽ khám phá thêm một số thông tin chi tiết về cách sử dụng ảnh động được tích hợp sẵn trong SVG để tạo hiệu ứng đơn giản và mạnh mẽ hơn, đồng thời so sánh việc sử dụng canvas với SVG để chọn công cụ phù hợp cho việc tạo trang web đồ hoạ dành cho thiết bị di động.
Các tài nguyên hữu ích khác
- Inkscape là một ứng dụng vẽ nguồn mở sử dụng SVG làm định dạng tệp.
- Open Clip Art (Hình minh hoạ mở) là một thư viện hình minh hoạ nguồn mở khổng lồ chứa hàng nghìn hình ảnh SVG.
- Trang SVG của W3C chứa các đường liên kết đến thông số kỹ thuật, tài nguyên, v.v.
- Raphaël là một thư viện JavaScript cung cấp API thuận tiện để vẽ và tạo ảnh động nội dung SVG với khả năng dự phòng tuyệt vời cho các trình duyệt cũ.
- Tài nguyên SVG của Đại học Slippery Rock – bao gồm đường liên kết đến một Hướng dẫn cơ bản về SVG rất hữu ích.