Tapchiai.net
Saturday, 10/06/2023
  • Home
  • Công nghệ
  • Reviews
  • Hướng dẫn
  • Câu hỏi lớn?
  • Home
  • Công nghệ
  • Reviews
  • Hướng dẫn
  • Câu hỏi lớn?
No Result
View All Result
Tapchiai.net
No Result
View All Result

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

Megusta by Megusta
01/01/2018
in Hướng dẫn, Wordpress
A A
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

Nội dung liên quan

Transform Your Career with the Convenience of an Online Finance MBA

Top 6 Benefits of Earning An MBA in Finance

Is a Finance MBA Program Right for You? Basic Guide

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.

createoutline

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

export-svg-fig1

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

Tags: Cách lưu file logo.SVG để đăng lên WebsiteSVGThủ thuật WordpressUpload file SVG trong WordPress
Share444Tweet277Pin100

Bài viết đề xuất

The Convenience of an Online Finance MBA
Hướng dẫn

Transform Your Career with the Convenience of an Online Finance MBA

02/05/2023
316
Benefits of Earning An MBA in Finance
Hướng dẫn

Top 6 Benefits of Earning An MBA in Finance

09/04/2023
397
Is a Finance MBA Program Right for You?
Hướng dẫn

Is a Finance MBA Program Right for You? Basic Guide

26/03/2023
578
MBA in finance
Công nghệ

MBA in Finance: An In-Depth Guide

25/02/2023
2.1k
how to connect bluetooth speakers to macbook
Công nghệ

How to connect bluetooth speakers to macbook easily step-by-step

09/08/2022
2.8k
How to connect Airpods to Fire TV fast and easily
Công nghệ

How to connect Airpods to Fire TV fast and easily

29/07/2022
673

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • The Best Data Management Software for Business in 2022: Commvault

    The Best Data Management Software for Business in 2022: Commvault

    994874 shares
    Share 397949 Tweet 248718
  • The risk management software for schools

    384933 shares
    Share 153973 Tweet 96233
  • Dell latitude 9510- the best Dell laptop for business

    41188 shares
    Share 16475 Tweet 10297
  • Phím Windows là phím nào? Dùng phím Windows đề làm gì?

    33204 shares
    Share 13282 Tweet 8301
  • Best free design software for sublimation printing

    26654 shares
    Share 10662 Tweet 6664
  • Devlinkvn.com
  • Bản quyền win 10 giá rẻ
  • Office bản quyền giá rẻ
  • Nam Toàn Store
Gửi phản hồi cho Tapchiai.net Tại Đây

Nội dung của Tapchiai.net được chia sẻ với các điều khoản có trong giấy phép Creative Commons Ghi nhận quyền của tác giả 4.0 Quốc tế.

No Result
View All Result
  • Home
  • Công nghệ
  • Reviews
  • Hướng dẫn
  • Câu hỏi lớn?

Nội dung của Tapchiai.net được chia sẻ với các điều khoản có trong giấy phép Creative Commons Ghi nhận quyền của tác giả 4.0 Quốc tế.