fbpx
close

SVG là gì? 4 lý do tại sao bạn nên sử dụng SVG

Tác giả: TinoHost Ngày cập nhật: 23/11/2021 Chuyên mục: Webmasters
Disclosure
Website Wiki.tino.org được cung cấp bởi Tino Group. Truy cập và sử dụng website đồng nghĩa với việc bạn đồng ý với các điều khoản và điều kiện trong chính sách bảo mật - điều khoản sử dụng nội dung. Wiki.tino.org có thể thay đổi điều khoản sử dụng bất cứ lúc nào. Việc bạn tiếp tục sử dụng Wiki.tino.org sau khi thay đổi có nghĩa là bạn chấp nhận những thay đổi đó.
Why Trust Us
Các bài viết với hàm lượng tri thức cao tại wiki.tino.org được tạo ra bởi các chuyên viên Marketing vững chuyên môn và được kiểm duyệt nghiêm túc theo chính sách biên tập bởi đội ngũ biên tập viên dày dặn kinh nghiệm. Mọi nỗ lực của chúng tôi đều hướng đến mong muốn mang đến cho cộng đồng nguồn thông tin chất lượng, chính xác, khách quan, đồng thời tuân thủ các tiêu chuẩn cao nhất trong báo cáo và xuất bản.

Bạn quan tâm lý do vì sao một số ảnh trên web lại bị vỡ hạt, một số lại không khi bạn phóng to ảnh, cũng như cách làm thế nào để thực hiện được tương tự? Vậy, trong bài viết này, Tino Group sẽ giúp bạn giải đáp bí mật tạo ảnh bằng định dạng SVG nhé!

SVG là gì?

Scalable Vector Graphics viết tắt là SVG hay vector đồ họa có thể mở rộng. Đây là một định dạng ngôn ngữ XML nhằm miêu tả một hình ảnh vector 2 chiều tĩnh hoặc động. Thay vì sử dụng các định dạng khác như JPG, PNG trong ảnh hoặc sử dụng CSS để tạo ảnh trên web, bạn có thể sử dụng SVG – một định dạng vector nhẹ hơn, phóng to không bị vỡ và rất dễ để xử lý.

Ví dụ về SVG trong thực tế

Một ví dụ thực tế: bạn có thể nhìn thấy đây là một hình ảnh với định dạng SVG chỉ nặng 60,1KB. Tuy nhiên, bạn có thể tải về và mở rộng ảnh này ra hết mức phóng to nhưng ảnh không hề bị vỡ hạt như định dạng JPG hay PNG.

svg-la-gi

SVG được lưu trữ dưới dạng một tệp văn bản. Vì thế, bạn có thể mở tệp SVG và chỉnh sửa bằng bất kỳ một công cụ/ phần mềm text editor nào thậm chí bằng Word!

Bạn có thể tạo hình tròn có viền xanh ruột vàng với định dạng SVG bằng 1 dòng code như sau:

<circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow”>

Tino Group sẽ rút gọn các ý lại và bạn sẽ thấy một vài điều thú vị như sau:

  • Bạn có thể tạo một hình ảnh bằng định dạng SVG không đến 1KB!
  • SVG là hình ảnh được định dạng bằng XML
  • Tất cả các phần tử bên trong tập SVG đều có thể trở thành ảnh động
  • SVG được dùng để tạo ra những ảnh đồ họa dựa trên vector dùng cho web
  • W3C khuyến khích nên sử dụng SVG

Ưu điểm của SVG

Có rất nhiều định dạng khác bạn có thể sử dụng cho hình ảnh của mình. Tuy nhiên, bạn nên sử dụng SVG cho web vì những lý do sau đây:

  • Bạn có thể tạo và chỉnh sửa ảnh SVG với bất cứ một công cụ text editor nào
  • Sử dụng ảnh SVG cho web, bạn có thể tìm kiếm, lập chỉ mục và nén ảnh lại
  • Ảnh dạng SVG có thể phóng to vô hạn
  • Định dạng SVG sẽ cho chất lượng in ra được tốt nhất với bất kỳ độ phân giải nào
  • SVG là một tiêu chuẩn mở
  • Bạn có thể sử dụng XML thuần để tạo SVG
  • Khả năng phóng to thu nhỏ không giới hạn – không bị vỡ hạt

Tại sao nên sử dụng SVG?

  • Tiết kiệm dung lượng: nếu bạn lưu 1 file cũng hình ảnh nhưng với định dạng PNG, bạn sẽ thấy khối lượng của SVG sẽ nhỏ hơn rất nhiều và thu phóng cũng không bị vỡ hạt.
  • Khả năng tạo ảnh động: như trong phần ưu điểm đã nhắc đến, mọi phần tử trong SVG bạn đều có thể đem ra để tạo thành một ảnh động, vừa giảm bớt các request và làm cho trang web của bạn trở nên nhanh nhẹn. Bạn có thể tạo ảnh động thông qua CSS hoặc JavaScript để tạo chuyển động cho từng thành phần.
  • Chất lượng ảnh cực tốt: định dạng của SVG là vector. Vì thế, bạn có thể thu phóng thoải mái mà không lo bị vỡ hạt; bạn cũng có thể chỉnh sửa dễ dàng bằng các text editor.
  • SVG hiện đại và tương thích: Tính đến năm 2017, hầu hết các trình duyệt đã hỗ trợ hiển thị hình ảnh bằng SVG, nếu bạn mở một ảnh định dạng SVG không được, bạn nên thử nâng cấp trình duyệt của mình.

Hướng dẫn sử dụng SVG

Cách để tạo 1 file SVG

Tạo SVG bằng code

Đây là cách thực hiện khá phổ biến với các coder, bằng cách code, các lập trình viên có thể tạo ra vô số hình ảnh, thiết kế layout,… Điểm chung lại là các thành phần đồ họa một cách dễ dàng.

Bạn có thể tìm hiểu về ngôn ngữ XML, CSS và HTML để tạo ngay một ảnh SVG nhé! Để dễ hình dung hơn, bạn có thể copy dòng code này về, mở notepad lên và dán vào sau đó lưu lại dưới định dạng .SVG => cuối cùng bạn sử dụng trình duyệt bất kỳ để mở.

<!DOCTYPE html>

<html>

<body>

<h1>Tạo file SVG bằng code</h1>

<SVG width=”105″ height=”400″>

<circle cx=”50″ cy=”50″ r=”40″ stroke=”red” stroke-width=”4″ fill=”blue” />

Trình duyệt của bạn không hỗ trợ.

</SVG>

</body>

</html>

Bạn có thể tham khảo thêm các thẻ sau đây và thử lại cho hình tròn của bạn trở nên đặc sắc hơn:

  • <SVG> là thẻ dùng để định nghĩa đó là một phần tử SVG.
  • <line> dùng để tạo một đường thăng
  • <rect> Tạo hình tứ giác (vuông, chữ nhật)
  • <polygon> Tạo hình đa giác; bạn có thể tạo tam giác ba cạnh hoặc nhiều cạnh hơn tùy bạn.
  • <path> Tạo hình dạng bất kỳ bằng cách định vị điểm và đường
  • <defs> Định nghĩa những tài nguyên có thể sử dụng lại
  • <g> Gộp nhiều hình dạng thành một nhóm viết tắt của (Group).
  • <use> Lấy những tài nguyên có bên trong <defs> và giúp chúng hiển thị trong SVG.

Tạo SVG bằng phần mềm đồ họa

Với các công cụ đồ họa như: Adobe Illustrator, Affinity Designer, Sketch là những phần mềm trả phí phổ biến và rất nhiều nhà thiết kế trên thế giới sử dụng để thiết kế hình ảnh, logo,…

Những phần mềm miễn phí bạn có thể tìm như: Inkscape, Gravit Designer, Vectr, SVG-Edit, Boxy SVG, Vecteezy,.. đây là những phần mềm miễn phí, phần mềm mã nguồn mở bạn có thể copy tên và tìm trên Google để sử dụng nhé!

Chuyển đổi file ảnh khác sang SVG

Để chuyển đổi một hình ảnh ở định dạng khác sang định dạng SVG, bạn chỉ cần lên Google và tìm từ khóa như sau:

<tên định dạng bạn muốn chuyển thành SVG> to SVG

sử dụng tiếng Anh tìm bạn sẽ thấy rất nhiều trang web chuyển đổi rất thú vị. Tino Group khuyên bạn nên dùng:

convertio.co – đây là một trang web có thể chuyển đổi rất nhiều định dạng khác nhau, bạn có thể chuyển cả SVG sang một định dạng khác và ngược lại hoàn toàn miễn phí.

svg-la-gi

Ngoài ra, bạn có thể thử một số trang khác như: PNG to SVG hay Online Convert Free. Nhưng trang này đều hỗ trợ tiếng Việt, vì thế, bạn sẽ không gặp những khó khăn trong khi sử dụng.

Cách để mở một tệp SVG

Cách đơn giản nhất để mở một tệp SVG là bạn sử dụng ngay trình duyệt của mình. Hầu hết các trình duyệt hiện đại đều hỗ trợ mở định dạng SVG.

Ví dụ, Tino Group đang sử dụng trình duyệt Chrome để mở một file định dạng SVG ở đầu bài.

svg-la-gi

Chỉ những trình duyệt từ Internet Explorer 8 sẽ không hỗ trợ định dạng SVG. Nếu trình duyệt của bạn không thể mở một tệp SVG, bạn có thể nên thử nâng cấp trình duyệt của mình hoặc mở bằng các ứng dụng trực tuyến như:

Freecodeformat – Tại trang web này, bạn có thể thử code một ảnh SVG cho bản thân.

svg-la-gi

Qua bài viết, Tino Group hy vọng đã mang lại những kiến thức bổ ích cho bạn về định dạng SVG là gì cũng như những cách để tạo, sửa đổi và sử dụng hình ảnh SVG một cách hiệu quả. TinoHost mong bạn có thể luôn tạo ra được những website động thật bắt mắt nhé!

Những câu hỏi thường gặp về SVG

Vì sao ảnh SVG không hiển thị trên web?

Có thể trong quá trình đăng tải hay code ra SVG, bạn đã vô tình quên không xác định thuộc tính width và height của ảnh, vì vậy ảnh sẽ bị hiển thị mặc định là max width = 0 và bạn không thể nhìn thấy ảnh.

Nên sử dụng những ảnh phức tạp với định dạng SVG hay không?

Đối với các ảnh quá phức tạp sẽ có nhiều vector sẽ làm ảnh của bạn trở nên rất nặng và đôi khi website không thể tải nỗi. Vì vậy, nếu sử dụng code để tạo SVG, bạn nên tạo một số hình thù không quá phức tạp để hình ảnh bằng định dạng SVG đủ nhẹ để chạy trên website.

Internet Explorer 8 có hỗ trợ SVG hay không?

Nếu bạn vẫn chọn cách sử dụng trình duyệt Internet Explorer 8 cổ… Bạn có thể thử cài đặt một số plugin để trình duyệt Internet Explorer 8 có thể hiển thị hình ảnh của file SVG bạn nhé!

Vì sao ảnh SVG bị thay đổi khi đổi code CSS?

Khi chỉnh sửa ảnh bằng code CSS, bất kỳ thuộc tính nào của SVG sẽ bị ghi đè do các thuộc tính của CSS nằm ở mức ưu tiên cao hơn.

Chia sẻ một chút thông tin về bạn. Những thông tin này có thể được công khai.

Xem thêm bài viết

Bài viết liên quan

Mục lục

Xem nhiều

giá tốt, chất lượng cao mình rất hài lòng
chất lượng dịch vụ tốt lắm...á
chất lượng dịch vụ rất tốt.
giá tốt, chất lượng cao mình rất hài lòng
Dịch vụ chăm sóc khách hàng tốt
Dùng rất oke nha mọi người
Dịch vụ chăm sóc khách hàng tốt, mình rất hài lòng về dịch vụ của TINOHOST
Đã mua rất nhiều tên miền tại Tinohost. Chất lượng tốt
dịch vụ và chăm sóc khách hàng rất tốt , mình rất thích tinohost , mình đã sử dụng nhiều dịch vụ của tinohost rồi
tuyệt vời chăm sóc khách hàng quá tốt
dịch vụ và chăm sóc khách hàng rất tốt , mình rất thích tinohost , mình đã sử dụng nhiều dịch vụ của tinohost rồi
Quá tốt - Quá xuất sắc và tuyệt
Hỗ trợ nhiệt tình. dịch vụ chất lượng
Đội ngũ support rất nhiệt tình.
Sử dụng dịch vụ của bạn Tinohost 2 3 năm nay chưa khi nào phải thất vọng.
host dùng chất lượng, miền giá rẻ
dịch vụ hỗ trợ rất nhanh, tốc độ hosting tốt
Hộ trợ tốt, nhanh. Tuyệt vời 🥰
tuyệt vời, dịch vụ cực tốt và hỗ trợ siêu nhanh
Làm việc nhanh chóng, giá thành hợp lí.
Hosting rẻ và nhanh thích hợp cho học sinh sinh viên như mình
dịch vu tốt ! Sẽ sử dụng thưởng xuyên !
Mỗi lần cần gì, nhắn Tino là được hỗ trợ ngay. Nên một đứa không biết gì về web như mình cũng tạo được blog. Cơ bản mình chỉ lo viết, mọi thứ có anh IT của Tino lo hết.
Nhìn chung thì Tino xứng đáng là một trong những nhà cung cấp host giá rẻ #1 tại VN. Bên này support khá nhanh và nhiệt tình nên quá trình sử dụng diễn ra tương đối trơn tru.
Chất lượng quá ok so với mức giá. Các SME có thể tham khảo để dựng web nhé.
uy tín chất lượng chuẩn cho 5 sao
Dịch vụ nhanh chóng thanh toán tiện lợi
Dịch vụ nhanh chóng, giá cả hợp lý
Chất lượng phục vụ ok, support khá nhanh chóng và chất lượng gói lớn tốt, gói nhỏ cần tốt hơn.
Dịch vụ tốt, giá cả hợp lý👍
Rất hay, rất tốt, rất hữu ích
Hỗ trợ rất nhanh và nhiệt tình
Chất lượng phục vụ ok, support khá nhanh chóng và chất lượng gói lớn tốt, gói nhỏ cần tốt hơn.
dịch vụ tốt, thanh toán nhanh chống
Hài lòng dịch vụ của tinohost
Sau khi sử dụng dịch vụ của TinoHost. Mình thấy website load nhanh hơn hẳn so với sử dụng ở nhà cung cấp cũ. Giá cả do mình đc mua với giá sale 99% của TinoHost nên rất là rẻ. Gói mình mua là gòi Hosting Bussiness 20GB. Thông số cấu hình cao nên web load khá mượt
Chúc TinoHost phát triển!
domain rẻ, có nhiều gói hữu ích thích hợp cho sinh viên
Hài lòng về dịch vụ và tư vấn
Dịch vụ tốt . Support nhiệt tình
Chất lượng OK
Nhanh chóng
dịch vụ rất tốt
Nhân viên support nhanh, hỗ trợ nhiệt tình, giao dịch tự động nên khá tiện
Đã dùng nhiều dịch vụ tại Tinohost, chất lượng tốt, rất hài lòng ...😀
Sự dụng rất hài lòng với các dịch vụ của tinohost
Dịch vụ tốt, uy tín chất lượng
Tino dịch vụ quá tuyệt vời
Giá rẻ, dịch vụ tốt, hỗ trợ nhanh chóng
dịch vụ rất tốt rất tuyệt vời
Giá hợp lý cho người mới dùng
Mình thấy Tinohost có giao diện thân thiện, dễ đăng ký sử dụng cho người mới tập tành làm web như mình. Hosting hỗ trợ có nhiều lựa chọn về dung lượng và giá cả! Thanh toán qua momo thuận tiện. Recommended!
wed quá ok làm việc nhanh ngọn
Dịch vụ tốt. Khá hài lòng vì support nhiệt tình
Dịch vụ quá tuyệt vời danh cho các bạn
Xin cảm ơn đội ngủ kỹ thuật. Các bạn rất chuyên nghiệp và thân thiện. Tôi sẽ giới thiệu các bạn cho bạn bè của mình.
Dịch vụ hỗ trợ tốt, ổn định, thanh toán dễ dàng.
Mình từng dùng VPS bên Vietel IDC, hay gặp lỗi vặt và bảo trì liên tục. Nhưng Tino thì rất ok
dùng tốt, nhanh, dễ sử dụng
Giao diện đẹp mắt, dễ sử dụng
Đề nghị xem lại vấn đề phục vụ khách hàng (livchat)!
Good. Tốc độ cao. Tùy chỉnh nhiều trên shared hosting.
hosting ngon, giá luôn rẻ, tôi làm code nhưng rất thích sài host tino
Tino cung cấp host rất chuyên nghiệp. Đội ngũ kỹ thuật hỗ trợ rất tận tâm và nhiệt tình. Mình sẽ tiếp tục ủng hộ Tino 🥰.
Rất tuyệt vời🙆🙆🙆🙆🙆🙆🙆🙆🙆
Xét về tầm giá thì TinoHost rất đáng để mua và sử dụng lâu dài.
Dịch vụ chất lượng, ủng hộ 1 năm nay rồi
tuyệt vời quá đi,tuyệt vời quá đi
Tốc độ ổn định, tư vấn nhiệt tình
mới tham gia, mong mọi người hỗ trợ thêm
Tốc độ khá tốt với gói rẻ nhất 9k
Giao dịch nhanh,support nhanh và tận tình,chuyển miền nhanh,Hosting Ok
mua sản phẩm dịch vụ tinhot rất tốt tặng ad 5tr ** luon nè🥰🥰🥰
tinohost
một truong những nơi bán hosting rẻ, chất lượng dành cho anh em nào cần để làm web
mua tại : tinohost.com
mình đã mua 2 tên miền + hosting của Tino Host . quả nhiên hiệu quả SEO cải thiện đáng kể và chứng chỉ bảo mật HTTPS miễn phí của Tino Host cũng ko kém phần quang trọng cho việc SEO website của mình
Tino host là một trong nhà cung cấp tốt nhất mình từng sử dụng. Với ưu đãi khuyến mại nhiều, giá thành rẻ kèm theo đó là sự support tuyệt vời của các admin. Nếu ai chưa lựa chọn được nhà cung cấp cho bản thân mình thì Tinohost sẽ là câu trả lời tốt nhất.
dịch vụ tốt, đội ngũ support nhiệt tình, cảm ơn #tinohost
Uy tín, chất lượng, nhân viên hỗ trợ nhiệt tình
mua 2 domain tại tinohost dùng rất chất lượng
Đã mua 02 domain và hosting tại TinoHost, hài lòng cách tư vấn và chăm sóc khách hàng của TinoHost :)
Giá rẻ cấu hình mạnh, black friday là sự bùng nổ của Tino
Hay web bán tài nguyên rất ngon
dịch vụ tốt, mua luôn host chất lượng cao của công ty nhân dịp blackfriday, cảm ơn #tinohost
Dịch vụ rất tốt, nhân viên tận tình.
Hỗ trợ nhiệt tình nhất trong các nhà cung cấp mih từng dùng. Không những server mạnh, ưu đãi có 1 không 2 mà còn nhiều plugin pro bản quyền đính kèm nữa. Quyết định gắn bó "Lifetime" với tino 😁
Dịch vụ tốt hỗ trợ nhanh chóng
Thích cách tư vấn tận tình và nhanh gọn của Tino mỗi khi có vấn đề trục trặc. Hosting ổn định, giá rẻ tốt lắm nhé mọi người
mình có mua 2 tên msiền của tino, mình rât thích cách tư vấn và chăm sóc khách hàng tại đây. Ngoài ra giá domain khá rẻ, phù hợp cho mọi người. 5 sao
Dịch vụ tốt, support nhiệt tình
tinohost tuyệt vời giá cả hợp lý
domain mua rất rẻ :))))
tốt, chất lượng, hostingok
Hosting tốt, giá cả cạnh tranh
Tuyệt vời , Hosting quá ổn
Chất lượng lắm ạ. Domain mua rẻ nhất thị trường
Dịch vụ tốt và chất lượng
Chất lượng lắm ạ. Domain mua rẻ nhất thị trường
Tino Host dùng quá ngon đi !💥💥💥💥💥
Tôi đã mua domain và hosting của các nhà cung cấp khác rồi, nhưng thực sự thấy không tốt bằng Tino, ngoài ra còn hỗ trợ rất tốt. Cảm ơn tino nhiều!
Next Reviews
CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO
Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Center, Số 72 Lê Thánh Tôn,  Phường Bến Nghé, Q. 1, TP. Hồ Chí Minh

Văn phòng kinh doanh: Số 42 Trần Phú, Phường 4, Quận 5, TP HCM
GPKD số 0315679836 do Sở KH và ĐT TP Hồ Chí Minh cấp
Hotline: 0364 333 333
Góp ý/Phản ánh dịch vụ: 0933 000 886