Web front-end (14) - HTML - Hình ảnh_svg

Bài trước: Web front-end (13) - HTML - Hình ảnh_img

-----

1.1.1       Ảnh SVG

Ở phần trên, chúng ta đã chèn ảnh kiểu bitmap (ví dụ GIF, JPEG, PNG) vào trang web. Với ảnh kiểu bitmap, trình duyệt chỉ việc tải ảnh từ server về và hiển thị. Phần này, chúng ta sẽ tìm hiểu cách chèn một kiểu định dạng khác của hình ảnh. Đó là ảnh kiểu SVG.

Ảnh SVG (Scalable Vector Graphics) là ảnh có định dạng kiểu vector (công thức toán học), nghĩa là các hình khối, đường nét không phải là các điểm ảnh trên lưới (grid of pixels), mà nó ở dạng mô tả bằng toán học. Các định nghĩa này được viết dưới dạng văn bản (text).

Người ta sử dụng ngôn ngữ đánh dấu, theo chuẩn SVG để tạo ra hình ảnh. Như trong HTML, để tạo ra đoạn có phần tử p, tạo bảng có phần tử table; với SVG cũng có các phần tử tương tự, để tạo hình chữ nhật có phần tử rect, tạo hình tròn có phần tử circle, tạo đường nét có phần tử path.

Với ảnh SVG, trình duyệt sẽ dựa trên mô tả của ảnh để “vẽ” lại. Do vậy, nếu trình duyệt không hỗ trợ, tức là nó không có thành phần thực thi các khai báo SVG, thì chúng ta sẽ không có hình ảnh trên giao diện. Cũng dễ nhận thấy là việc tải ảnh SVG từ server về trình duyệt sẽ nhanh hơn, do nó chỉ là văn bản. Nhưng việc hiển thị ảnh thì sẽ mất thời gian và tài nguyên của máy người dùng do quá trình “vẽ” ảnh.

Chúng ta sẽ cùng làm một ví dụ đơn giản, sử dụng trình duyệt để vẽ một hình chữ nhật, nền đen, và chữ “bác Tèo” màu trắng. Bạn chép đoạn mã này vào tập tin .html và xem kết quả bằng trình duyệt,

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">

          <rect width="200" height="60" fill="black" rx="20" ry="20" />

          <text x="10" y="40" fill="white" font-family="arial" font-size="16">

               bác Tèo

          </text>

     </svg>

Giải thích đoạn mã trên:

– Phần tử svg dùng để tạo ra một ảnh SVG, thuộc tính xmlns cho biết phần tử svg và các phần tử con của nó sẽ thuộc namespace nào.

– Phần tử rect (rectangle) là con của svg, dùng để tạo hình chữ nhật, được bo góc bằng hai thuộc tính (rx: x-radius, ry: y-radius)

– Phần tử text là con của svg, chứa nội dung văn bản, cùng với các thuộc tính định dạng văn bản

Ảnh SVG cũng có dạng hoạt hình (animated), bạn cũng có thể định dạng ảnh SVG bằng CSS và lập trình tương tác với ảnh bằng JavaScript.

Nhược điểm của ảnh SVG là tính tương thích với các trình duyệt chưa được rộng rãi, bị giới hạn về độ chi tiết và màu sắc.

Thêm ảnh SVG cho trang web

Để thêm ảnh SVG vào trang web, chúng ta có một số cách sau:

– Sử dụng phần tử img

– Sử dụng phần tử svg

– Sử dụng một object

– Sử dụng CSS

Sử dụng phần tử img

Tập tin ảnh SVG có phần mở rộng là .svg. Chúng ta có thể xem nó như là các tập tin hình ảnh dạng PNG, JPEG hay GIF. Do vậy, bạn có thể sử dụng phần tử img để chèn ảnh SVG cho trang web. Ví dụ: vào google, gõ từ khóa “rose SVG”, tải một tập tin bất kì về máy (rose.svg). Mở tập tin rose.svg bằng chương trình soạn thảo mã nguồn bất kì (ví dụ notepad) để xem nội dung của tập tin rose.svg.

[rose.svg]

<?xml version="1.0" encoding="iso-8859-1"?>

<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

     width="491.279px" height="491.279px" viewBox="0 0 491.279 491.279" style="enable-background:new 0 0 491.279 491.279;"

     xml:space="preserve">

...

Nhập đoạn mã sau để xem kết quả.

<img src="rose.svg" alt="">

Ưu điểm của việc sử dụng img để thêm một ảnh SVG là được nhiều trình duyệt hỗ trợ. Tuy nhiên, nó cũng có một số hạn chế khi bạn muốn định dạng và xử lý các phần tử bên trong SVG bằng CSS và JavaScript. Ví dụ, bạn chỉ có thể định dạng các phần tử con của svg bằng phần tử style trong chính tập tin .svg, chứ không thể định dạng bằng các luật CSS trong tập tin .css của toàn trang web.

Cách thêm ảnh SVG bằng phần tử img thích hợp trong trường hợp chúng ta chỉ muốn chèn một ảnh minh họa, một ảnh tĩnh mà không cần phải có hiệu ứng hay tương tác, như logo, biểu tượng (icon).

 Sử dụng phần tử svg

Đây là cách thứ 2 để thêm một ảnh SVG vào trang web.

Chúng ta sẽ sử dụng phần tử svg để nhúng trực tiếp các khai báo tạo ảnh SVG trong mã nguồn HTML, gọi là chèn ảnh SVG kiểu inline. Thực chất là đem nội dung của một tập tin .svg, chèn trực tiếp vào tài liệu HTML. Như ở phần trên, chúng ta cũng đã chèn một hình chữ nhật và chữ “bác Tèo” theo cách này.

Phần này chúng ta sẽ tạo ra hình ảnh của một cái bánh pizza bằng các khai báo của SVG.

<p>bác Tèo nướng bánh Pizza:

        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" width="100"

        height="100">

        <circle fill="#D4AB00" cx="36" cy="36" r="36"/>

        <circle opacity=".7" fill="#FFF" stroke="#8A291C" cx="36.1" cy="35.9"

        r="31.2"/>

        <circle fill="#A52C1B" cx="38.8" cy="13.5" r="4.8"/>

        <circle fill="#A52C1B" cx="22.4" cy="20.9" r="4.8"/>

        <circle fill="#A52C1B" cx="32" cy="37.2" r="4.8"/>

        <circle fill="#A52C1B" cx="16.6" cy="39.9" r="4.8"/>

        <circle fill="#A52C1B" cx="26.2" cy="53.3" r="4.8"/>

        <circle fill="#A52C1B" cx="42.5" cy="27.3" r="4.8"/>

        <circle fill="#A52C1B" cx="44.3" cy="55.2" r="4.8"/>

        <circle fill="#A52C1B" cx="54.7" cy="42.9" r="4.8"/>

        <circle fill="#A52C1B" cx="56" cy="28.3" r="4.8"/>

        </svg>

        mlem mlem.</p>

Chèn ảnh SVG theo cách này có ưu điểm là bạn có thể định dạng các phần tử con của svg bằng CSS kiểu external và lập trình tương tác bằng JavaScript. Lý do là trình duyệt sẽ coi các phần tử con của svg cũng là một thành phần của cây DOM như các phần tử HTML khác.

Hạn chế của phương pháp này là làm cho tài liệu HTML phình lớn, phức tạp và khó đọc. Như trên chúng ta đã thấy, chỉ hiển thị hình một cái bánh pizza, nhưng mã nguồn khá nhiều và phức tạp. Chèn ảnh SVG theo kiểu này cũng không tận dụng được cơ chế “cache ảnh” của trình duyệt.

 Sử dụng một object

Objet là đối tượng đa năng của  HTML, chúng ta có thể sử dụng nó để nhúng một ảnh SVG cho trang web. Sử dụng object là một cách kết hợp giữa chèn ảnh SVG kiểu inline và sử dụng phần tử img. Nó vừa đảm bảo các tính chất của một ảnh SVG, vừa tách nội dung ảnh thành một tập tin riêng, vừa sử dụng được cơ chế “cache ảnh” của trình duyệt.

Object còn cho phép chúng ta thêm đoạn mã, để tải một ảnh dự phòng (fallbacks) trong trường hợp không tải được ảnh SVG.

     <object type="image/svg+xml" data="pizza.svg">

        <img src="pizza.png" alt="pizza">

    </object>

Ở đoạn mã trên, thuộc tính type xác định định dạng dữ liệu (ảnh kiểu svg+xml), thuộc tính data chỉ ra tên và vị trí của tập tin ảnh SVG. Phần tử img được sử dụng để tải ảnh dự phòng (pizza.png).

Một vài trình duyệt sẽ luôn tải ảnh dự phòng về máy người dùng, nhưng lại không dùng đến. Điều này không tối ưu cho tốc độ tải trang web. Để khắc phục, chúng ta sẽ thay thế phần tử img bằng một “div rỗng”, sau đó, chèn ảnh dự phòng bằng CSS, dưới hình thức ảnh nền của div. Xem ví dụ:

    <object type="image/svg+xml" data="pizza.svg">

        <div style="background-image: url(pizza.png); width: 100px; height:

        100px;" role="img" aria-label="pizza"></div>

    </object>

Ưu điểm của việc nhúng ảnh SVG bằng phần tử object là việc tách mã SVG thành tập tin riêng và chúng ta có thể xử lý bằng JavaScript. Tuy nhiên, vì mã SVG nằm trong tập tin riêng, nó không phải là một phần của DOM, vì vậy chúng ta cũng không thể thực hiện CSS kiểu external lên các phần tử con của SVG.

Sử dụng CSS

Đây là cách thứ 4 mà chúng ta có thể sử dụng để chèn một ảnh SVG cho trang web. Vì chúng ta chưa học CSS, nên chỉ lướt qua một đoạn mã ví dụ sau:

    header {

        background-image: url(/images/decorative.svg);

    }

Đoạn mã trên sẽ chèn hình ảnh decorative.svg cho phần tử header của trang web.

Ở các phần trên, chúng ta có đề cập đến kĩ thuật dự phòng trong trường hợp không thể hiển thị được ảnh SVG. Có một giải pháp hay hơn để làm việc này là sử dụng phần tử picture để hiển thị ảnh. Chúng ta sẽ tìm hiểu về phần tử picture ở phần sau.

-----

Cập nhật: 12/5/2024
-----

Tải tài liệu đầy đủ: Tự học HTML căn bản