SVG dành cho các Nhà thiết kế Web trong 60 giây
() translation by (you can also view the original English article)
Các hình ảnh bitmap như JPEG, GIF và PNG đều trông rất xấu xí khi bạn kéo giãn chúng, vì vậy nếu bạn muốn duy trì chất lượng ảnh ở kích thước lớn, bạn phải tăng kích thước của tập tin. Tuy nhiên, hình ảnh SVG (viết tắt của Scalable Vector Graphics) trông không khác nhau, bất kể kích thước chúng được co giãn như thế nào và chúng giữ nguyên kích thước tập tin.
Hãy cùng tìm hiểu SVG dành cho thiết kế web, trong sáu mươi giây!
Hiểu về SVG cho Thiết kế Web

SVG có thể được sử dụng thông qua CSS dưới dạng background, hoặc bạn có thể đặt chúng trong nội dung dưới dạng hình ảnh thông thường. Bạn có thể tạo ra các biểu tượng và logo trông hoàn hảo dưới bất kỳ kích thước nào, chúng có thể được hoạt hình và biến đổi hình dạng, và bạn có thể áp dụng bộ lọc và hiệu ứng tuyệt vời cho chúng (hãy xem bản demo bộ lọc SVG của Lucas Bebber bên dưới). Bạn thậm chí có thể kiểm soát màu của chúng bằng CSS.
Bên trong một tập tin SVG chỉ là code XML có thể đọc, có thể chỉnh sửa. Và văn bản trong SVG là văn bản bình thường, có thể lập chỉ mục, thân thiện với công cụ tìm kiếm.
Bạn có thể tạo ra các SVG với hầu hết các trình chỉnh sửa đồ họa vector, như Affinity Designer, Boxy SVG, Illustrator, Gravit Designer hoặc Inkscape. Chỉ cần tạo hình ảnh của bạn, xuất nó ra dưới dạng SVG, và nó đã sẵn sàng để sử dụng trong các trang web của bạn. Đó là SVG cho thiết kế web, trong sáu mươi giây!
Thêm các tài nguyên SVG hữu ích
- VectorCác ứng dụng thay thế của Adobe: Các ứng dụng VectorKezz Bracey
- Affinity DesignerCác cập nhật mới cho Khóa học "Bắt đầu Nhanh với Affinity Designer"Andrew Blackman
- SVGSVG Brilliance: 10 ví dụ cảm hứng từ khắp nơi trên WebDennis Gaebel
- SVGTập tin SVG: Từ Illustrator cho đến WebIan Yates