Hướng dẫn tạo Logo chuẩn .SVG khi upload lên website

Chào bạn đọc! Sau quá trình mày mò lận đận mất khoảng 1 ngày về tìm hiểu cách sử dụng Logo đuôi .SVG thay cho ảnh .PNG như thông thường các website cũ hay sử dụng.

SVG (Scalable Vector Graphics) là một đị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. Chuẩn SVG hiện đang được phát triển bởi Hiệp hội World Wide Web (W3C) từ năm 1999 đến nay, và chuẩn hóa lần đầu hồi năm 2001. Đặc điểm của SVG đó là hình ảnh được thể hiện ra dựa trên tọa độ của các vector cấu thành nên nó có thể thu lại nhỏ xíu hoặc bung ra thật to mà không làm ảnh hưởng đến chất lượng. Trong khi đó, ảnh PNG, JPEG, GIF là các ảnh bitmap cấu thành từ nhiều pixel tĩnh nên nếu phóng to ra thì sẽ bị vỡ hình.

Như mình hiểu đơn giản về công dụng .SVG cho website như sau:

1. Đảm bảo chất lượng hình ảnh sắc nét nhất. Vì là vector nên chắc chắn nó sẽ hơn .PNG
2. Tương thích mọi thiết bị – Việc sử dụng .SVG sẽ tối ưu được trên cả Web PC và Web Mobile
3. Tất cả các trình duyệt mới đều hỗ trợ .SVG và đồng bộ
4. File SVG khi upload lên sẽ rất nét ở mọi nơi mọi thiết bị, cho dù size thế nào thì chất lượng ảnh nó vẫn nét căng
5. Không tốn nhiều dung lượng và nhẹ hơn file PNG rất nhiều

Khi nào dùng .SVG?

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ệ. Chỉ nên sử dụng .SVG cho Logo và icon của website

Cách dùng thông qua thẻ IMG như một hình ảnh bình thường

<img src=“tapchiai.net.svg” alt=”tapchiai.net” />

Cách lưu file logo.SVG để đăng lên Website

Phần bên trên mình đã nói qua .SVG là gì?, công dụng và cách sử dụng nó. Phần này mình sẽ đi sâu vào chi tiết cách lưu file Logo.svg khi upload lên website tương thích trên mọi thiết bị, màn hình.

Để lưu file Logo.svg bạn cần dùng Illustrator

Ở đây để tránh file logo.svg không bị lỗi trên trình duyệt web bạn cần phải làm những thao tác sau:

Chọn hết các đối tượng “Select” -> “All” > Type > Create Outlines

Bạn có thể sử dụng phím tắt shift + cmd + O trên Mac và shift + ctrl + Otrên Windows.

Sau khi nhấp vào “Create Outlines“, Illustrator sẽ chuyển đổi văn bản của bạn thành những điểm ảnh để tạo ra file .SVG mà trình duyệt web nào cũng tương thích và hiển thị chuẩn.

Tiếp theo bạn chỉ việc Export file SVG: File>Export tích chọn User Artbroards, chọn All

Độ 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

Cho phép Upload file SVG trong WordPress Media

Dưới đây là đoạn code bạn sẽ bỏ vào file function.php trong theme

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

Chỉ cần tao tác tiểu tiết này mà mình mất gần 1 ngày trời mày mò. Hướng dẫn trên bạn hãy làm theo và tận hưởng thành quá nhé. Chúc các bạn thành công!