HTML - SVG: Hướng dẫn cơ bản về Vectorizzabile Scalabile (SVG)

Xin chào các bạn future web developers! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của SVG trong HTML. Đừng lo lắng nếu bạn là người mới bắt đầu - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ khám phá chủ đề này từng bước một. Vậy, hãy lấy một tách cà phê, và cùng nhau bắt đầu nhé!

SVG là gì?

SVG viết tắt của Scalable Vector Graphics. Bây giờ, tôi biết rằng điều này có thể听起来有点 kỹ thuật, nhưng hãy để tôi giải thích cho bạn một cách dễ hiểu.

Hãy tưởng tượng bạn đang vẽ một bức tranh. Khi bạn sử dụng định dạng hình ảnh thông thường như JPEG hoặc PNG, nó giống như vẽ bằng crayon. Bức tranh trông rất đẹp, nhưng nếu bạn cố gắng làm nó lớn hơn, nó bắt đầu bị mờ. Điều này là vì những hình ảnh này được tạo nên từ những điểm nhỏ gọi là pixel.

SVG, mặt khác, giống như vẽ bằng crayon ma thuật. Không matter how big or small bạn làm bức tranh của mình, nó luôn luôn sắc nét và rõ ràng. Điều này là vì SVG sử dụng các công thức toán học để tạo ra hình dạng và đường line, thay vì pixel.

Tính đặc biệt của SVG

Hãy cùng đi sâu hơn vào những gì làm cho SVG trở nên đặc biệt:

1. Tính mở rộng: Như tên gọi của nó, các hình ảnh SVG có thể được mở rộng đến bất kỳ kích thước nào mà không mất đi chất lượng. Cho dù bạn đang xem chúng trên một chiếc điện thoại nhỏ hay một bảng quảng cáo khổng lồ, chúng sẽ luôn trông sắc nét.

2. Kích thước tệp nhỏ: Vì SVG sử dụng các công thức toán học thay vì pixel, kích thước tệp thường nhỏ hơn nhiều so với các định dạng hình ảnh truyền thống.

3. Chỉnh sửa được: Bạn có thể chỉnh sửa các hình ảnh SVG bằng mã, điều này có nghĩa là bạn có thể thay đổi màu sắc, hình dạng và kích thước mà không cần phần mềm chỉnh sửa hình ảnh.

4. Khả năng truy cập: Các hình ảnh SVG có thể bao gồm văn bản mà screen reader có thể đọc được, làm cho trang web của bạn trở nên khả năng truy cập hơn cho người có khuyết tật thị giác.

Cách sử dụng SVG trong HTML

Bây giờ chúng ta đã biết SVG là gì, hãy xem cách chúng ta có thể sử dụng nó trong HTML. Có một số cách để làm điều này:

1. Inline SVG: Điều này có nghĩa là đặt mã SVG trực tiếp vào tệp HTML của bạn.

<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

2. Sử dụng thẻ <img>: Bạn có thể sử dụng SVG như bất kỳ hình ảnh nào khác.

<img src="circle.svg" alt="Một vòng tròn vàng với viền xanh">

3. Sử dụng CSS background-image: Bạn có thể đặt một SVG làm hình ảnh nền trong CSS.

<div style="background-image: url('circle.svg');"></div>

4. Sử dụng thẻ <object>: Điều này cho phép bạn bao gồm các tệp SVG bên ngoài.

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

Thẻ bên trong phần tử SVG

SVG có bộ thẻ riêng để bạn có thể sử dụng để tạo ra các hình dạng và thiết kế khác nhau. Dưới đây là một số thẻ phổ biến:

Thẻ	Mô tả
<circle>	Tạo một vòng tròn
<rect>	Tạo một hình chữ nhật
<line>	Tạo một đường
<path>	Tạo hình dạng phức tạp
<text>	Thêm văn bản vào SVG
<g>	Nhóm các phần tử SVG lại với nhau

Hãy xem một ví dụ sử dụng một số thẻ này:

<svg width="200" height="200">
<rect x="0" y="0" width="100" height="100" fill="red" />
<circle cx="150" cy="50" r="40" fill="blue" />
<line x1="0" y1="150" x2="200" y2="150" stroke="green" stroke-width="4" />
<text x="10" y="180" fill="purple">Hello, SVG!</text>
</svg>

Trong ví dụ này, chúng ta đã tạo một hình vuông đỏ, một vòng tròn xanh, một đường xanh và một văn bản tím, tất cả đều trong một canvas SVG 200x200 pixel.

Các thuộc tính của phần tử SVG

Các phần tử SVG có nhiều thuộc tính khác nhau để kiểm soát vẻ ngoài và hành vi của chúng. Dưới đây là một số thuộc tính phổ biến:

Thuộc tính	Mô tả
width và height	Đặt kích thước của SVG
fill	Đặt màu sắc bên trong hình dạng
stroke	Đặt màu sắc của đường viền hình dạng
stroke-width	Đặt độ dày của đường viền hình dạng
x và y	Đặt vị trí của phần tử
cx và cy	Đặt điểm trung tâm của một vòng tròn
r	Đặt bán kính của một vòng tròn

Ví dụ về phần tử SVG trong HTML

Hãy tập hợp tất cả những điều này với một số ví dụ phức tạp hơn:

1. Một khuôn mặt cười:

<svg width="200" height="200">
<circle cx="100" cy="100" r="90" fill="yellow" />
<circle cx="70" cy="80" r="20" fill="black" />
<circle cx="130" cy="80" r="20" fill="black" />
<path d="M 50 140 Q 100 180 150 140" stroke="black" stroke-width="5" fill="none" />
</svg>

Ví dụ này tạo ra một vòng tròn vàng cho khuôn mặt, hai vòng tròn đen cho mắt, và một đường cong cho nụ cười.

2. Một ngôi nhà đơn giản:

<svg width="200" height="200">
<rect x="50" y="100" width="100" height="80" fill="lightblue" />
<polygon points="50,100 100,50 150,100" fill="red" />
<rect x="80" y="130" width="40" height="50" fill="brown" />
</svg>

Ví dụ này tạo ra một hình chữ nhật xanh lam cho ngôi nhà, một tam giác đỏ cho mái nhà, và một hình chữ nhật nâu cho cửa.

Nhớ rằng, chìa khóa để thành thạo SVG là thực hành. Hãy thử thay đổi các ví dụ này, thay đổi màu sắc, kích thước và vị trí. Thử nghiệm với các hình dạng khác nhau và xem bạn có thể tạo ra gì!

Cuối cùng, SVG là một công cụ mạnh mẽ để tạo ra các hình ảnh mở rộng, hiệu quả trên web. Khi bạn tiếp tục hành trình trong phát triển web, bạn sẽ thấy rằng SVG mở ra một thế giới của khả năng tạo ra các thiết kế hấp dẫn, tương tác và phản hồi. Hãy tiếp tục thực hành, và sớm bạn sẽ tạo ra các hình ảnh SVG tuyệt vời của riêng bạn!

Credits: Image by storyset