Sử dụng SVG trong HTML

Sử dụng SVG trong HTML

Anh NguyễnLeave a comment

Giới thiệu

Việc hiển thị hình ảnh trên nhiều màn hình có kích thước khác nhau là một vấn đề “đau đầu”, bởi cách sử dụng CSS thông thường rất tốn thời gian và công sức. Thay vào đó, thủ thuật SVG trong HTML lại rất được ưa chuộng bởi những tiện ích mà nó mang lại. Vậy SVG là gì? Hãy cùng tìm hiểu ngay nhé!

SVG là gì?

SVG (Scalable Vector Graphics) là định dạng ảnh vector dùng để thể hiện các đối tượng đồ họa hai chiều và có hỗ trợ tương tác từ phía người dùng cũng như ảnh động. Vì là hình ảnh dạng vector nên chúng ta có thể hiển thị, co giãn (scale) thoải mái mà không làm giảm chất lượng hình ảnh.

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ơ đồ.

Su dung SVG trong HTML 1

Điều gì làm cho đồ họa vector trở nên hấp dẫn đến mức rất nhiều công ty lớn trong ngành công nghệ cũng như hãng phần mềm thiết kế nhảy vào cùng phát triển? Bạn có thể tưởng tượng rằng trong đồ họa vector, mọi đường thẳng, đường cong, hình tròn, hình chữ nhật… đều được vẽ ra đều dựa vào các điểm tọa độ. Các điểm này sẽ được nối với nhau trong không gian hai chiều để tạo nên các hình ảnh thực sự. Bởi vì tọa độ này chỉ mang tính tương đối so với hệ trục tại thời điểm vẽ nên 1 đơn vị trong đồ họa vector có thể là 10 pixel, 20 pixel hay 100 pixel.

Chèn ảnh SVG vào trang

Ảnh SVG có thể được lưu thành file riêng biệt với trang hoặc vẽ trực tiếp trên trang. Nếu lưu ra file riêng biệt ví dụ image.svg thì ảnh được chèn vào trang bằng cách sử dụng thẻ img

Ví dụ tạo nội dung svg như sau và ghi lại thành file image.svg

<?xml version="1.0" standalone="no"?>
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
      stroke="orange" fill="transparent" stroke-width="5"/>

  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
      stroke="green" fill="transparent" stroke-width="5"/>

  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>
<img src="image.svg" alt="" height="300" />

Kết quả:

Tạo ảnh SVG

Các ảnh SVG được tạo ra bằng cách bắt đầu sử dụng thẻ <svg>, cú pháp có dạng:

<svg width="1000" height="1000">
    ....các thẻ vẽ, thiết lập ở đây
</svg>

Vẽ các hình trong SVG

Vẽ hình tròn SVG

Sử dụng thẻ vẽ hình tròn <circle>

<svg width="180" height="180">
    <circle cx="80" cy="80" r="50" fill="green" stroke="yellow"/>
</svg>

Các thuộc tính trong <circle> là:

  • cx vị trí tâm, tính từ mép trái của SVG
  • cy vị trí tâm, tính từ mép trên
  • r bán kính
  • fill xác định màu tô
  • stroke thêm đường biên

Kết quả:

Vẽ hình ellipse SVG

Dùng <ellipse> để vẽ ellipse:

<svg height="100" width="200">
    <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:green" />
</svg>

Kết quả:

Vẽ hình vuông

Dùng <rect> để vẽ hình vuông:

<svg width="340" height="120">
    <rect width="300" height="100"  x="20" y="20" fill="green" />
</svg>

Kết quả:

Vẽ đoạn thẳng SVG

Dùng <line> để vẽ các đoạn thẳng:

<svg width="220" height="60">
    <line x1="30" y1="10" x2="200" y2="50"
          style="stroke: green; stroke-linecap:round; stroke-width:20;"  />
</svg>

Kết quả:

Vẽ các đường gấp khúc svg

Dùng <polyline> để vẽ đường gấp khúc, trong đó thuộc tính points theo tứ tự chỉ ra các tọa độ x,y của các điểm cần nối lại với nhau:

<svg width="130" height="160">
    <polyline
            points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
            fill="#F9F38C" stroke="green" stroke-width="6" />

</svg>

Kết quả:

Vẽ hình đa giác trong svg

Dùng <polygon> đa giác, trong đó points xác định tọa độ x,y của các đỉnh đa giác:

<svg width="320" height="220">
    <polygon points="100 100, 200 200, 300 10"
             style="fill: green; stroke:#F9F38C;" stroke-width="5" />
</svg>

Kết quả:

Vẽ theo đường dẫn path – svg

Sử dụng <path> để vẽ các hình phức tạp, đường dẫn để vẽ được định nghĩa trong thuộc tính d="cách - lệnh vẽ"

Các lệnh sử dụng trong thuộc tính d là:

  • M : di chuyển điểm vẽ đến tọa độ x, y (M x y)
  • L : vẽ từ điểm hiện tại đến điểm x, y (L x y)
  • H : vẽ đường ngang từ điểm hiện tại đến điểm có tọa độ x (H x)
  • V : vẽ đường thẳng đứng đến điểm có tọa độ y (V y)
  • C : vẽ đường cong cubic-bezier từ điểm hiện tại x0, y0 đến điểm x, y. điểm đầu đường cong tiếp tuyến với đường thẳng x0,y0, x1, y1 điểm thứ 2 của đường cong tiếp tuyến với tường x,y, x2, y2 C x1 y1, x2 y2, x, y
  • S : vẽ đường cong trơn từ điểm hiện tại x0, y0 đến điểm x, y trong đó điểm đầu tiếp tuyến với đường x0,y0, x2, y2 S x2 y2, x y
  • Q : vẽ đường cong cubic-bezier từ điểm hiện tại x0, y0 đến điểm x, y. điểm đầu đường cong tiếp tuyến với đường thẳng x0,y0, x1, y1 điểm thứ 2 của đường cong tiếp tuyến với tường x,y, x1, y1 C x1 y1, x y
  • T : vẽ đường cong cubic-bezier, từ điểm hiện tại đến điểm x,y (T x y)
  • A : vẽ cung tròn
  • Z : đóng đường vẽ
<svg width="100" height="100">
    <path d="M 0 0 C 100 0, 0 100, 100 100"
          style="stroke:black; fill:green" />
</svg>

Kết quả:

Ảnh động SVG

Sử dụng <animate> để tạo ảnh động, ví dụ:

<svg width="500" height="30">
    <rect width="50" height="50" fill="orange">
        <animate attributeName="x" from="0" to="300"
                 dur="10s" fill="freeze" repeatCount="indefinite"/>
    </rect>
    <circle cx="0" cy="15" r="5" fill="green" stroke="yellow">
        <animate attributeName="cx" from="0" to="300"
                 dur="5s" fill="freeze" repeatCount="indefinite"/>
    </circle>

</svg>

Kết quả:

Trong <animate> có các thuộc tính:

  • attributeName : chỉ ra thuộc tính sẽ bị tác động để tạo ảnh động.
  • from : giá trị thuộc tính nhận được ban đầu
  • to : giá trị thuộc tính nhận được ở điểm cuối của hoạt động
  • dur : thời gian ảnh động diễn ra
  • fill : cách thiết lập khởi tạo tạo khi bắt đầu động remove khởi tạo giá trị, freeze giữ giá trị ban đầu.
  • repeatCount : chỉ ra số lần lặp lại (indefinite lặp lại vô tận)

Chèn chữ vào SVG

Để thêm chữ vào SVG bắt đầu tại tọa độ (x,y) thì sử dụng <text> ví dụ:

<svg width="500" height="30">
    <text x="10" y="10">Hello World!</text>
</svg>

Kết quả:

Hello World!

<text> có các thuộc tính: font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing, text-decoration.

tspan

Dùng để định dạng thêm chữ trong text

<svg width="500" height="100" style="background: #ffc107">
    <text x="50" y="30" font-weight="bold">Hello World!
        <tspan font-weight="bold" fill="red">This is bold and red</tspan>
    </text>
</svg>

Kết quả:

Hello World! This is bold and red

textPath

Vẽ text theo một đường cho trước:

<svg width="500" height="100" style="background: #ffc107">
    <path id="my_path" d="M 20,20 C 40,40 80,40 100,20" fill="transparent"></path>
    <text>
        <textPath xlink:href="#my_path">This text follows a curve.</textPath>
    </text>

</svg>

Kết quả:

This text follows a curve.

Công cụ

Sử dụng công cụ sau để vẽ nhanh SVG: https://inkscape.org/en/

Kết luận

Qua đây là một số chia sẻ về sử dụng SVG trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.

Các bạn có thể tham khảo các bài viết hay về HTML tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Leave a Reply

Your email address will not be published. Required fields are marked *