Cách sử dụng SVG trên máy Mac và trên web

Scalable Vector Graphics là định dạng hình ảnh có thể thay đổi kích thước phổ biến cho web. Sau đây là cách sử dụng chúng trong macOS.

Trình duyệt web và ứng dụng hình ảnh hiện đại có khả năng thay đổi kích thước hình ảnh bằng các phép tính toán học, chẳng hạn như đường cong Bezier. Điều này trái ngược với đồ họa bitmap cố định, không thay đổi kích thước tốt và đôi khi có dạng khối, dạng điểm ảnh.

Đồ họa có thể thay đổi kích thước (hay "vector") sử dụng mô tả hình ảnh dựa trên toán học. Khi thay đổi kích thước hình ảnh, hình ảnh có thể được tính toán lại hoàn toàn ở kích thước mới mà không bị mất chất lượng rõ rệt.

Lịch sử của đồ họa có thể thay đổi kích thước đã có từ nhiều thập kỷ trước và bắt nguồn từ nghiên cứu khoa học máy tính. Vào cuối những năm 1980, cuộc cách mạng xuất bản trên máy tính để bàn (DTP) đã diễn ra và kết quả là đồ họa có thể thay đổi kích thước đã trở nên phổ biến.

Vào thời điểm đó, rõ ràng là khả năng thay đổi kích thước đồ họa và văn bản thành nhiều kích thước in và hiển thị khác nhau là chìa khóa.

Một số ứng dụng DTP đầu tiên bao gồm Aldus Freehand, Adobe Illustrator và các ứng dụng khác. Tất nhiên, Illustrator vẫn tồn tại cho đến ngày nay trong bộ ứng dụng Creative Cloud của Adobe.

Các ứng dụng này cho phép người sáng tạo và nhà thiết kế tạo đồ họa, thao tác chúng thông qua các điểm điều khiển, cũng như thay đổi kích thước và định hình lại chúng theo ý muốn. Điều này giúp việc thay đổi hình ảnh trở nên rất dễ dàng so với việc chỉnh sửa hình ảnh bitmap đồng nhất chỉ chứa một lưới pixel.

Máy tính để bàn đầu tiên, chẳng hạn như máy tính từ NeXT, cũng sử dụng đồ họa có thể mở rộng cho màn hình hiển thị của chúng bằng các công nghệ như Display Postscript. Ngày nay, hệ điều hành của Apple sử dụng một công nghệ tương tự có tên là Core Graphics (còn được gọi là "Quartz") để tính toán hình ảnh ngoài màn hình trước khi chúng được hiển thị.

Một số ứng dụng hiện đại như Adobe Photoshop có khả năng chuyển đổi hoặc vector hóa một số đồ họa được ánh xạ bit thành định dạng vector, mặc dù kết quả có thể khác nhau.

Internet và SVG

Khi internet lần đầu tiên trở nên phổ biến vào những năm 1990, hầu hết đồ họa trên web đều được bitmap. Nhiều năm sau, đồ họa có thể mở rộng cho web trở nên rõ ràng là cần thiết - do sử dụng màn hình có độ phân giải cao và khả năng thay đổi kích thước cửa sổ trình duyệt.

Các yêu cầu cộng tác cũng đòi hỏi khả năng thao tác đồ họa theo thời gian thực của nhiều bên liên quan trên web. Đây chính là lúc Đồ họa vectơ có thể mở rộng (SVG) phát huy tác dụng.

Do không có bất kỳ tiêu chuẩn nào của bên thứ ba hiện có cho đồ họa vectơ, Nhóm làm việc SVG của Liên đoàn mạng lưới toàn cầu (WC3) đã tạo ra khuyến nghị Đồ họa vectơ có thể mở rộng (SVG) vào năm 2001 để sử dụng trên web. Các tệp SVG chứa mô tả về cách vẽ và thay đổi tỷ lệ hình ảnh một cách sạch sẽ ở mọi kích thước bằng bảng màu đầy đủ và thậm chí là một số dạng hoạt hình.

Nhóm làm việc SVG đã xem xét một số đề xuất thương mại cho định dạng đồ họa có thể mở rộng, nhưng cuối cùng đã quyết định chọn một thông số kỹ thuật mở. Có một RFC sau này để sử dụng hình ảnh SVG trong bản vẽ RFC: RFC 7996.

WC3 cũng đang xây dựng một tiêu chuẩn SVG 2 mới hơn chưa được chấp thuận. Do thiết bị di động được sử dụng rộng rãi, hai tiêu chuẩn bổ sung cũng đã được giới thiệu: SVG Tiny (SVGT) và SVG Basic (SVGB).

SVG dựa trên tiêu chuẩn dữ liệu XML mở chung - về cơ bản đảm bảo khả năng tương thích phổ biến của nó trên hầu hết các hệ thống và trình duyệt web hiện đại. SVG XML cực kỳ nhỏ gọn - chủ yếu bao gồm các lệnh vẽ dưới dạng thẻ, tọa độ, mô tả hình dạng và màu sắc.

Việc áp dụng SVG ban đầu bị hạn chế - chủ yếu là do thiếu hỗ trợ trình duyệt chung. Việc áp dụng bắt đầu diễn ra vào khoảng năm 2010 khi nhiều trình duyệt bắt đầu bao gồm kết xuất SVG. Đến năm 2017, việc chấp nhận SVG trên web đã trở nên phổ biến.

Trên nền tảng Windows, hầu hết các phiên bản Internet Explorer trước phiên bản 8.0 đều không hỗ trợ SVG.

Lý do rõ ràng nhất để sử dụng SVG là khả năng mở rộng. Khi cửa sổ trình duyệt web được thay đổi kích thước, trang web và tất cả các thành phần thành phần của nó cũng thay đổi kích thước theo.

Khả năng tính toán lại và vẽ lại hình ảnh nhanh chóng ở bất kỳ kích thước nào để vừa với cửa sổ đã thay đổi kích thước giúp cải thiện đáng kể chất lượng hình ảnh trên web.

Tệp SVG cũng có thể được nén bằng định dạng gzip, giúp chúng tải xuống nhanh hơn khi được trang web tải. Ngay cả khi không nén, tệp SVG thường rất nhỏ - nhiều tệp SVG được sử dụng trên web sẽ có kích thước dưới 10KB và nhiều tệp khác dưới 5KB.

Đối với các trang web cho phép tải xuống hình ảnh, SVG cho phép dễ dàng trao đổi tệp đồ họa trên web thông qua các trang web mà không cần thêm máy chủ hoặc chuyển đổi. Tệp SVG cũng được sử dụng trong một số giao diện người dùng, giúp các phần của chúng có thể thay đổi kích thước một cách gọn gàng, ví dụ khi cửa sổ của ứng dụng trên máy tính để bàn được thay đổi kích thước.

SVG trên máy Mac

macOS hỗ trợ SVG và có nhiều ứng dụng chất lượng có thể chỉnh sửa, xuất, nhập và lưu đồ họa SVG dưới dạng tệp hình ảnh. Hầu hết các tệp SVG đều có phần mở rộng là .svg hoặc .svgz.

Một số ứng dụng này bao gồm (nhưng không giới hạn ở):

• macSVG
• Boxy SVG (20 đô la)
• Sketch (10 đô la/tháng)
• OmniGraffle
• Inkscape
• Canva (15 đô la/tháng)
• Gapplin (chỉ dành cho trình xem)
• Affinity Designer 2 (69 đô la)
• Pixelmator Pro (50 đô la)
• Adobe Illustrator (23 đô la/tháng)

Một số ứng dụng như Sketch có thể nhập/xuất SVG, cũng như nhiều tệp và định dạng khác bao gồm CSS (web), bitmap như PNG, JPG, GIF, TIFF và WebP, tệp Figma (.fig), PDF, tệp Adobe Illustrator và Photoshop, thậm chí cả mã SVG thô. Sketch không hỗ trợ hoạt ảnh ở các định dạng đồ họa đã nhập như GIF hoặc WebP.

Một số ứng dụng thiết kế như Autodesk Fusion có thể nhập và sử dụng tệp SVG, nhưng không thể chỉnh sửa hoặc thao tác trực tiếp với chúng. Nhìn chung, hầu hết các ứng dụng CAD không hỗ trợ chỉnh sửa trực tiếp SVG.

Một số ứng dụng của bên thứ ba như Save as SVG có thể chuyển đổi các tệp CAD được xuất gốc và biến chúng thành tệp SVG với nhiều kết quả khác nhau.

Nếu bạn sử dụng Microsoft 365, thì nó có hỗ trợ hạn chế cho việc nhập SVG, xoay và thay đổi kích thước hình ảnh theo kích thước cụ thể - nhưng hiện tại nó không hỗ trợ chỉnh sửa SVG đầy đủ trực tiếp. Tuy nhiên, bạn có thể thay đổi đường viền và phần tô của hình ảnh SVG hoặc chuyển đổi tệp SVG trong Microsoft 365 thành Office Shapes được sử dụng trong các ứng dụng 365.

Bạn nên sử dụng ứng dụng SVG nào cho Mac?

Trong nhiều năm, các ứng dụng SVG Mac miễn phí phổ biến nhất là Inkscape và Boxy SVG (sau này đã trở thành thương mại). Các ứng dụng này vẫn tuyệt vời để chỉnh sửa và xuất SVG đơn giản, dễ dàng, trực tiếp.

Tuy nhiên, tất cả đã thay đổi vào năm 2022 khi nhà phát triển Douglas Ward của Arkansas phát hành macSVG - hiện là ứng dụng chỉnh sửa SVG hàng đầu không thể tranh cãi trên Mac. macSVG vừa dễ sử dụng vừa có vô số tính năng. Ứng dụng này cho phép bạn chỉnh sửa hình ảnh SVG và cũng cho phép bạn xem XML trực tiếp của bất kỳ phần tử nào chỉ bằng một cú nhấp chuột.

Các công cụ có sẵn bao gồm các điều khiển hình dạng, điểm và đường dẫn, biến đổi hình dạng, văn bản, hình ảnh và một số hàm chuyển đổi đường dẫn và đường cong. Bạn cũng có thể xem SVG trong tệp XML hoàn chỉnh khi tệp này xuất để sử dụng trên web.

Một trình chỉnh sửa dòng thời gian không khác gì Final Cut Pro của Apple cũng được tích hợp - giúp việc tạo hoạt ảnh cho hình ảnh SVG trở nên dễ dàng. Hoạt ảnh được tạo ra cực kỳ mượt mà và trôi chảy. macSVG cũng có thể tạo video HTML5 và mã Core Graphics.

Sketch và Canva có lẽ là những trình chỉnh sửa SVG hiện đại phổ biến nhất và cả hai đều có giá cả phải chăng. Nếu bạn là một nhà thiết kế đồ họa, có lẽ bạn đã sử dụng phiên bản trả phí của Adobe Illustrator.

Pixelmator Pro và Affinity Designer là những lựa chọn hiển nhiên, nhưng cả hai đều có giá cao hơn.

SVG trên web

Web là trường hợp sử dụng chính rõ ràng cho các tệp SVG và mã - và có rất nhiều khung web SVG tốt có sẵn. Một số trong số đó là:

• Snap.svg của Adobe
• SVG.js
• SVG.NET
• Fabric.js để chuyển đổi SVG sang canvas
• SVG-Edit (cho phép chỉnh sửa SVG trực tiếp trong trình duyệt web)
• SwiftSVG (chủ yếu để hiển thị biểu tượng và hình dạng đơn giản)

Vì hầu hết các khung này đã cung cấp hầu hết mã web mà bạn cần để hiển thị SVG trên web. Việc đưa chúng vào dự án web của bạn sẽ cắt giảm thời gian phát triển.

Bạn sẽ muốn kiểm tra mã SVG cho trang web của mình trên nhiều trình duyệt trên càng nhiều nền tảng càng tốt để đảm bảo khả năng tương thích. Ngoài ra còn có SVG Toolkit cho Figma từ Tobias Strebitzer.

Sau khi bạn đã tạo các tệp SVG cho dự án web của mình, một màn hình đơn giản thường có nghĩa là bao gồm các tệp trên máy chủ web của bạn và tham chiếu chúng trong mã hoặc tải chúng động trong khi tải trang. Trong hầu hết các trường hợp, việc thay đổi tỷ lệ được xử lý tự động bởi trình duyệt - trừ khi bạn muốn hình ảnh chỉ được hiển thị ở các kích thước cụ thể.

Nhìn chung, SVG là một công nghệ web tuyệt vời vì nó cung cấp một tiêu chuẩn mở chung duy nhất để hiển thị hình ảnh nhanh chóng trong hầu hết các trình duyệt ở mọi kích thước.

Có một hướng dẫn SVG miễn phí tại W3 Schools và một kho lưu trữ biểu tượng SVG khổng lồ tại svgrepo.com, nếu bạn muốn biết thêm.

Ngoài ra, hãy nhớ xem cuốn sách SVG Essentials của J. David Eisenberg để có phân tích chuyên sâu hơn.

Theo appleinsider