Hướng dẫn thêm file SVG vào WordPress

Rất nhiều bạn muốn thêm file SVG vào WordPress của mình?. Bản thân mình cũng vậy, nó có nhiều lý do lắm. Chúng ta đều biết là 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 đúng không nào. Bài này viết này anhlinhmkt sẽ hướng dẫn bạn cách thêm file SVG vào WordPress nhé.  Đầu tiên chúng ta nên hiểu File SVG là gì? Và lý do tại sao nên sử dụng nó nhé.

File SVG là gì?

SVG (Scalable Vector Graphics) là định dạng ảnh vector dùng để thể hiện các đối tượng đồ họa hai chiều và có hỗ trợ tương tác từ phía người dùng cũng như ảnh động. Vì là hình ảnh dạng vector nên chúng ta có thể hiển thị, co giãn (scale) thoải mái mà không làm giảm chất lượng hình ảnh.

SVG là gì?
SVG là gì?

SVG thuộc tiêu chuẩn mở và được quản lý bởi tổ chức World Wide Web Consortium, một tổ chức quản lý nhiều chuẩn khác như HTML, XHTML… Các tập tin có đuôi “.svg” được mặc định hiểu là tập tin SVG. SVG có thể phóng to thu nhỏ mọi kích cỡ mà không giảm chất lượng hình ảnh. Vì thế, nó được dùng nhiều trong các bản đồ, sơ đồ.

Ưu điểm của SVG

Kích thước file nhỏ, dễ nén

Hình ảnh SVG, XML, chứa nhiều mảnh lặp đi lặp lại của văn bản, vì vậy chúng rất thích hợp cho các thuật toán nén lossless dữ liệu. Khi một hình ảnh SVG đã được nén bằng thuật toán tiêu chuẩn gzip, nó được gọi là một hình ảnh “svgz” và sử dụng phần mở rộng tên tập tin .svgz tương ứng. Đặc biệt khi thêm file SVG vào WordPress thì rất nhẹ nhé.

Hiển thị đẹp trên màn hình retina

SVGs giống với tất cả các đồ họa vector, có thể được thu nhỏ đến kích thước bất kỳ mà không mất đi sự rõ ràng (trừ rất nhỏ). Nói cách khác, bạn có thể phóng to để một SVG tất cả các bạn muốn và họ sẽ luôn luôn nhìn sắc nét. Vì vậy, bạn không còn phải tạo ra một phiên bản 2x Retina phiên bản cho logo hình ảnh của bạn.

Thêm file SVG vào trang web WordPress
Thêm file SVG vào trang web WordPress

Có thể làm ảnh động

Sử dụng thẻ SVG để nhúng các hình ảnh trên trang web cho phép chúng ta định dạng một cách dễ dàng thông qua CSS, giống như cách làm với thẻ HTML thông thường. Ta có thể thay đổi thuộc tính đối tượng như màu nền, độ mờ đục, vị trí, chiều rộng,… Ngoài ra, ta cũng có thể thêm các hiệu ứng hình ảnh động ấn tượng bằng cách sử dụng sự kết hợp của các thư viện JS và CSS.

Hỗ trợ đầy đủ

Sau nhiều năm không tương thích trình duyệt, SVG cuối cùng đã có thể. Chúng được hỗ trợ trong tất cả các trình duyệt hiện đại bao gồm IE9. Bạn thậm chí có thể sử dụng Fallbacks nếu bạn vẫn còn quan tâm đến IE8.

Thời gian tải tốt hơn

SVGs tuyệt vời cho thiết kế web, vì nó có độ phân giải vô hạn và kích thước file rất nhỏ. Nó có thể được nhúng trực tiếp vào một tài liệu HTML với thẻ svg, do trình duyệt không cần phải tải về đồ họa. Điều này có nghĩa rằng trang web của bạn sẽ được tải nhanh hơn!

Nhược điểm của SVG

SVG là ngôn ngữ không được thiết kế để sửa chữa trực tiếp trên mã nguồn. Để tạo ra các hình ảnh SVG nói chung, cần dùng các công cụ hỗ trợ.

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

Dù SVG có thể là một lựa chọn cho hình ảnh của các trang mạng trong tương lai không xa, nó vẫn còn khá mới mẻ và cần sự hỗ trợ từ các trình duyệt mạng. Hiện nay Firefox đã hỗ trợ tương đối đầy đủ cho SVG, tuy nhiên Internet Explorer 8 và một số trình duyệt khác cần có plug-in đặt riêng lẻ.

Khi nào nên dùng file SVG ?

Tất nhiên không thể dùng SVG trong 100% mọi trường hợp. Nhược điểm của SVG là giới hạn về độ chi tiết và màu sắc, tất nhiên chúng ta có thể sử dụng SVG để vẽ một hình ảnh phức tạp, hoặc thực như ảnh chụp, nhưng nếu làm vậy thì performance sẽ rất tệ.

Nhưng với xu hướng hiện nay, phong cách thiết kế phẳng đang là mốt, những website với giao diện đơn giản, sử dụng hình ảnh cũng đơn giản, ít chi tiết thì SVG hoàn toàn có thể phát huy được thế mạnh của mình.

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

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.

Giải pháp khi dùng SVG

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. 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é.

Hướng dẫn thêm file SVG vào WordPress

Thêm file SVG vào WordPress bằng Code

Mình khuyến khích các bạn nên thêm file SVG vào WordPress bằng cách này nhé. Đây là cách mình hay dùng nhất, không cần plugin gì cả. Phương pháp thêm file SVG vào WordPress bằng Code này rất nhanh gọn. Sau khi xong mình chỉ cần xóa đoạn code đó đi là được thôi quá đơn giản.

Thêm file SVG vào WordPress
Thêm file SVG vào WordPress

Bạn tìm đến file functions.php. Sau đó thêm đoạn code sau vào nhé.

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

Bạn muốn tìm file functions.php cách dễ nhất là vào Apperrance » Theme Editor. Như vậy là bạn có thể thêm file SVG vào WordPress rồi. Quá nhanh và dễ dàng phải không nào.

Thêm file SVG vào WordPress bằng Plugin

Đầu tiên bạn vào thư mục Plugin và tìm SVG Support. Tải lên tệp SVG trong WordPress sử dụng SVG Support plugn.

SVG Support Plugin
SVG Support Plugin

Phương pháp này cung cấp sự hỗ trợ đầy đủ cho việc thêm 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ướng dẫn cài đặt Plugin SVG Support để thêm file SVG vào WordPress

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.

Cài đặt Plugin SVG Support
Cài đặt Plugin SVG Support

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 và thêm file SVG vào 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 nhé.

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 thêm file SVG vào 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 thêm file SVG vào WordPress. Trong phần học về Website mình cũng có nhiều bài viết bạn cần. Nếu bạn muốn biết các mẹo hay và kiến thức về WordPress thì vào Học Tâp xem qua nhé. Chúc bạn thành công.

Hà Anh Lĩnh
Kết nối Face
Có bất kỳ câu hỏi nào các bạn cử để lại cho mình. Mình sẽ trả lời các bạn ngay nhé.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Gọi cho Lĩnh

Nhắn Messenger

Chat Zalo

Gửi Mail