File SVG là gì?

Bài viết này giải thích file SVG là gì, cách mở và chuyển đổi file này sang định dạng phổ biến hơn như PNG hoặc JPG.

• Định dạng ảnh JPG, JPEG, GIF, PNG và SVG khác gì nhau?

File SVG là gì?

File có phần mở rộng file SVG rất có thể là file Scalable Vector Graphics. Các file ở định dạng này sử dụng định dạng văn bản dựa trên XML để mô tả cách hình ảnh xuất hiện.

Vì văn bản được sử dụng để mô tả đồ họa, nên file SVG có thể được chia tỷ lệ thành các kích thước khác nhau mà không làm giảm chất lượng - nói cách khác, định dạng này không phụ thuộc vào độ phân giải. Đây là lý do tại sao trang web và đồ họa dùng để in ấn thường được xây dựng ở định dạng SVG. Chúng có thể được thay đổi kích thước để phù hợp với các thiết kế khác nhau trong tương lai.

Nếu file SVG được nén bằng GZIP, file sẽ kết thúc bằng phần mở rộng file .SVGZ và có thể có dung lượng nhỏ hơn 50% đến 80%.

Các file khác có phần mở rộng .SVG không liên quan đến định dạng đồ họa có thể là file Saved Game. Các game như Return to Castle Wolfenstein và Grand Theft Auto lưu tiến trình của game vào file SVG.

Định dạng SVG được sử dụng để làm gì?

Các file SVG được sử dụng cho thiết kế web và kỹ thuật số. Mặc dù có các định dạng như PNG - cho phép nền trong suốt - hoặc JPEG/JPG - là một file kỹ thuật số nhỏ - file SVG là định dạng hoàn hảo để sử dụng hình ảnh kỹ thuật số hoặc dựa trên web.

Công dụng tốt nhất của dịnh dạng này là dành cho các logo kỹ thuật số. Vì SVG có khả năng mở rộng vô hạn, điều đó có nghĩa là bạn có thể lưu logo dưới dạng SVG và có thể sử dụng logo này cho nhiều mục đích - chẳng hạn như trên trang web, ảnh profile hoặc poster trực tuyến vì không bị suy giảm khi tăng hoặc giảm tỷ lệ.

Nếu bạn tạo đồ họa để sử dụng cho các công cụ như Maker 3 thì SVG cũng là định dạng phù hợp với phần mềm Design Space của Cricut. Mặc dù bạn có thể upload PNG lên Cricut Design Space, nhưng SVG thường được ưu tiên hơn và dẫn đến ít lỗi hơn.

Ưu điểm của việc sử dụng file SVG

SVG có khả năng mở rộng vô hạn. Điều này thật tuyệt nếu bạn đang tạo ra tác phẩm nghệ thuật hoặc một thiết kế có thể thay đổi kích thước tùy theo mục đích sử dụng. Việc sử dụng SVG rất hữu ích trong việc thiết kế web vì thiết kế đáp ứng sẽ phóng to hoặc thu nhỏ các phần tử của trang web để phù hợp với mục đích sử dụng của nó.

Chất lượng của SVG sẽ luôn giống nhau, bất kể cách sử dụng nó. Thiết kế sẽ không bị vỡ pixel hoặc biến dạng sau khi tạo và có thể được sử dụng ở vô số địa điểm và phần mềm.

Các file SVG được viết bằng mã hóa XML, nhúng bất kỳ văn bản nào trong đồ họa của bạn dưới dạng văn bản có thể tìm kiếm chứ không chỉ dưới dạng hình ảnh. Điều này có nghĩa là các file SVG của bạn - nếu chúng có văn bản trong hình ảnh - có thể được tìm kiếm bằng các công cụ tìm kiếm.

Bạn có thể dễ dàng thêm hoạt ảnh vào file SVG trong thiết kế web; mặc dù đây là kỹ năng phát triển web chứ không phải kỹ năng thiết kế đồ họa.

Nhược điểm của việc sử dụng file SVG

Vì SVG là đồ họa vector, điều đó có nghĩa là bạn không thể thêm họa tiết vào đồ họa của mình. Mặc dù có một giải pháp khác để biến họa tiết thực thành vectơ bằng Adobe Illustrator, nhưng vector cần sử dụng màu phẳng để có thể mở rộng vô hạn.

Nếu bạn muốn sử dụng ảnh hoặc hình ảnh thực tế trong đồ họa của mình thì không thể lưu ảnh đó dưới dạng SVG. Bạn nên tìm hiểu sự khác biệt giữa hình ảnh vector và hình ảnh raster trước khi bắt đầu làm việc với hình ảnh của mình để tránh thất vọng.

Cách mở file SVG

Cách dễ dàng và nhanh nhất để mở và xem file SVG (không chỉnh sửa) là sử dụng trình duyệt web hiện đại như Chrome, Firefox, Edge hoặc Internet Explorer — gần như tất cả chúng đều phải cung cấp một số loại hỗ trợ hiển thị cho định dạng SVG. Điều này có nghĩa là bạn có thể mở các file SVG trực tuyến mà không cần phải tải chúng xuống trước.

Nếu bạn đã có file SVG trên máy tính, trình duyệt web cũng có thể được sử dụng làm trình xem SVG ngoại tuyến. Mở các file SVG đó thông qua tùy chọn Open của trình duyệt web (phím tắt Ctrl + O).

File SVG có thể được tạo thông qua Adobe Illustrator, vì vậy, tất nhiên, bạn có thể sử dụng chương trình đó để mở file. Một số chương trình Adobe khác hỗ trợ file SVG (miễn là plug-in SVG Kit for Adobe CS được cài đặt) bao gồm những chương trình Adobe Photoshop, Photoshop Elements và InDesign. Adobe Animate cũng hoạt động với các file SVG.

Một số chương trình không phải của Adobe có thể mở file SVG bao gồm Microsoft Visio, CorelDRAW, Corel PaintShop Pro và CADSoftTools ABViewer.

Inkscape và GIMP là hai chương trình miễn phí có thể hoạt động với các file SVG, nhưng bạn phải tải chúng xuống để mở file SVG. Picozu cũng miễn phí và hỗ trợ cả định dạng SVG, nhưng bạn có thể mở file trực tuyến mà không cần tải xuống bất kỳ thứ gì.

Vì file Scalable Vector Graphics thực chất là một file văn bản, nên bạn có thể xem phiên bản text của file trong bất kỳ trình soạn thảo văn bản nào. Ngay cả trình đọc văn bản mặc định trong hệ điều hành của bạn cũng sẽ hoạt động, như Notepad trong Windows.

Đối với các file Saved Game, game đã tạo file SVG rất có thể sẽ sử dụng nó tự động khi bạn tiếp tục chơi game, có nghĩa là bạn có thể không thể mở file SVG theo cách thủ công thông qua menu của chương trình. Tuy nhiên, ngay cả khi bạn xoay sở để mở được file SVG thông qua menu Open, bạn phải sử dụng file SVG phù hợp với game đã tạo ra nó.

Nếu bản thân game không mở file SVG, hãy thử GTA2 Saved Game Editor hoặc mở file SVG trong trình soạn thảo văn bản để xem có thứ gì đó được sử dụng hay không.

Cách sử dụng file SVG

Hiểu cách sử dụng hiệu quả các file SVG có thể nâng cao đáng kể các dự án in và web của bạn.

Dưới đây là hướng dẫn để tận dụng tối đa SVG:

Hướng dẫn cơ bản để triển khai SVG

• Trực tiếp trong HTML: Bạn có thể nhúng SVG trực tiếp vào code HTML của mình. Điều này đơn giản như sao chép code SVG và dán nó vào tài liệu HTML của bạn. Nó cho phép thao tác và tạo kiểu dễ dàng với CSS và JavaScript.
• Làm nguồn hình ảnh: Sử dụng file SVG giống như bạn sử dụng JPEG hoặc PNG trong thẻ img. Phương pháp này đơn giản nhưng không cho phép thao tác với các phần tử riêng lẻ của SVG.
• Hình nền trong CSS: SVG có thể được đặt làm nền cho bất kỳ thành phần HTML nào thông qua CSS. Điều này hữu ích cho các thành phần thiết kế web đáp ứng như nút và icon.

Chỉnh sửa file SVG

• Trình chỉnh sửa văn bản: Vì SVG là file XML nên bạn có thể chỉnh sửa chúng bằng bất kỳ trình soạn thảo code nào để thay đổi các thuộc tính như màu sắc, hình dạng và kích thước.
• Phần mềm thiết kế đồ họa: Các công cụ như Adobe Illustrator, Sketch hoặc Inkscape cho phép chỉnh sửa SVG trực quan hơn. Những công cụ này đặc biệt hữu ích khi tạo hoặc sửa đổi đáng kể đồ họa phức tạp.

Mẹo sử dụng SVG hiệu quả

• Tối ưu hóa: Trước khi sử dụng SVG, hãy tối ưu hóa nó để xóa code không cần thiết và giảm kích thước file. Các công cụ SVG như SVGO có thể giúp giải quyết vấn đề này.
• Khả năng truy cập: Luôn thêm tiêu đề và mô tả mang tính mô tả bằng cách sử dụng thẻ <title> và <desc> trong SVG. Điều này cải thiện khả năng truy cập cho người dùng dựa vào trình đọc màn hình.
• Dự phòng: Cung cấp image dự phòng cho các trình duyệt không hỗ trợ SVG (ngày càng hiếm nhưng có thể bao gồm các trình duyệt cũ hoặc chuyên dụng).

Các trường hợp sử dụng nâng cao

• SVG tương tác: Với JavaScript, bạn có thể làm cho SVG tương tác, phản hồi các hành động của người dùng như di chuột và nhấp chuột.
• Hoạt ảnh: SVG có thể được tạo hoạt ảnh bằng các thư viện CSS hoặc JavaScript như GreenSock. Điều này có thể bao gồm từ các chuyển tiếp đơn giản đến những hoạt ảnh phức tạp xác định trải nghiệm người dùng.

Cách chuyển đổi file SVG

Chuyển đổi file SVG bằng một công cụ trực tuyến thường là cách nhanh và dễ nhất để đưa file sang định dạng bạn muốn. Không cần phải cài đặt sẵn một chương trình đắt tiền hoặc tải xuống phần mềm không quen thuộc.

Nếu bạn cần chuyển đổi nó sang một định dạng khác, như PDF hoặc GIF và SVG của bạn khá nhỏ, thì một công cụ trực tuyến của bên thứ ba như Zamzar sẽ thực hiện tốt công việc.

Autotracer.org là một công cụ chuyển đổi SVG trực tuyến khác cho phép bạn chuyển đổi SVG (từ thiết bị hoặc thông qua URL) sang một số loại định dạng khác như EPS, file Adobe Illustrator (AI), DXF, PDF, SK, v.v...

Nếu bạn có file SVG lớn hơn, bất kỳ chương trình phần mềm nào được đề cập ở trên trong phần “Cách mở file SVG” cũng có thể lưu/xuất file SVG sang định dạng mới.

Ví dụ, nếu bạn đang sử dụng Inkscape, sau khi bạn mở/chỉnh sửa file SVG, bạn có thể lưu nó trở lại SVG với bất kỳ thay đổi nào đã thực hiện, nhưng cũng có thể lưu nó vào một định dạng file khác như PNG, PDF, DXF, ODG , EPS, TAR, PS, HPGL, v.v...

Phần mềm thiết kế nào hỗ trợ SVG?

Mặc dù bạn có thể mở SVG trong hầu hết các phần mềm, nhưng tốt nhất bạn nên sử dụng phần mềm dựa trên vector để tận dụng tối đa lợi ích của định dạng này.

Adobe Illustrator là một trong những nơi tốt nhất để mở và tạo hình ảnh SVG. Bạn có thể tạo SVG trong Illustrator và chỉnh sửa màu sắc trong Canva; nhưng để tạo và lưu SVG trên Canva, bạn sẽ cần có tài khoản Canva Pro.

Bạn cũng có thể tạo và lưu các file SVG trong Figma, Sketch, Inkscape, Vecteezy Editor và Vectornator. Có một số lựa chọn thay thế dựa trên trình duyệt cho Adobe Illustrator mà bạn cũng có thể tạo SVG.

Mặc dù bạn có thể chỉnh sửa SVG trong nhiều chương trình không phải vector, nhưng điều đó không được khuyến khích nếu bạn muốn tận dụng tối đa lợi ích của cấu trúc và khả năng mở rộng SVG.

Tìm hiểu về các định dạng khác nhau và cách sử dụng riêng lẻ của chúng sẽ rất hữu ích khi tạo thiết kế đồ họa, thiết kế web hoặc nghệ thuật kỹ thuật số. Định dạng SVG phổ biến cho hầu hết các ứng dụng web và kỹ thuật số, nhưng không phải là định dạng chung cho mọi hình ảnh.

Sử dụng SVG để có khả năng mở rộng vô hạn cho đồ họa vector của bạn, nhưng không sử dụng định dạng này cho ảnh hoặc hình ảnh dựa trên raster vì chất lượng sẽ bị giảm.

Xem thêm:

• File CSV là gì?