Viewport và viewBox trong SVG (Cho người mới bắt đầu)

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong bài này, chúng ta sẽ tìm hiểu về viewport và viewBox trong SVG. Bạn sẽ được học:

Sự khác nhau giữa viewport và viewBox
Các khía cạnh của SVG mà bạn có thể kiểm soát
Chúng được áp dụng như thế nào

Nào hãy cùng tìm hiểu nhé!

viewport

Nếu bạn để ý kỹ chữ "viewport" thì bạn sẽ nhận thấy vai trò của nó trong SVG; nó tạo ra một "port" tức là cổng thông qua cái mà bạn có thể "view" tức là nhìn thấy một section của một SVG. Bạn có thể tưởng tượng điều này như là một khe cửa sổ thông qua đó bạn có thể thấy được thế giới còn lại.

Cũng như một cửa sổ, kích thước của viewport xác định bạn có thể nhìn thấy được bao nhiêu, nhưng nó không xác định bất cứ kích thước nào có thể hiện ra thông qua viewport đó. Mặt khác, về mặt lý thuyết có thể là bất kỳ kích thước nào.

Ví dụ, bạn có thể có một cái hình 100px x 100px, nhưng nếu bạn thiết lập viewport thành 50px x 50px, bạn sẽ chỉ thấy một phần của cái hình đó. Kích thước viewport được thiết lập bằng cách thêm các thuộc tính width và height vào phần tử svg, như sau:

Please accept marketing cookies to load this content.

Trong hình SVG đầu tiên, chúng ta nhìn thấy toàn bộ vòng tròn 100px x 100px, nhưng trong SVG thứ hai khi chúng tôi thiết lập kích thước viewport của chúng ta là 50px x 50px, chúng ta chỉ thấy một phần tư vòng tròn.

viewBox

viewBox có thể được xem như là viewport những có thêm những chức năng: nó có thể "dịch chuyển" và nó có thể "phóng to". Xây dựng dựa trên sự tương đồng với "nhìn thông qua gương", nếu viewport giống như là một cửa sổ, thì viewBox giống như một cái ống nhòm.

các tham số của viewBox

Chúng ta kiểm soát viewBox bằng cách thêm nó vào svg dưới dạng một thuộc tính, với một giá trị bao gồm bốn con số cách nhau bởi khoảng trắng:

1	viewBox = <min-x> <min-y> <width> <height>
2

Hai con số đầu tiên xác định vị trí của viewBox, cái mà chúng ta xem nó như là sự dịch chuyển. Hai con số phía sau xác định kích thước của viewBox, cái mà chúng ta xem như là cái kính lúp.

Lưu ý: tương tự như phần tử svg, thuộc tính viewBox cũng có thể được sử dụng trên các phần tử symbol, marker, pattern và view.

Phóng đại

Chúng ta bắt đầu bằng cách tìm hiểu khả năng phóng đại, chúng ta có thể làm điều này với hai tham số phía sau của viewBox: width và height tương ứng. Chúng ta sẽ để nguyên hai tham số đầu tiên là 0 0.

Nếu hai tham số phía sau có cùng kích thước, sẽ không có phóng to hay thu nhỏ vì thế không có gì thay đổi cả. Hay xem ví dụ SVG số 3:

Please accept marketing cookies to load this content.

Nếu nếu chúng ta làm cho hai con số lớn hơn kích thước viewport chúng ta sẽ phóng to, và nếu chúng ta làm cho chúng nhỏ hơn chúng ta sẽ thu nhỏ.

Please accept marketing cookies to load this content.

Trong SVG số 4 ở trên chúng tôi đã thiết lập width và height của viewBox thành 100, gấp đôi kích thước của viewport. Nó phóng to hai lần nội dung, do đó lần nữa hiển thị toàn bộ hình tròn.

Trong SVG thứ 5 viewBox được thiết lập width và height là 25, bằng phân nửa của viewport. Điều này thu nhỏ, hiển thị phân nửa nội dung.

Sự dịch chuyển

Hai tham số đầu tiên của viewBox cho phép bạn xác định vị trí bằng cách thiết lập vị trí của góc trên bên trái của viewBox. Số đầu tiên xác định vị trí theo chiều dọc, và thứ hai xác định vị trí theo trục đứng.

Để dịch chuyển sang phải, tăng số đầu tiên.
Để dịch sang trái, giảm số đầu tiên.
Để dịch chuyển xuống phía dưới, tăng số thứ hai.
Để dịch chuyển lên trên, giảm số thứ hai.

Hãy xem nó hoạt động thế nào trong ví dụ này. Hãy nhớ là, SVG số 3 có viewport là 50 x 50, viewBox đã được thêm vào nhưng chưa có dịch chuyển hay phóng đại. Số 6 thì tương tự, nhưng dịch chuyển về bên phải và xuống dưới:

Please accept marketing cookies to load this content.

Dịch chuyển và Phóng đại cùng lúc

Tất nhiên bạn có thể vừa dịch chuyển vừa phóng đại cùng lúc, bằng cách sử dụng tất cả các tham số cùng một lúc, ví dụ:

Please accept marketing cookies to load this content.

Khi sử dụng viewBox, hãy thiết lập viewport

Bất cứ khi nào bạn sử dụng thuộc tính viewBox, hãy nhớ thiết lập kích thước viewport nữa. Nếu không, chúng sẽ mặc định là 100% và bạn có thể có một cái hình quá khổ.

Please accept marketing cookies to load this content.

Tóm tắt

Nào hãy tóm tắt mọi thứ lại:

viewport tương tự như một cái cửa sổ mà bạn nhìn xuyên qua nó để thấy nội dụng của một SVG.
viewBox tương tự như viewport, nhưng bạn còn có thể sử dụng nó để dịch chuyển và phóng đại giống như một cái ống nhòm.
Kiểm soát viewport thông qua thuộc tính width và height trên phần tử svg.
Kiểm soát viewBox bằng cách thêm thuộc tính viewBox và phần tử svg. Nó còn có thể được sử dụng trên các phần tử symbol, marker, pattern và view.
Giá trị thuộc tính của viewBox được kết hợp từ bốn tham số cách nhau bởi khoảng trắng.
Hai tham số đầu tiên của viewBox kiểm soát sự dịch chuyển và hai tham số sau kiểm soát độ phóng đại.
Tăng tham số đầu tiên lên để dịch chuyển về bên phải, giảm để dịch chuyển về bên trái.
Tăng tham số thứ hai lên để dịch chuyển xuống dưới, giảm để dịch chuyển lên trên.
Tạo nên kích thước của viewBox, đó là hai tham số phía sau, lớn hơn viewport để phóng đại, và nhỏ hơn để thu nhỏ.

Tôi hy vọng bài viết đã làm rõ phần nào viewport và viewBox trong SVG. Tạo SVG vui vẻ nhé!

Tìm hiểu thêm về SVG cơ bản

SVG

Cách viết code SVG

Kezz Bracey
SVG

SVG cho thiết kế web trong 60 giây

Kezz Bracey
SVG

Cách sử dụng "animateTransform" cho Hoạt ảnh Inline SVG

Kezz Bracey