Để tạo nội dung hấp dẫn trên 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.
Kiến thức cơ bản về việc điều chỉnh theo tỷ lệ
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. Sẽ rất hữu ích nếu bạn có biểu trưng công ty hoặc bất kỳ nội dung nào khác ở chế độ toàn màn hình ở chế độ nền mọi lúc, nhưng tất nhiên, rất khó để làm điều đó một cách hiệu quả với tất cả các kích thước màn hình hiện có. Để minh hoạ, chúng ta sẽ bắt đầu với biểu trưng HTML5 đơn giả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 biểu trưng đó trong bất kỳ trình duyệt hiện đại nào, bạn sẽ thấy biểu trưng đó có thể điều chỉnh theo tỷ lệ cho 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 to. 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 rất xấu.
Vậy thì vấn đề là gì? Nếu bạn chưa nhận thấy, thì đây là định dạng duy nhất có thể điều chỉnh theo tỷ lệ độc lập với thiết bị mà chúng ta đang sử dụng để xem. 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 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". Trong trường hợp biểu trưng HTML5, biểu trưng này sẽ thu nhỏ chỉ còn 663 byte khi được nén – và hầu hết các trình duyệt hiện đại đều xử lý biểu trưng này một cách dễ dàng!
Với tệp ví dụ trên một số thiết bị mới nhất, chúng tôi nhận thấy lợi thế khoảng 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, 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 6 lần. 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 đồ 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ả 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.
Sau đó, 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 ta 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. Bạn có thể dễ dàng thực hiện việc này 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ù dễ dàng, nhưng giải pháp này có thể là điểm yếu 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 di động hiện có, việc sử dụng thuộc tính độ mờ có thể chậm hơn nhiều so với việc vẽ các đối tượng không trong suốt.
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 có 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ể có dạ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", chúng ta có thể thay đổi độ dốc thành đườ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 bạn có thắc mắc về tất cả những nội dung thảo luận về các góc độ khác nhau của hiệu ứng chuyển màu không?
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 chuyển màu dọc sẽ nhanh hơn và tiêu thụ í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ật sự thích thú với kiến thức mới về hiệu ứng chuyển màu, chúng ta có thể thêm hiệu ứng chuyển màu thú vị phía sau biểu trưng HTML5 bằng cách thêm mã dưới đây:
<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>
Mã ở trên thêm một hiệu ứng chuyển màu tuyến tính dọc mờ vào nền của biểu trưng HTML5 để tạo ra một màu sắc đa sắc tinh tế chạy nhanh – nhanh như 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 thực hiện các thay đổi về mã ở trên, nền kết quả sẽ có dạng như sau:
Tạo ảnh động một cách dễ dàng
Giờ đây, bạn có thể tự hỏi mục đích của việc sử dụng hiệu ứng chuyển màu SVG làm phông nền cho trang. Thật vậy, bạn có thể làm điều đó với hiệu ứng chuyển màu CSS, nhưng một lợi thế của SVG là hiệu ứng chuyển màu 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ại sao hình ảnh này chạy dưới dạng hình ảnh được tham chiếu từ trang này, nhưng cũng giúp giảm khối lượng công việc trên CPU của thiết bị di động bằng cách loại bỏ nhu cầu về 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ó một nền màu đẹp nhưng nền 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ày nằm ngoài phạm vi của 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 hiệu quả 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 nét vẽ.
Chúng ta đã đề cập đến một số cách sử dụng cơ bản của đồ hoạ SVG, cho thấy việc tạo nội dung nhỏ để cung cấp đồ hoạ sống động toàn màn hình với dung lượng tải xuống tối thiểu 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.