File SVG trong tứng dụng thực tế về đồ họa

SVG là gì? ứng dụng file SVG vào thiết kế đồ họa và lập trình website

SVG là viết tắt của Scalable Vector Graphics. Về cơ bản, nó là một định dạng hình ảnh vector có thể phóng to, thu nhỏ đến một kích thước bất kỳ mà không mất đi sự rõ ràng, dịch sang ngôn ngữ đánh dấu XML dễ dàng làm cho các trình duyệt để đọc và hiển thị trên màn hình.

Ưu điểm của SVG là gì?

  • Kích thước file nhỏ mà nén tốt

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.

  • Trông rất tuyệt trên màn hình retina

SVGs như 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 @ 2x Retina phiên bản cho logo hình ảnh của bạn.

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

Sử dụng thẻ svg để nhúng các hình ảnh trên trang web của chúng tôi cho phép chúng tôi để định dạng một cách dễ dàng thông qua CSS, giống như cách chúng tôi làm với thẻ HTML thông thường. Chúng tôi có thể thay đổi thuộc tính đối tượng như màu nền, độ mờ đục, vị trí, chiều rộng, vv Ngoài ra, chúng ta 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, SVGs cuối cùng đã đến. Chúng được hỗ trợ trong tất cả các trình duyệt hiện đại bao gồm IE9 (nguồn: caniuse.com). 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!

Một ưu điểm của SVG là tất cả mọi element và attribute của các element đó đều có thể animate.

Ví dụ một file SVG để vẽ hình tròn:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
Ảnh bitmap bể tè le hột me
Hình ảnh dạng SVG cho chất lượng nét hơn trên các màn hình khác nhau

Hình ảnh vector có thể hiển thị tốt trên bất kì kích thước/độ phân giải nào (vì thế nên các bác designer thích dùng các phần mềm như Corel, Illustrator khi thiết kế các banner quảng cáo/in ấn,…)

Ứng dụng file SVG trong thiếu kế lập trình website

Dùng thông qua thẻ IMGHoặc bạn có thể dùng qua thẻ IMG như một hình ảnh bình thường.

<img src="kipalog.svg" />

Dùng trong CSS

Hoặc có thể dùng trong CSS như sau:

<div class="icon-facebook"></div>
.icon-facebook {
  background-image: url("facebook.svg");
  ...
}

Tư vấn thiết kế thương hiệu

Nhận tư vấn 1:1 với chuyên gia thương hiệu của chúng tôi
Hotline: 0912 485 468 info@iptime.com.vn






    Bài viết liên quan

    Tin tức kiến thức ngành tư vấn thiết kế thương hiệu mới nhất

    Profile chuyên nghiệp, giúp doanh nghiệp nâng tầm thương hiệu

    Profile là một ấn phẩm quan trọng của doanh nghiệp, giúp giới thiệu tổng quan về doanh nghiệp,...

    Cẩm nang thiết kế Tin tức

    Lịch ảnh Áo dài tôn vinh vẻ đẹp rạng ngời của phụ nữ và cảnh trí Việt Nam

    Đã 4 năm liền, Nguyễn Thạch Thảo ra bộ hình lịch Áo Dài Thảo Nữ Top 10 Miss...

    Tin tức

    Bất ngờ về cái tên Google không phải ai cũng biết

    Google là một công ty Internet có trụ sở tại Hoa Kỳ, được thành lập vào năm 1998. Ý...

    Tin tức

    Top 100 Hình Ảnh Tết 2018 Độc Nhất Vô Nhị

    Chúc Tết ngày xuân nó không chỉ đơn thuần là dành tặng cho nhau những câu chúc với...

    Tin tức Tin tức kiến thức ngành tư vấn thiết kế thương hiệu mới nhất

    Brochure là gì? – 22 mẫu thiết kế brochure ấn tượng

    Đây là bài viết đầu tiên mà Việt Designer giới thiệu về thiết kế brochure, đây cũng là...

    Tin tức kiến thức ngành tư vấn thiết kế thương hiệu mới nhất

    Thi công lắp đặt bảng biển hiệu công ty

    Bảng hiệu biển hiệu công ty hay cách gọi đơn giản là biển tên công ty thường được...

    Cẩm nang thiết kế Tin tức

    Thiết kế card visit cho VIP đẳng cấp

    Những mẫu thiết kế card thông thường, phổ biến sẽ được các nhân viên, những người không có...

    Tin tức

    Sáng 4/6, Việt Nam có thêm 52 bệnh nhân Covid-19

    Theo bản tin sáng 4/6 của Bộ Y tế, 52 ca mắc mới được ghi nhận tại Bắc...

    Tin tức kiến thức ngành tư vấn thiết kế thương hiệu mới nhất

    3 nguyên tắc cốt lõi khi thiết kế Profile chuyên nghiệp

    Một bản thiết kế Profile chuyên nghiệp là một công cụ quan trọng giúp doanh nghiệp tạo dựng...

    0912485468
    Liên hệ kinh doanh