Code bật tải ảnh SVG cho website WordPress

SVG (Scalable Vector Graphics) là định dạng ảnh vector phổ biến trong thiết kế website nhờ dung lượng nhẹ, hiển thị sắc nét trên mọi kích thước màn hình. Nếu bạn đang sử dụng nền tảng WordPress để làm website, chắc hẳn không ít lần gặp tình trạng không thể tải file ảnh SVG lên thư viện media, kèm theo thông báo không đúng định dạng tệp.

Đừng lo lắng! Trong bài viết này, mình sẽ hướng dẫn bạn cách upload ảnh SVG lên WordPress một cách an toàn, chỉ với vài dòng code đơn giản, không cần cài plugin, giúp website nhẹ hơn và tối ưu hiệu quả thiết kế.

SVG là gì?

SVG (Scalable Vector Graphics) là định dạng hình ảnh vector được xây dựng trên nền tảng XML, cho phép hiển thị hình ảnh sắc nét tuyệt đối ở mọi độ phân giải mà vẫn giữ dung lượng cực nhẹ. Khi sử dụng SVG trong WordPress, website không chỉ tăng tốc độ tải trang mà còn nâng cao trải nghiệm thị giác cho người dùng, đặc biệt trên các thiết bị có màn hình lớn hoặc độ phân giải cao.

Ưu điểm và nhược điểm của SVG

Về ưu điểm SVG:

✅ Dung lượng nhẹ, tối ưu tốc độ
SVG có khả năng nén hiệu quả (ví dụ như gzip), giúp kích thước file nhỏ hơn đáng kể so với ảnh bitmap, từ đó cải thiện tốc độ tải trang trên website WordPress.

✅ Hiển thị sắc nét ở mọi kích thước
Là ảnh vector, SVG có thể phóng to hoặc thu nhỏ tùy ý mà không bị vỡ hình hay giảm chất lượng, luôn hiển thị rõ nét trên mọi thiết bị, kể cả màn hình Retina.

✅ Dễ tạo hiệu ứng và ảnh động
SVG hỗ trợ tốt việc tạo hiệu ứng động thông qua CSS hoặc JavaScript, giúp website trở nên sinh động, hiện đại và tăng mức độ tương tác với người dùng.

✅ Tương thích tốt với trình duyệt hiện đại
Hầu hết các trình duyệt phổ biến hiện nay đều hỗ trợ SVG đầy đủ, bao gồm Chrome, Firefox, Edge, Safari và Internet Explorer từ phiên bản IE9 trở lên.

✅ Tải nhanh, cải thiện hiệu suất website
Nhờ dung lượng nhỏ và khả năng nhúng trực tiếp vào HTML, SVG giúp trình duyệt hiển thị nội dung nhanh hơn, góp phần nâng cao điểm hiệu suất và SEO.

Về nhược điểm:

⚠️ Không dễ chỉnh sửa trực tiếp
SVG được viết dưới dạng mã XML, nên việc chỉnh sửa thủ công khá phức tạp và thường cần đến các công cụ chuyên dụng như Illustrator hoặc Inkscape.

⚠️ Hạn chế với trình duyệt quá cũ
Mặc dù SVG đã được hỗ trợ rộng rãi, một số trình duyệt đời cũ (như IE8 trở xuống) không hiển thị SVG mặc định và có thể cần giải pháp thay thế hoặc plugin hỗ trợ.

Hướng dẫn code bật tải ảnh SVG cho website WordPress

Trong trường hợp bạn đã quen với việc can thiệp trực tiếp vào mã nguồn WordPress, phương pháp này là cách triển khai nhanh và hiệu quả nhất. Bạn cần chỉnh sửa file functions.php của theme đang kích hoạt, nơi WordPress cho phép khai báo thêm các hook và filter tùy chỉnh.

Để thực hiện, truy cập Appearance → Theme Editor, mở file functions.php, sau đó chèn đoạn mã bên dưới vào cuối file. Đoạn code này sẽ sử dụng filter upload_mimes để mở rộng danh sách MIME type được WordPress cho phép, từ đó kích hoạt khả năng upload file SVG thông qua Media Library.

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

Sau khi bạn lưu lại xong. vào kiểm tra website tải file svg lên thành công chưa nhé.

Kết luận

SVG là định dạng hình ảnh hiện đại, phù hợp cho các thành phần giao diện như icon, logo, UI nhờ dung lượng nhẹ và khả năng hiển thị sắc nét ở mọi độ phân giải. Mặc dù WordPress mặc định chặn việc upload SVG vì lý do bảo mật, bạn hoàn toàn có thể mở rộng MIME type cho SVG bằng vài dòng code thông qua filter upload_mimes.

Việc triển khai bằng code giúp website gọn nhẹ hơn so với dùng plugin, đồng thời cho phép bạn kiểm soát chính xác phạm vi và cách thức hoạt động. Tuy nhiên, với các website nhiều người dùng hoặc cho phép upload công khai, bạn nên kết hợp thêm các biện pháp sanitize SVG và giới hạn quyền upload để đảm bảo an toàn hệ thống.

Hy vọng qua hướng dẫn này, bạn sẽ áp dụng thành công để giúp website thân thiện hơn, mượt mà hơn và tạo ấn tượng tốt hơn với người dùng. Nếu thấy nội dung có giá trị, đừng quên đánh giá 5 sao để tiếp thêm động lực cho KHAWEB tiếp tục chia sẻ nhiều bài viết chất lượng hơn.