Các bạn đang muốn thêm các file SVG vào website WordPress của mình?

Mặc định WordPress sẽ cho phép bạn upload những định dạng như:

jpg, png, gif, mp4….

Nhưng SVG lại không nằm trong danh sách này.

Bài này viết này mình sẽ hướng dẫn bạn cách chèn file SVG vào WordPress

Và lý do tại sao nên sử dụng nó?

File SVG là gì?

SVG được viết tắt của Scalable Vector Graphics dùng để miêu tả các hình ảnh đồ họa vector hai chiều, bằng markup langugage (ngôn ngữ đánh dấu XML).

Lợi ích chính của SVG là cho phép chúng ta phóng to hình ảnh, mà không làm mất đi chất lượng của hình ảnh đấy.

Vì thế nó được sử dụng nhiều trong bản đồ, sơ đồ.

File SVG hoạt động như thế nào?

Scalable Vector Graphics (SVG) là một công nghệ hiển thị các hình ảnh hai chiều bằng XML.

SVG sẽ khác với các định dạng hình ảnh thường được sử dụng như PNG, GIF hay JPEG.

Nếu chúng ta lấy tệp hình ảnh png/jpeg và phóng to.

Chắc hẳn các bạn sẽ thấy rằng hình ảnh sẽ bắt đầu mờ dần và hiện rõ từng pixel.

SVG lại không sử dụng pixel.

Thay vào đó, chúng sử dụng một bản đồ hai chiều để xác định loại đồ hoạ mà các bạn đang xem.

Khi phóng to, hình ảnh sẽ không có pixel nào.

Việc này sẽ cho phép chúng ta phóng to hình ảnh mà không làm giảm chất lượng.

Hầu hết các hình ảnh SVG đều có dung lượng nhỏ so với tệp JPEG hay PNG.

Đồ họa véc tơ thường được sử dụng cho các icon, icon font, logo website và hình ảnh thương hiệu.

Nhiều khi các bạn sẽ muốn thêm các file SVG trong WordPress cho logo công ty, các icon hay dạng đồ hoạ khác.

Nghe có vẻ các tệp SVG rất hữu ích, nhưng vì lý do nào đó chúng có một chút không an toàn.

Đây là lý do tại sao WordPress không hỗ trợ tải lên tệp SVG theo mặc định.

Nếu chúng ta cố gắng tải lên hình ảnh SVG trong WordPress, các bạn sẽ nhận được thông báo như sau:

Sorry, this file type is not permitted for security reasons
(Xin lỗi, tệp này không được tải lên vì lý do bảo mật)

Các vấn đề về bảo mật liên quan đến SVG trong WordPress

Các tệp SVG chứa các mã trong ngôn ngữ đánh dấu XML tương tự như HTML.

Trình duyệt hoặc trình chỉnh sửa SVG của chúng ta sẽ phân tích ngôn ngữ đánh dấu XML để hiển thị trong đầu ra trên màn hình.

Tuy nhiên, điều này sẽ mở ra website và có khả năng xuất hiện các lỗ hổng XML.

Các lỗ hổng này có khả năng bị làm dụng để có được quyền truy cập trái phép vào dữ liệu người dùng.

Kích hoạt các cuộc tấn công brute force hay cross-site vào website của bạn.

Các phương pháp, plugin mà mình chia sẻ trong bài viết này sẽ cố gắng cải thiện bảo mật và đưa các tệp SVG sạch vào WordPress.

Tuy nhiên, những plugin này hoàn toàn không thể ngăn chặn các mã độc được tải lên có mục đích.

Giải pháp tốt nhất là chỉ sử dụng các tệp SVG được tạo bởi các nguồn uy tín.

Mình hay tải file SVG trên flaticon.com (rất uy tín và an toàn)

Và tốt nhất là chỉ có mỗi bạn có quyền này.

Để tìm hiểu thêm về bảo mật, hãy xem hướng dẫn bảo mật WordPress chi tiết của mình dành cho người mới bắt đầu.

Như đã nói, chúng ta hãy đến với phương pháp đầu tiên để thêm tệp SVG vào WordPress một cách an toàn nhé.

Phương pháp 1. Sử dụng một đoạn code nhỏ cho phép thêm file SVG

Đây là cách mình hay dùng nhất, không cần plugin gì cả.

Nhanh gọn, sau khi xong mình chỉ cần xóa đoạn code đó đi là được.

Thêm đoạn code sau vài file functions.php nhé.

function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

Để tìm file functions.php cách dễ nhất là vào Apperrance » Theme Editor.

Hoặc nếu bạn hiểu chút về cấu trúc thư mục WordPress, có thể tìm trực tiếp trong folder gốc.

Ví dụ: Ở đây mình có chèn sử dụng file logo bằng SVG

Phương pháp 2. Tải lên tệp SVG trong WordPress sử dụng SVG Support plugn

Phương pháp này cung cấp sự hỗ trợ đầy đủ cho việc thêm các file SVG vào WordPress.

Ngoài ra phương pháp cũng cho phép chúng ta hiển thị SVG inline, trong các bài đăng và trang WordPress.

Việc đầu tiên các bạn cần làm là cài đặt và kích hoạt plugin SVG Support.

Hãy xem hướng dẫn chi tiết của mình về cách cài đặt plugin WordPress nhé.

Sau khi kích hoạt, các bạn sẽ cần truy cập vào Settings » SVG Support để thiết lập cấu hình cài đặt plugin.

Trên trang cài đặt, các bạn cần chọn ô bên cạnh tuỳ chọn Restrict to Administrators?.

Tuỳ chọn này sẽ chỉ cho phép admin website tải lên các file SVG trong WordPress.

Tùy chọn tiếp theo Enable Advanced Mode (chế độ nâng cao).

Bạn chỉ cần nhấn vào tùy chọn này nếu muốn sử dụng các tính năng nâng cao như CSS animation và inline SVG rendering.

Đừng quên bấm vào nút Save Changes để lưu lại các cài đặt.

Trong trình chỉnh sửa bài đăng, việc tải lên tập SVG cũng giống hệt như tải lên các tệp khác.

Chỉ cần thêm block image vào bài viết và sau đó upload file SVG.

Bây giờ việc tải lên hay nhúng tệp SVG vào trong WordPress trở nên khá dễ dàng.

Hy vọng sau bài viết này, bạn biết cách chèn file SVG vào WordPress.

Nếu bạn chưa biết cách sử dụng hình ảnh trong WP, hãy đọc bài:

Hướng dẫn sử dụng hình ảnh một cách thành thạo trong WordPress

Hãy comment bất kỳ câu hỏi nào bạn thắc mắc nhé !