Cách tải hình ảnh SVG lên WordPress một cách an toàn

Kiến thức về WordPress 29/03/2020 09/05/2022 In trang này

Sơ đồ trang

WordPress hỗ trợ tải lên các định dạng nào
SVG là gì?
Tại sao SVG được sử dụng ngày một nhiều hơn?
Tại sao WordPress không hỗ trợ tải lên định dạng SVG?
Cách tải file .SVG lên WordPress một cách an toàn
Kết luận

Khi bạn tải ảnh có định dạng SVG lên WordPress thì sẻ gặp thông báo “Sorry, this file type is not permitted for security reasons” tạm dịch là “Xin lỗi, định dạng này không được

Đừng lo lắng, đây là một vấn đề phổ biến vì WordPress không hỗ trợ tải lên định dạng ảnh .SVG (Hiện tại phiên bản WP 5.3.2 bạn vẫn không thể tải lên định dạng ảnh .svg được nhưng có lẽ là phiên bản tiếp theo họ sẻ cho phép tải lên mặc định định dạng này).

WordPress hỗ trợ tải lên các định dạng nào

Mặc định, WordPress sẽ cho phép bạn upload các hình ảnh thuộc các định dạng .gif, .png, .jpg và jpeg; văn bạn định dạng .xls, .xlsx, .pdf, .ppt, .pptx, .pps, .ppsx, .doc, .docx và .odt; âm thanh định dạng .flv, .mp3, .m4v, .wma, .m4a, .mid, .ogg, .mp4, .wma, .mid; phim ảnh định dạng .ogv, .mp4, .3gp, .m4v, .avi, .mov, .3g2, .webm, .wmv và .mpg. Những file có các định dạng khác như .zip, .rar, .key cũng được cho phép.

Trong bài viết này VTS sẽ hướng dẫn cách để có thể tải lên định dạng ảnh .SVG dễ dàng và đảm bảo sự an toàn cho WordPress

SVG là gì?

SVG (Scalable Vector Graphics) là định dạng hình ảnh vector dựa trên văn bản XML. JPG và PNG là các định dạng hình ảnh phổ biến được tạo thành từ rất nhiều hình vuông nhỏ gọi là pixel, nhưng định dạng SVG dựa trên các thẻ XML để mô tả các đường, hình dạng và các thuộc tính của hình ảnh

Mặc dù định dạng .SVG đã ra mắt từ những năm 90 nhưng trong những năm gần đây thì định dạng này mới trở nên phổ biến. Thống kê của W3Techs cho thấy tính đến tháng 3 năm 2020, chỉ có 22,7% các trang web sử dụng SVG. Tuy nhiên, con số này có thể tăng lên khi các nhà phát triển và chủ sở hữu trang web đang sử dụng nhiều hơn vì về khả năng mở rộng và cho tốc độ tải nhanh hơn so với các định dạng png hay jpeg…

Bộ nhớ đệm (Web Cache) trên Host Server là gì?

Phần quản trị wp-admin WordPress bị chậm và cách khắc phục

Xoá toàn bộ ảnh có định dạng .webp trong thư mục uploads

Một ưu điểm khác của SVG là nó có hỗ trợ hầu như trên tất cả các trình duyệt chính (như Chrome, Firefox, Safari và Chrome cho Android)!

Nhưng những người sử dụng IE8 hoặc các phiên bản Chrome và Safari cũ hơn có thể gặp sự cố do định dạng không còn hỗ trợ các trình duyệt này. Nhưng điều này không phải là một vấn đề đối với các quản trị web, vì hầu hết mọi người không còn sử dụng các trình duyệt lỗi thời này nữa.

Tại sao SVG được sử dụng ngày một nhiều hơn?

Ưu điểm nổi bật đầu tiên của SVG là khả năng mở rộng . Vì các SVG dựa trên vector, chúng duy trì chất lượng như nhau ở tất cả các độ phân giải màn hình nên không gặp tình trạng hình bị méo, bị co, hay bị giảm chất lượng ảnh…

VD file với định dạng JPG xuất hiện mờ các điểm mờ trên một thiết bị cụ thể nào đó do thiếu điểm ảnh thì SVG vẫn trông rất sắc nét. Bạn thậm chí có thể phóng to và thu nhỏ theo ý muốn mà không bị vỡ ảnh. Tính năng đặc biệt này thực sự hữu ích khi tạo trải nghiệm tốt cho người dùng khi truy cập vào website của bạn.

SVG chiếm ít không gian lưu trữ web (KB nhẹ hơn) và tải nhanh hơn so với các hình ảnh pixel (PNG, JPEG). Nhưng có một nhược điểm – nếu bạn chụp ảnh đủ chi tiết và chuyển đổi nó thành SVG, nó sẽ chiếm nhiều dung lượng hơn so với JPG hoặc PNG, điều này là do kích thước của SVG phụ thuộc vào độ phức tạp của hình ảnh. Hình ảnh càng chi tiết, tập tin càng lớn. Đó là lý do tại sao SVG phù hợp hơn cho logo và biểu tượng.

Một tính năng tuyệt vời khác dành cho quản trị web tất cả hình ảnh ở định dạng này sẽ được hiển thị trong Google Image Search, điều này sẽ cải thiện SEO cho hình ảnh đáng kể.

Tại sao WordPress không hỗ trợ tải lên định dạng SVG?

Như đã trình bày ở trên SVG có với rất nhiều lợi thế, vậy tại sao SVG không phổ biến? Tại sao WordPress không cho phép bạn dễ dàng tải lên file SVG?

Lý do chính WordPress vẫn không cho tải lên file có định dạng .SVG là do rủi ro bảo mật thường là các lỗi bảo mật XSS

Vì các SVG về cơ bản là các tệp văn bản, mọi người có thể dễ dàng chèn mã độc vào đó. Do đó, trang web của bạn đã bị tấn công và có thể mất quyền quản trị. Rất đáng sợ phải không?

Đó là lý do tại sao bạn cần cẩn thận khi làm việc với các tệp SVG . Nếu bạn đang tải SVG lên WordPress, điều quan trọng là phải thực hiện đúng cách – đặc biệt nếu bạn đang tải lên các file SVG có sẵn miễn phí từ các nguồn không xác định.

Có nhiều thảo luận về việc biến SVG thành một phần của các tính năng của WordPress nhưng vẫn chưa có hồi kết 🙂 Do đó, nếu bạn muốn tải lên file .SVG thì có thể xem xét cách sau.

Cách tải file .SVG lên WordPress một cách an toàn

Cách tốt nhất để tải các tệp SVG lên WordPress một cách an toàn là sử dụng plugin Safe SVG , một plugin tự động dọn sạch các tệp SVG đã tải lên. Ngoài ra, nó có thể xem trước các tệp SVG trong thư viện phương tiện, vì vậy bạn có thể dễ dàng thêm chúng vào bài viết của mình.

Sử dụng Safe SVG tải file .SVG lên WordPress

Plugin WordPress này cũng có phiên bản chuyên nghiệp cho phép giới hạn người dùng có thể tải lên SVG. Tính năng này hữu ích cho các trang web có nhiều tác giả, bạn có thể hạn chế quyền tải lên của 1 số tác giả nào đó…

Bạn có thể tải plugin tại https://vi.wordpress.org/plugins/safe-svg/ . Khi bạn cài đặt và kích hoạt plugin, bạn không cần thực hiện bất kỳ điều chỉnh cài đặt nào. Plugin cho phép tải lên định dạng SVG và tự động dọn sạch mã độc tiềm ẩn có trong file SVG.

Sử dụng code cho phép tải định dạng .SVG lên WordPress

Nếu bạn có thể xác định được nguồn gốc của các file SVG và không muốn dùng plugin thì có thể sử dụng đoạn code này dán vào file functions.php

add_filter( 'wp_check_filetype_and_ext', 'fix_svg_mime_type', 10, 5 );
# MIME type correction for SVG files.
function fix_svg_mime_type( $data, $file, $filename, $mimes, $real_mime = '' ){
	// WP 5.1 +
	if( version_compare( $GLOBALS['wp_version'], '5.1.0', '>=' ) )
		$dosvg = in_array( $real_mime, [ 'image/svg', 'image/svg+xml' ] );
	else
		$dosvg = ( '.svg' === strtolower( substr($filename, -4) ) );
// mime type has been reset, fix it
// and also check the user right
	if( $dosvg ){
		// allow
		if( current_user_can('manage_options') ){
			$data['ext']  = 'svg';
			$data['type'] = 'image/svg+xml';
		}
		// Block
		else {
			$data['ext'] = $type_and_ext['type'] = false;
		}
	}
	return $data;
}

Hiển thị ảnh svg trong thư viện WordPress

Mặc định các file svg tải lên nó sẻ không hiển thị dạng ảnh mà hiển thị dạng tài liệu nên nếu bạn muốn nó hiển thị dạng ảnh thì thêm đoạn code này vào file functions.php

/* show_svg_in_media_library
*===============================================================*/
add_filter( 'wp_prepare_attachment_for_js', 'show_svg_in_media_library' );
function show_svg_in_media_library( $response ) {
    if ( $response['mime'] === 'image/svg+xml' ) {
        $response['sizes'] = [
            'medium' => [
                'url' => $response['url'],
            ],
        ];
    }
    return $response;
}

Kết luận

SVG có nhiều lợi thế cho WordPress. Tuy nhiên, do định dạng văn bản của nó, mọi người có thể chèn mã độc và làm cho trang web của bạn dễ bị tổn thương nên WordPress vẫn chưa mặc định cho tải file này lên.

Với sự trợ giúp của plugin Safe SVG, mặc dù nó rất an toàn nhưng chúng tôi khuyên bạn nên cẩn thận. Nếu bạn muốn tải xuống bất kỳ hình ảnh SVG miễn phí nào đó hãy luôn luôn kiểm tra xem chúng đến từ một nguồn đáng tin cậy hay không.

Từ khóa Tùy chỉnh WordPress

Nếu bạn thấy bài viết có ích hãy sao chép link và chia sẻ bài viết

Tiến Dũng Đào

Tiến Dũng Đào chuyên quản lý, vận hành các dịch vụ website. Anh có nhiều năm kinh nghiệm về VPS, Hosting, technical SEO, CMS. Đặc biệt yêu thích WordPress với hơn 5 năm phát triển theme và plugin. Sở thích của anh là đọc, viết blog, đi du lịch, tập võ và chia sẻ các kiến thức cho mọi người.