Tìm hiểu về SVG (Phần 1)

Tìm hiểu về SVG (Phần 1)

Định dạng hình ảnh bitmap cho web – GIF, JPEG, WBMP và PNG – mô tả hình ảnh sử dụng một mạng lưới pixel. Các file kết quả thường có xu hướng cồng kềnh, bị giới hạn lại thành một mức phân giải đơn (thường rất thấp), và tiêu thụ lượng lớn băng thông trên mạng. SVG, về mặt khác, là một định dạng véc-tơ mô tả hình ảnh dưới dạng hình, path, chữ, và hiệu ứng lọc.

Về SVG

Các tệp cho ra kết quả gọn, cung cấp chất lượng đồ họa cao trên mạng, trong việc in ấn, và cả trên các thiết bị cầm tay bị hạn chế tài nguyên. Người dùng có thể phóng đại tầm nhìn của họ trên một hình ảnh SVG trên màn hình mà không cần phải “hy sinh” độ sắc, chi tiết hay độ trong trẻo. Ngoài ra, SVG cung cấp hỗ trợ ưu việt đối với màu và chữ, đảm bảo cho người dùng sẽ thấy ảnh khi chúng hiện lên trên bản vẽ Illustrator của bạn.

Định dạng SVG dựa hoàn toàn vào XML và đưa ra nhiều ưu thế để phát triển nhiều người dùng như nhau. Với SVG, bạn có thể dùng XML và JavaScript để tạo nên mạng lưới đồ họa mà sẽ phản hồi lại hành động của người dùng với các hiệu ứng tinh vi như làm nổi, hướng dẫn cho công cụ, âm thanh và hoạt hình.

Bạn có thể lưu ảnh của mình bằng cách sử dụng lệnh Save, Save As, Save A Copy hoặc Save For Web & Device. Để truy cập đầy đủ các tùy chọn xuất SVG, sử dụng lệnh Save, Save As, hoặc SaveA Copy. Lệnh Save For Web & Devices cung cấp một tập hợp con các tùy chọn xuất SVG có thể áp dụng cho việc ứng dụng dựa trên nền tảng web.

Lưu ý khi thiết lập ảnh SVG

Cách mà bạn thiết lập ảnh của bạn trong Illustrator sẽ ảnh hưởng đến kết quả file SVG. Nhớ kĩ những hướng dẫn sau đây:

– Sử dụng layer để thêm kết cấu vào một tệp SVG. Nếu bạn lưu ảnh trong định dạng SVG, mỗi layer sẽ được chuyển thành một phần tử nhóm ( element). (Ví dụ, một layer tên là Button1 trở thành trong tệp SVG). Các layer đã được lồng vào nhau sẽ trở thành một nhóm được lồng của SVG, và những layer ẩn được giữ nguyên với tính chất kiểu mẫu SVG: display=”none”.

– Nếu bạn muốn các đối tượng trên các layer khác nhau trở nên trong suốt, hãy điều chỉnh độ mờ đục của mỗi đối tượng thay vì mỗi layer. Nếu bạn đổi độ mờ đục trong cấp độ layer, tệp SVG kết quả sẽ không hiển thị sự trong suốt như khi nó hiện ra trong Illustrator.

– Dữ liệu Raster không có khả năng mở rộng trong SVG Viewer và không thể chỉnh sửa như các thành phần SVG khác. Nếu có thể, tránh tạo ảnh mà sẽ bị raster hóa trong tệp SVG. Các lưới khuynh độ và các object sử dụng các hiệu ứng Rasterize, Artistic, Blur, Brush, Strokes, Distort, Pixelate, Sharpen, Sketch, Stylize, Texture & Video sẽ bị raster hóa khi lưu trong đinh dạng SVG. Tương tự, các kiểu mẫu đồ họa có bao gồm các hiệu ứng này cũng sẽ sản xuất ra sự raster hóa. Sử dụng các hiệu ứng SVG để thêm hiệu ứng đồ họa mà không gây ra sự raster hóa.

– Sử dụng các ký hiệu và làm đơn giản hóa các path trong ảnh của bạn để cải thiện sự biểu thị SVG. Đồng thời tránh sử dụng các brush (cọ vẽ) tạo ra nhiều dữ liệu path (như Charcoal, Fire Ash, và Scroll Pen) nếu hiệu suất là ưu tiên hàng đầu

– Sử dụng các lát cắt, các map hình ảnh và script để thêm liên kết web đến một tệp SVG

– Một ngôn ngữ để script, như JavaScript, mở ra chức năng không giới hạn cho một tệp SVG. Chuyển động con trỏ và bàn phím có thể dẫn ra những hàm script như các hiệu ứng rollover (quay vòng). Các script còn có thể sử dụng mẫu đối tượng của tài liệu (DOM–Document Object Model) để truy cập và sửa đổi tệp SVG, ví dụ như chèn hoặc xóa các yếu tố SVG.

Áp dụng các hiệu ứng SVG

Bạn có thể dùng các hiệu ứng SVG để thêm đặc tính đồ họa như thêm bóng và ảnh của bạn. Các hiệu ứng SVG khác với các đối tác bitmap của chúng ở chỗ chúng dựa trên XML và không phụ thuộc vào độ phân giải. Trên thực tế, một hiệu ứng SVG chẳng là gì ngoài một loạt các đặc tính XML mô tả các hoạt động toán học đa dạng. Các hiệu ứng kết quả được kết xuất đến các đối tượng mục tiêu thay vì đồ họa nguồn.

Illustrator cung cấp một bộ hiệu ứng SVG mặc định. Bạn có thể sử dụng các hiệu ứng với các đặc tính mặc định của chúng, chỉnh sửa mã XML để cho ra các hiệu ứng tùy chình, hoặc viết ra những hiệu ứng SVG mới.

Lưu ý: Để tùy chỉnh bộ lọc SVG mặc định của Illustrator, sử dụng một chương trình chỉnh sửa văn bản để chỉnh sửa tệp Adobe SVG Filters.svg trong thư mục Documents and Settings//Application Data/Adobe/Adobe Illustrator <phiên bản Illustrator mà bạn dùng (Ví dụ: CS6)> Settings/<địa chỉ> folder. Bạn có thể chỉnh sửa định dạng bộ lọc hiện có, xóa định dạng bộ lọc, và thêm định dạng bộ lọc mới.

1. Chọn một đối tượng hoặc nhóm (Hoặc nhắm mục tiêu vào một layer trong bảng Layers)

2. Thực hiện một trong những điều sau:

  • Để áp dụng một hiệu ứng với các cài đặt mặc định của nó, chọn hiệu ứng từ khu vực nằm cuối cùng của menu con Effect > SVG Filters
  • Để áp dụng một hiệu ứng với cài đặt tùy ý, chọn Effect > SVG Filters > Apply SVG Filter. Trong ô thoại, chọn một hiệu ứng và nhấn vào nút Edit SVG Filter ( ). Chỉnh sửa mã mặc định và nhấn OK.
  • Để tạo và áp dụng một hiệu ứng mới, chọn Effect > SVG Filters > Apply SVG Filter. Trong ô thoại, nhấn nút New SVG Filter ( ), nhập mã mới và nhấn OK.

Khi bạn áp dụng một hiệu ứng lọc SVG, Illustrator sẽ hiển thị một phiên bản đã bị raster hóa của hiệu ứng trên bản vẽ. Bạn có thể điều khiển độ phân giải của hình ảnh xem trước này bằng cách chỉnh sửa cài đặt độ phân giải raster hóa của tài liệu.

Lưu ý: Một hiệu ứng SVG phải là hiệu ứng cuối cùng khi một đối tượng sử dụng nhiều hiệu ứng; nói theo cách khác, nó phải xuất hiện ở dưới cùng của bẳng Appearance (Ngay trên điểm vào của Transparency). Nếu có hiệu ứng khác theo sau hiệu ứng SVG, đầu ra SVG sẽ có thêm một đối tượng bị raster.

Tổng kết

SVG là một định dạng file đồ họa đặc thù và ít phổ biến. Hy vọng một số thông tin từ bài viết hữu ích với bạn!