Lập trình web

Hướng dẫn tạo vector trên Website bằng SVG

Chia sẻ nhanh

Chắc hẳn nói tới SVG không ít các nhà thiết kế website phải ngao ngán lắc đầu. Lý do vô cùng đơn giản nó là phức tạp, lằng nhằng và rối rắm. Nói chung là mất thời gian khi tạo bức ảnh bằng các định dạng như JPG, PNG hay GIF v.v... Nhưng tôi chắc chắn rằng, với hướng dẫn cơ bản này, sẽ giúp các bạn tiếp cận SVG và các bạn sẽ cảm thấy nó đơn giản hơn rất rất nhiều so với những gì chúng ta tưởng tượng.

Hướng dẫn tạo vector trên website bằng SVG

Trong quá khứ, định dạng ảnh duy nhất được các trình duyệt hỗ trợ đó là GIF. Một định dạng hình ảnh được phát triển bởi CompuServe. Sau đó tới JPG, JPEG.. rồi PNG. Sau một thời gian phát triển, SVG cũng đã được phát triển vào năm 1999 với mục đích đáp ứng đồ họa 2 chiều dạng vector trên website.

SVG là gì?

SVG được viết tắt bởi cụm từ Scalable Vector Graphics, là một định dạng hình ảnh vector dựa trên XML cho web. Không giống như GIF, PNG hay JPG, SVG có khả năng thay đổi kích thước mà vẫn đáp ứng được chất lượng về hình ảnh. Thuộc tính rất quen thuộc với những người đã sử dụng một số chương trình tạo vector như Corel Draw hay Illustartor.

Với tính năng như một tập tin XML, SVG có thể được tạo ra tùy biến và tương thích với các tiêu chuẩn W3C như DOM và XSL.

Vì sao lại sử dụng SVG?

Việc sử dụng SVG sẽ tạo ra vô số các thuận lợi cho website của bạn. Điển hình như sau
- Chúng có thể tạo ra và chỉnh sửa với bất kì trình soạn thảo văn bản nào
- Có thể in ấn với độ phân giải chất lượng cao
- Có thể sử dụng cho các hiệu ứng chuyển động
- Kích thước thay đổi tùy biến
- Tương thích tốt với các thiết bị Retina
- W3C khuyến khích các bạn sử dụng
- Tương thích rất tốt với các tiêu chuẩn khác như DOM và XSL

SVG trong HTML

Trong hai phần trên, chúng ta đã đi qua khái niệm và các lợi ích nên sử dụng SVG. Phần này tôi sẽ giới thiệu cho các bạn các thức sử dụng chúng trong các file HTML.

Việc sử dụng SVG trong HTML vô cùng đơn giản. Các bạn chỉ cần sử dụng nó trong thẻ SVG tương tự như sau

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


Thẻ SVG tương tự như là một bức tranh vậy, các bạn phải định dạng cho nó chiều rông và chiều cao để hiển thị các yếu tố trong nó.

Các yếu tố bao gồm:
- Hình tròn
- Hình chữ nhật
- Hình elip
- Đường thẳng
- Đường gấp đoạn
- Hình đa giác
- Đường path
- Văn bản

Tôi sẽ hướng dẫn các bạn tất cả cách thức tạo nên các yếu tố trên. Nếu như bạn chưa sử dụng SVG thì đây là một khởi đầu tốt cho bạn tiếp cận nó. Hãy cùng tôi bắt tay vào hướng dẫn tuyệt vời này :)

Tạo hình tròn bằng SVG
SVG code

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


Kết quả

Hướng dẫn tạo vector trên website bằng SVG

Trong ví dụ này, tôi sử dụng thẻ circle và định nghĩa cho nó cx (x coordinates) và cy (y coordinates) lần lượt là tọa độ X và Y của tâm hình tròn. Tiếp đến tôi xác định bán kính của nó bằng thuộc tính r (radius). Sau cùng là tô mầu theo thể loại Fill Collor, Stroke color v.v...

Tạo hình chữ nhật bằng SVG

SVG code

<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ả

Hướng dẫn tạo vector trên website bằng SVG
Trong ví dụ này tôi sử dụng thẻ rect với chiều rộng (width), chiều cao (height), bán kính bo tròn góc ( rx và ry ). Bạn có thể bỏ thuộc tính rx và ry nếu bạn muốn vẽ một hình chữ nhật vuông thành sát cạnh.

Tạo hình Ellipse bằng SVG
SVG code

<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ả

Hướng dẫn tạo vector trên website bằng SVG

Tương tự như các ví dụ trên, tôi sử dụng cx và cy để xác định vị trí tọa độ tâm của hình ellipse. rx và ry lần lượt là bán kính bo tròn của hình trong thẻ ellipse

Tạo đường thẳng bằng SVG
SVG code

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


Kết quả

Hướng dẫn tạo vector trên website bằng SVG
Trong ví dụ này, tôi sử dụng x1 (x-axis) và y1 (y-axis) để xác định ví trí tọa độ điểm bắt đầu của đường thằng. x2 và y2 lần lượt là tọa độ của điểm kết thúc.

Tạo đường Polyline (đường gấp) bằng SVG

SVG code

<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ả

Hướng dẫn tạo vector trên website bằng SVG
Ở đây, thuộc tính point bao gồm tọa độ xy của từng điểm gấp mà bạn muốn vẽ.

Tạo hình đa giác bằng SVG

SVG code

<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ả

Hướng dẫn tạo vector trên website bằng SVG

Trong ví dụ này, tôi sử dụng thẻ polygon để vẽ hình đa giác 6 cạnh. Để vẽ chính xác nó, chỉ cần xác định ra 6 điểm của hình đa giác này.

Tạo đường paths bằng SVG

Đường paths là một dạng đường thẳng có thể vẽ tùy biến theo các cánh tay đòn. Hic. xin phép cho tôi bỏ qua khái niệm về đường paths vì nó quá quen thuộc với các designer đã từng sử dụng photoshop hay các phần mềm design đoại loại như vậy.

Để vẽ đường paths bằng SVG các bạn cần quan tâm tới các thuộc tính quan trọng của nó.
- M: move to
- L: line to
- V: vertical line to
- H: horizontal line to
- C: curve to
- S: smooth curve to
- T: quadratic bézier curve
- A: elliptical arc
- Z: close path
Lưu ý rằng: chữ hoa có nghĩa là vị tuyệt đối còn chữ thường sẽ có vị trí tương đối. Để rõ ràng hơn, các bạn xem ví dụ sau

SVG code

<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ả

Hướng dẫn tạo vector trên website bằng SVG

Trong ví dụ này, tôi sử dụng M 30 40 - nghĩa là tôi xác định tọa độ điểm đâu với x = 30 y = 40, sau đó move chúng tới đường cong C 140 -30 180 90 20 160, và sau cùng là một đường thẳng L 120 160

Tạo văn bản bằng SVG

SVG code

<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ả
Hướng dẫn tạo vector trên website bằng SVG
Để vẽ đoạn văn bản bằng SVG các bạn chỉ cần sử dụng thẻ text với tọa độ x y điểm bắt đầu của đoạn văn bản, sau đó là font-size (kích thước của văn bản) tương tự như ví dụ trên.

Tạo SVG bằng Adobe illustrator

Trong phần trên, chúng ta đã biết để vẽ các thành phần cơ bản bằng các đoạn mã và thẻ. Tuy nhiên để trực quan hơn, các bạn có thể sử dụng các chương trình thiết kế khác để tạo ra chúng. Ở đây tôi sẽ hướng dẫn các bạn cách thức sử dụng chương trình Adobe Illustrator phổ biến để tạo file SVG với hình ngôi sao.

Các bạn tạo mới một document với tên tùy ý, ở đây tôi đặt là Star-SVG cho dễ nhớ.

Hướng dẫn tạo vector trên website bằng SVG

Trong Document Profile, bạn chọn Web. Còn kích thước thì tùy bạn. Ở đây tôi chọn 800x600 cho phổ biến.

Tiếp theo bạn sử dụng công cụ Star tool trên thanh công cụ và vẽ ngôi sao với kích thước tùy ý.

Hướng dẫn tạo vector trên website bằng SVG

Hướng dẫn tạo vector trên website bằng SVG

Tiếp đến là tôi tô mầu. bạn sử dụng bảng color rồi lựa chọn mầu mà bạn thích.

Hướng dẫn tạo vector trên website bằng SVG

Tiếp đến bạn sử dụng công cụ Artboard tool. Để lấy ra hình ngôi sao và loại bỏ phần trắng dư thừa.



Hướng dẫn tạo vector trên website bằng SVG

Sau cùng, bạn save nó dưới định dạng SVG.

Hướng dẫn tạo vector trên website bằng SVG

Và điều chỉnh cấu hình khi save as

Hướng dẫn tạo vector trên website bằng SVG

Trong hộp thoại mới này bạn có thể click vào button Show SVG code để nghía

Hướng dẫn tạo vector trên website bằng SVG

Tổng kết

Sử dụng SVG trong dự án thiết kế website của bạn sẽ mang lại rất nhiều lợi thế. Với sự phát triển không ngừng của công nghệ Retina thì việc hiển thị hình ảnh chất lượng trên website càng cần cao hơn. JPEG, PNG hay GIF vẫn có thể hữu ích nhưng sử dụng SVG vẫn là một cách tốt nhất để đi đến sự toàn vẹn trong việc thiết kế website theo công nghệ mới.

Tôi hi vọng, đến cuối bài viết này, các bạn sẽ không phải đắn đo, không phải e ngại đối với SVG nữa. Các bạn có thể sử dụng một cách thành thạo chúng từ những ví dụ mẫu vô cùng đơn giản trong bài viết này.

Cám ơn các bạn đã theo dõi. Hẹn gặp lại các bạn ở hướng dẫn tiếp theo.

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?