Cách Tạo File Svg Trực Tuyến, Tạo File Svg Không Background

     
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.

Bạn đang xem: Cách Tạo File Svg Trực Tuyến, Tạo File Svg Không Background



Xem ngay chi tiết cách tạo file Svg Trực Tuyến tại đây nhé:

Như mình hiểu đơn giản về công dụng .SVG cho website như sau:Đả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 .PNGTươ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 MobileTất cả các trình duyệt mới đều hỗ trợ .SVG và đồng bộ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ăngKhông tốn nhiều dung lượng và nhẹ hơn file PNG rất nhiềuKhi nào dùng .SVG?

Không thể dùng SVG trong 100% mọi trường hợp.

Xem thêm: Tổng Hợp 4 Loại Thuốc Chữa Bệnh Viêm Đại Tràng Tại Nhà Hiệu Quả Nhanh

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=“rmeilan.com.vn.svg” alt=”rmeilan.com.vn” />

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.

 

*
*
*

 

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


Chuyên mục: Tổng hợp