Tạo hình khối với SVG

Admin

7 năm trước

SVG là gì?

SVG (viết tắt của Scalable Vector Graphics) là một ngôn ngữ đánh dấu (markup language) XML và dùng để miêu tả các hình ảnh đồ họa véc tơ hai chiều, tĩnh và hoạt hình, thường dành cho ứng dụng trên các trang mạng.

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

Tại sao sử dụng SVG?

Vì là định dạng đồ họa vectơ, lợi điểm của SVG là khả năng hiển thị tốt ở mọi kích cỡ và độ phân giải. Với một kích thước tương tự, một tập tin SVG có thể chứa nhiều thông tin hơn là một tập tin định dạng nhị phân khác (GIF, PNG,…).
SVG là một chuẩn mở, nó cho phép việc tùy biến theo mục đích sử dụng một cách dễ dàng. Các hình ảnh SVG có thể được dễ dàng sửa chữa và phát triển sau này, khác với đồ họa mảng thường là sản phẩm cuối cùng của các xử lý ảnh, không chứa mã nguồn các lớp ảnh.
Các tập tin SVG ở dạng văn bản, việc chỉnh sửa có thể thực hiện bằng các trình soạn thảo đơn giản nhất.

SVG trên trang HTML

SVG có thể dễ dàng nhúng vào trang HTML, cú pháp như sau.

<svg width="" height="">
    [element code here..]
</svg>

Như bạn thấy, SGV là một thẻ riêng. SVG cần width và height để chứa các thành phần của mình.

Tạo hình tròn

Cú pháp như sau.

<svg height="300" width="300">
    <circle cx="60" cy="60" r="50" style="fill: blue; stroke: black; stroke-width: 2px;" />
</svg>

Kết quả:

Tạo hình chữ nhật

Cú pháp như sau.

<svg height="300" width="300">
    <rect width="250" height="100" rx="11" ry="11" style="fill: yellow; stroke: green; stroke-width: 4px;"/>
</svg>

Kết quả:

Tạo hình bầu dục

Cú pháp như sau.

<svg height="300" width="300">
    <ellipse cx="190" cy="70" rx="100" ry="50" style="fill:red; stroke:green;stroke-width:2"/>
</svg>

Kết quả:

Tạo đường thẳng

Cú pháp như sau.

<svg height="300" width="300">
    <line x1="0" y1="0" x2="100" y2="150" style="stroke:#000; stroke-width:5" />
</svg>

Kết quả:

Nhiều đường nét

Cú pháp như sau.

<svg height="300" width="300">
    <polyline points="60,50 150,120 100,220 200,170" style="fill:none;stroke:black;stroke-width:3" />
</svg>

Kết quả:

Tạo hình lục giác

Cú pháp như sau.

<svg height="300" width="300">
    <polygon points=" 60,20 100,40 100,80 60,100 20,80 20,40" style="fill:cyan;stroke:red;stroke-width:1" />
</svg>

Kết quả:

Tạo nét vẽ

Cú pháp như sau.

<svg height="300" width="300">
    <path d="M 30 40 C 140 -30 180 90 20 160 L 120 160" style="fill: none; stroke: black; stroke-width: 6px;" />
</svg>

Kết quả:

Viết chữ trong SVG

Cú pháp như sau.

<svg height="300" width="300">
    <text x="20" y="30" fill="blue" font-size="20">This a great sample for Text SVG! </text>
</svg>

Kết quả:

Kết luận

Bạn có thể áp dụng SVG để vẽ những hình khối đơn giản hay thậm chí hình ảnh phức tạp. Chúc các bạn thành công!