Hướng dẫn sử dụng file SVG cho website WordPress

Ảnh SVG là gì?

SVG là định dạng hình ảnh dựa trên XML để hiển thị đồ họa trên web và trong các ứng dụng. Về cơ bản, một tệp SVG chỉ đơn giản là một tập hợp mã XML chỉ định các hình dạng và màu sắc khác nhau được sử dụng trong một hình ảnh SVG.

Và vì bạn có thể mở các tệp SVG bằng trình soạn thảo văn bản, nên cũng dễ dàng thực hiện các tùy chỉnh bằng cách sử dụng mã CSS3 và mã cơ bản. Do đó, SVG rất được người dùng web hiện đại ưa chuộng vì tính linh hoạt linh hoạt của chúng.

Quan trọng nhất, W3C công nhận SVG là một tiêu chuẩn hàng đầu trong ngành. Vì vậy, SVG hoạt động hoàn hảo cùng với các công nghệ dựa trên Web khác như DOM, HTML, v.v.

Tại sao nên dùng ảnh SVG?

Bảo đảm chất lượng hình

Một trong những lý do bạn nên dùng SVG đó là để bảo đảm chất lượng hình ảnh.

Hãy xem hình bên dưới, đây là 2 hình ảnh giống nhau, bên trái là hình ảnh với định dạng thông thường, tức là hình ảnh sử dụng cấu trúc từng pixel, hình bên phải là một hình ảnh vector. Và khi chúng ta phóng to hình ra, đây là kết quả:

Hình ảnh vector có thể hiển thị tốt trên bất kì kích thước/độ phân giải nào (vì thế nên các bác designer thích dùng các phần mềm như Corel, Illustrator khi thiết kế các banner quảng cáo/in ấn,…)

Tiết kiệm dung lượng

Vì là hình ảnh dạng vector nên dung lượng một file hình ảnh SVG rất nhỏ so với một file hình ảnh thông thường.

Ví dụ hình ảnh sau được vẽ bằng Sketch 3 và export ra SVG, cho dung lượng 22KB, trong khi nếu export ra PNG với kích thước 1440×900 thì sẽ là 1.2MB

Animation

Như đã nói ở trên, tất cả mọi element và thuộc tính của chúng trong file SVG đều có thể animate được. Nên chúng ta hoàn toàn có thể sử dụng một file SVG duy nhất và dùng CSS hoặc Javascript để làm animation cho từng thành phần của hình ảnh đó. Để thực hiện công việc tương tự cho các định dạng ảnh khác, chúng ta phải export từng thành phần muốn làm animation thành từng hình ảnh riêng biệt, điều này sẽ giúp tăng thêm số request để load ảnh và làm cho trang web của bạn load chậm một cách thần kì.

Độ tương thích

Ở thời điểm hiện tại, hầu hết các trình duyệt đã hỗ trợ tốt định dạng SVG, nên chúng ta có thể sử dụng thoải mái mà không cần phải lăn tăn gì nữa.

Có thể xem chi tiết về độ tương thích với các trình duyệt tại đây: http://caniuse.com/#feat=svg

Sử dụng ảnh SVG có quan trọng cho website WordPress không?

Hình ảnh SVG dựa trên vector, do đó, hình ảnh SVG có thể được thu nhỏ vô hạn trên màn hình mà không làm giảm chất lượng. Tương tác cốt lõi trong vấn đề này là Trình duyệt XML; trong đó Trình duyệt vẽ sơ đồ đặc tả XML với mỗi lần tăng hoặc giảm.

Không cần phải nói, các tệp SVG linh hoạt hơn nhiều so với các định dạng truyền thống như PNG hoặc JPEG. Và tương tác trực tiếp giữa CSS và JavaScript có nghĩa là bạn có thể điều chỉnh hình ảnh SVG của mình khi đang di chuyển. Điều này rất quan trọng khi bạn đang làm việc trên một thiết kế mới.

Liên quan đến hiệu suất, hình ảnh SVG có xu hướng kích thước nhỏ hơn đáng kể so với bất kỳ đối tác nào. Kết quả là, thường thấy các hình minh họa, logo và biểu tượng được xây dựng dưới dạng đồ họa vector. Điều này cũng đã dẫn đến sự phát triển của nhiều Phông chữ Biểu tượng, mà chúng tôi sẽ đề cập ngắn gọn trong bài viết sau.

Tóm lại, các SVG cung cấp tính linh hoạt, giảm kích thước hình ảnh và nền tảng vững chắc để cải thiện hiệu suất hình ảnh trên trang web WordPress của bạn .

Hướng dẫn sử dụng ảnh SVG cho website WordPress

Trước tiên, bạn cần cài đặt và kích hoạt plugin SVG Support bằng cách:

• Bước 1: Truy cập vào giao diện WordPress admin → Plugins → Add new.
• Bước 3: Gõ từ khóa SVG Support trên thanh công cụ tìm kiếm.
• Bước 4: Hệ thống trả về kết quả, chọn Plugin SVG Support và nhấn nút Install Now để cài đặt. Khi cài đặt kết thúc, nhấn Active để sử dụng.

Sau khi cài đặt và kích hoạt Plugins hãy truy cập Settings (Cài đặt) -> SVG Support để mở trang thiếp lập plugins

Tại đây hãy tích chọn Restrict to Administrators. Bạn có thể tích chọn Enable Advanced Mode? này nếu bạn muốn sử dụng các tính năng nâng cao như CSS animations và inline SVG rendering.

Đừng quên bấm vào nút Save Changes (Lưu thay đổi) để lưu trữ cài đặt của bạn. Bây giờ bạn đã có thể tải lên hình ảnh SVG để có thể sử dụng.

Như vậy bạn đã có thể tải ảnh SVG lên WordPress, chúc các bạn thành công.

Kết luận

Rõ ràng ảnh SVG có nhiều lợi thế cho trang WordPress. Tuy nhiên, do định dạng văn bản, mọi người chèn injection code vào và khiến trang web dễ bị tổn thương. Đây là lý do chính tại sao WordPress mặc định không cho phép người dùng tải SVG lên.

Lí giải rằng nếu muốn tải ảnh SVG lên WordPress, bạn phải sử dụng một số hỗ trợ từ SVG Support – plugin WordPress. Nó cho phép bạn tải file SVG lên và loại bỏ tất cả mã độc cùng lúc để file không bị tấn công.

Vì sự an toàn nếu dùng hỗ trợ của plugin, chúng tôi khuyến khích bạn luôn cẩn thận. Nếu bạn muốn tải xuống bất cứ ảnh SVG miễn phí, hãy kiểm tra xem chúng có phải từ nguồn đáng tin cậy hay không. Mình hy vọng bài viết này giúp bạn cài đặt plugin SVG Support và sử dụng ảnh SVG cho website WordPress thành công.

Nếu có bất kỳ thắc Nếu có bất kỳ thắc mắc nào về bài hướng dẫn trên, hãy cho chúng tôi biết trong phần bình luận!