Tạo nội dung bắt mắt có nghĩa là cân bằng lượng dữ liệu tải xuống với tác động hình ảnh tối đa. Đồ hoạ vectơ là một cách tuyệt vời để cung cấp kết quả trực quan tuyệt đẹp mà không cần băng thông tối thiểu.
Nhiều người nghĩ rằng canvas là cách duy nhất để vẽ kết hợp vectơ và đường quét trên web, nhưng có một số phương án thay thế có một số ưu điểm. Một cách tuyệt vời để tạo bản vẽ vectơ là sử dụng Đồ hoạ vectơ có thể mở rộng (SVG), 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à định dạng lý tưởng để dễ dàng xử lý nhiều màn hình có kích thước khác nhau.
SVG là một cách tuyệt vời để trình bày các bản vẽ đường dựa trên vectơ và là một bổ sung tuyệt vời cho bitmap, phiên bản này phù hợp hơn với hình ảnh có tông màu liên tục.
Một trong những điều hữu ích nhất về SVG là độ phân giải độc lập, nghĩa là bạn không cần phải suy nghĩ về số lượng pixel bạn có trên thiết bị của mình, kết quả sẽ luôn điều chỉnh theo tỷ lệ và được trình duyệt tối ưu hóa để trông đẹp mắt.
Các công cụ biên soạn phổ biến như ứng dụng Vẽ trong Google Drive, Inkscape, Illustrator, Corel Draw và nhiều công cụ khác tạo ra SVG, vì vậy sẽ có rất nhiều cách để tạo nội dung. Chúng ta sẽ tìm hiểu sâu hơn về một số cách sử dụng thành phần SVG, cùng với một số mẹo tối ưu hoá để giúp bạn bắt đầu.
Các 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 hình ảnh toàn trang làm hình nền cho trang web. Sẽ thực sự hữu ích khi luôn đặt biểu trưng công ty hoặc bất kỳ nội dung nào tương tự toàn màn hình trong nền, nhưng tất nhiên là rất khó để thực hiện tốt với tất cả các kích thước màn hình khác nhau. Để minh họa, chúng tôi 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 ra, biểu trưng này bắt nguồn dưới dạng tệp SVG.
Nhấp vào biểu trưng và xem biểu tượng trong bất kỳ trình duyệt hiện đại nào, bạn sẽ thấy biểu trưng thu phóng đẹp mắt theo bất kỳ cửa sổ có kích thước nào. Hãy thử mở ả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 rất sắc nét ở mọi độ phóng to. Nếu thử điều đó với hình ảnh bitmap, chúng tôi sẽ phải phân phát nhiều kích thước khác nhau cho mỗi màn hình có thể gặp hoặc bị buộc phải hiển thị những hình ảnh được điều chỉnh theo tỷ lệ pixel khủng khiếp.
Vậy vấn đề lớn là gì? Nếu bạn không biết thì đây là định dạng duy nhất điều chỉnh tỷ lệ độc lập với thiết bị chúng ta đang sử dụng để xem xét. 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 phải biết kích thước màn hình hoặc cửa sổ của họ là bao nhiêu – rất gọn gàng!
Nhưng chờ đã, có nhiều hơn nữa – biểu trưng HTML5 chỉ là 1427 byte! Rất tiếc, gói này nhỏ đến mức hầu như sẽ không làm hỏng bất kỳ gói dữ liệu di động nào khi tải, nhờ đó giúp tải nhanh hơn và nhanh hơn cho người dùng của bạn!
Một điều thú vị khác về các tệp SVG là chúng có thể được nén bằng GZIP để thu nhỏ chúng hơn nữa. Khi bạn nén SVG theo cách đó, đuôi tệp phải được đổi thành ".svgz". Trong trường hợp biểu trưng HTML5, biểu trưng này sẽ thu gọn 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 một điều gì đó giống như 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 so sánh này được thực hiện giữa JPEG và SVG, thay vì 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 tôi 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 bằng nhau. Một số mẹo tối ưu hoá khuyên bạn nên dùng JPEG thay vì PNG, nhưng đó không phải lúc nào cũng là ý tưởng hay. Hãy xem hình ảnh dưới đây. 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 là hình tương tự nhưng được mã hoá bằng JPEG.
Dễ thấy rằng việc lưu kích thước tệp ở định dạng JPEG sẽ tốn kém, với các thành phần màu sắc ở các cạnh sắc nét – có thể khiến retina của bạn nghĩ rằng nó cần được đ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 nó không tốt cho ảnh vectơ. Trong mọi trường hợp, phiên bản SVG vẫn có chất lượng giống như PNG để luôn chiến 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 một trang. Bạn có thể dễ dàng khai báo tệp nền bằng cách sử dụng vị trí cố định của 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ó kích thước đẹp mắt với các cạnh sắc nét.
Tất nhiên, chúng tôi muốn đặt một số nội dung làm nền.
Nhưng như bạn có thể thấy, kết quả không lý tưởng vì chúng ta không thể đọc được văn bản. Vậy chúng tôi làm gì?
Đang điều chỉnh nền để đẹp hơn
Điều hiển nhiên chúng ta cần làm là làm cho tất cả màu sắc trong hình nền sáng hơn. Bạn có thể dễ dàng đạt được điều 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 bằng cách thêm mã này vào nội dung CSS của mình:
#bg {
opacity: 0.2;
}
Thao tác này sẽ mang lại cho bạn kết quả như sau:
Giải pháp này tuy dễ dàng nhưng có thể ảnh hưởng đến hiệu suất trên thiết bị di động. Đối với hầu hết các trình duyệt hiện có dành cho thiết bị di động, việc sử dụng thuộc tính độ mờ có thể chậm hơn rất nhiều khi vẽ so với đối tượng mờ.
Giải pháp tốt 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ủa chúng tôi được sửa đổi để trông mờ hơn bằng cách thay đổi màu sắc được sử dụng và trong quá trình này, tránh hoàn toàn thuộc tính độ mờ. Vì vậy, hình nền dưới đây trông giống hệt với kết quả từ việc thay đổi độ mờ, nhưng thực tế sẽ vẽ nhanh hơn rất nhiều, giúp tiết kiệm thời gian CPU và tiết kiệm pin quý giá trong quá trình vẽ.
Giờ đây, chúng ta đã nắm được một số kiến thức cơ bản. Hãy cùng chuyển sang một số tính năng khác.
Sử dụng hiệu ứng chuyển màu
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 tròn đẹp mắt. Sau đó, chúng ta có thể thêm hiệu ứng chuyển màu tuyến tính đẹp mắt để tạo cho nút một hoạ tiết đẹp mắt. Mã để thực hiện việc này có thể 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 tô chuyển tiếp 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. Nhưng chúng ta có thể làm tốt hơn, vì một vài lý do khác nhau: tính thẩm mỹ và hiệu suất. Hãy thử thay đổi hướng chuyển màu để trông đẹp hơn một chút. Việc đặt các thuộc tính 'x1', 'y1', 'x2' và 'y2' trên độ dốc tuyến tính sẽ điều khiển hướng của màu tô.
Chỉ cần đặt thuộc tính "y2" là chúng ta có thể thay đổi độ dốc thành đường chéo. Vì vậy, sự thay đổi mã nhỏ này:
<linearGradient id="blueshiny" y2="1">
cho chúng ta một giao diện khác cho nút, nút sẽ có dạng 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 với sự thay đổi nhỏ về mã như sau:
<linearGradient id="blueshiny" x2="0" y2="1">
và kết quả sẽ là hình ảnh dưới đây.
Vậy, tất cả các cuộc thảo luận về các góc độ chuyển màu mà tôi nghe bạn hỏi có là gì?
Hoá ra ví dụ cuối cùng – ví dụ có độ dốc chạy từ trên xuống dưới là ví dụ nhanh nhất được vẽ trên hầu hết các thiết bị. Đó là một bí mật rất ít được biết đến giữa những người đam mê đồ hoạ, những người viết mã trình duyệt mà chuyển màu dọc (từ trên xuống dưới) tô màu gần như 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 phía dưới trang – và các phần trong mã vẽ hiểu rằng màu sắc không thay đổi trên mỗi dòng, do đó họ tối ưu hoá màu này).
Vì vậy, khi bạn chọn sử dụng tô chuyển tiếp trong thiết kế trang, hiệu ứng chuyển màu dọc sẽ nhanh hơn và tốn ít pin hơn. Việc tăng tốc này cũng áp dụng cho tính năng chuyển màu CSS, vì vậy, đây không chỉ là một tính năng của SVG.
Nếu chúng tôi cảm thấy thực sự phiêu lưu với kiến thức chuyển màu mới này, chúng ta có thể thêm một gradient thú vị vào phía sau biểu trưng HTML5 của mình 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 độ dốc tuyến tính dọc đã 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 dành cho máy tính và đổi kích thước thành tỷ lệ khung hình quá cao, bạn sẽ thấy các thanh màu trắng xuất hiện ở phía trên cùng/dưới cùng hoặc bên trái/bên phải. Dù sao thì sau khi những thay đổi mã được thực hiện phía trên nền tổng hợp, bạn sẽ thấy như sau:
Tạo ảnh động dễ dàng
Giờ đây, có thể bạn đang thắc mắc về việc sử dụng hiệu ứng chuyển màu SVG làm phông nền cho trang của mình. Bạn có thể làm như vậy với hiệu ứng chuyển màu CSS, nhưng một ưu điểm của SVG là chính 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 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 của SVG để thêm các thay đổi nhỏ vào nội dung.
Ví dụ: chúng ta sẽ sửa đổi biểu trưng HTML5 nhiều 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 này ở trên.
Mã này 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 tôi đã xác định trong một chu kỳ liên tục, mất 20 giây để chạy. Ảnh hưởng của việc đó là chuyển màu trông giống như đang di chuyển lên trên trang theo một chuyển động liên tục không bao giờ dừng lại.
Ưu điểm của tính năng này là không cần kịch bản! Đó là lý do tại sao mã này chạy dưới dạng hình ảnh được tham chiếu từ trang này, nhưng cũng giảm khối lượng công việc trên CPU di động bằng cách loại bỏ nhu cầu về tập lệnh.
Ngoài ra, bản thân trình duyệt cũng có thể tận dụng kiến thức của mình về tranh để đảm bảo mức hao tổn CPU tối thiểu được dùng để tạo ảnh động đẹp mắt.
Có một lưu ý: một số trình duyệt 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 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). Tuy nhiên, bài viết này sẽ không vượt quá 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 một hiệu ứng đồ họa phong phú như vậy, giúp người dùng của bạn và những gói dữ liệu đó hài lòng trong quá trình này.
Bạn muốn đi từ đâu?
Trong nhiều trường hợp, định dạng SVG không phải là công cụ lý tưởng, còn ảnh và video lại được thể hiện tốt hơn ở các định dạng khác. Văn bản là một loại khác, trong đó HTML và CSS gốc hoạt động tốt hơn nhiều. Tuy nhiên, là một công cụ trong kho vũ khí dành cho hình vẽ dạng đường kẻ có thể là lựa chọn lý tưởng.
Chúng tôi đã đề cập đến một số cách sử dụng cơ bản cho đồ hoạ SVG, cho thấy việc tạo nội dung nhỏ dễ dàng như thế nào, cung cấp đồ hoạ sống động toàn màn hình với lượng tải xuống tối thiểu. Các cải tiến nhỏ cho nội dung có thể dễ dàng tạo ra kết quả đồ họa ấn tượng bằng một lượng đánh dấu nhỏ. Trong bài viết tiếp theo, chúng ta sẽ tìm hiểu thêm một số thông tin chi tiết về cách sử dụng ảnh động được tạo trong SVG để tạo hiệu ứng đơn giản và hiệu quả 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 đồ họa dành cho thiết bị di động của bạn.
Các tài nguyên hữu ích khác
- Inkscape, một ứng dụng vẽ nguồn mở sử dụng SVG làm định dạng tệp.
- Mở Clip Art (Hình mẫu) một thư viện hình mẫu nguồn mở khổng lồ chứa hàng nghìn hình ảnh SVG.
- Trang SVG 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 một thư viện JavaScript cung cấp API thuận tiện để vẽ và tạo ảnh động cho 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 một đường liên kết tới SVG Primer tuyệt vời.