SVG có thể được sử dụng trong HTML không?

Việc áp dụng và điều chỉnh SVG chắc chắn là một trong những điều tôi thích nhất xảy ra với cộng đồng thiết kế và nhà phát triển trong những năm gần đây

Với tư cách là một nhà thiết kế, họ là liều thuốc giảm đau cho nhiều người luôn đau đầu trong quá trình bàn giao phát triển

Hôm nay tôi sẽ xem SVG là gì và tại sao bạn nên bắt đầu sử dụng chúng cũng như cách bắt đầu ngay cả khi bản thân bạn không phải là nhà thiết kế

Và trong trường hợp bạn muốn đi thẳng vào nội dung tốt, đây là những lý do chính tại sao bạn nên sử dụng SVG nếu bạn chưa sử dụng

7 lý do tại sao bạn nên sử dụng đồ họa vector có thể mở rộng

1. Các SVG có thể mở rộng và sẽ hiển thị pixel hoàn hảo ở bất kỳ độ phân giải nào trong khi JPEG, PNG và GIF sẽ không
2. SVG là hình ảnh vector và do đó thường có kích thước tệp nhỏ hơn nhiều so với hình ảnh dựa trên bitmap
3. Các SVG được nhúng có thể được tạo kiểu bằng CSS
4. Chúng thân thiện với SEO cho phép bạn thêm từ khóa, mô tả và liên kết trực tiếp vào phần đánh dấu
5. Các SVG có thể được nhúng vào HTML, điều đó có nghĩa là chúng có thể được lưu vào bộ đệm, được chỉnh sửa trực tiếp bằng CSS và được lập chỉ mục để có khả năng truy cập cao hơn
6. Họ là bằng chứng trong tương lai. Các SVG có thể được thu nhỏ vô thời hạn, nghĩa là chúng sẽ luôn hiển thị ở mức hoàn hảo pixel trên các công nghệ hiển thị mới hơn, chẳng hạn như 8K trở lên
7. Các SVG có thể được tạo hoạt ảnh trực tiếp hoặc bằng cách sử dụng CSS hoặc JavaScript, giúp các nhà thiết kế web dễ dàng thêm tính tương tác vào trang web

SVG là gì và SVG được sử dụng để làm gì?

Hãy để kỹ thuật trong một giây. SVG là viết tắt của “Scalable Vector Graphics” và là một định dạng hình ảnh vector, dựa trên XML

Hình ảnh SVG chủ yếu được tìm thấy trên web và mặc dù chúng có cách sử dụng tương đương với các loại hình ảnh JPEG, PNG và WebP, nhưng DNA của chúng lại cực kỳ khác biệt

Ở dạng đơn giản nhất, đây là hình thức của một tệp SVG dưới mui xe

Tệp SVG đó sẽ hiển thị hình vuông màu xanh, rộng 250 pixel

Vậy SVG khác nhau như thế nào?

Chà, các loại hình ảnh truyền thống như JPEG, PNG và GIF dựa trên bitmap (hoặc dựa trên raster), nghĩa là chúng bao gồm một lượng pixel nhất định. Thông thường, điều này có nghĩa là ngay khi bạn bắt đầu tăng hoặc giảm một hình ảnh thuộc loại này, bạn sẽ thấy các đường răng cưa, hiện vật mờ và một mớ hỗn độn pixel.

Chúng tôi cũng có loại hình ảnh mới hơn của WebP, do Google phát triển nhằm mục đích thay thế hoàn toàn các định dạng tệp JPEG, PNG và GIF như một giải pháp linh hoạt hơn. Tôi cảm thấy như thể việc thảo luận về WebP sẽ khiến bài viết này trở nên khó hiểu hơn là hữu ích vì đây hoàn toàn là một chủ đề khác mà tôi rất sẵn lòng xem xét trong một bài viết khác

Nói tóm lại, loại hình ảnh WebP được tạo ra để tạo ra các kích thước tệp nhỏ hơn nhiều và loại bỏ nhu cầu sử dụng các loại hình ảnh khác nhau trên web. Nó hiện không được Safari hỗ trợ và vẫn chưa đạt được lực kéo đáng kể trên web

Bạn có thể tìm hiểu thêm về WebP qua trang web Google Developers hoặc đọc bài viết này của Ian Jones của chúng tôi, thảo luận chi tiết hơn về nén WebP cũng như cách cung cấp hình ảnh WebP bằng WP Offload Media

Phải, trở lại đường đua…

Vậy định dạng SVG khác với hình ảnh dựa trên bitmap như thế nào? . Thay vì bao gồm các pixel, hình ảnh SVG bao gồm các hình dạng. Điều này có nghĩa là chúng có thể mở rộng quy mô vô thời hạn mà không làm giảm chất lượng. Huyền diệu

Được rồi, vậy là đủ về những gì họ đang có. Tại sao chúng ta nên sử dụng chúng?

Ưu điểm tuyệt vời của SVG

Pixel-Perfect Scaling

Tôi đã giải thích chi tiết về điều này, nhưng chúng ta nên nhanh chóng suy nghĩ về lợi thế lớn nhất có lẽ là sử dụng SVG so với hình ảnh PNG hoặc JPEG

Đồ họa SVG sẽ mở rộng vô tận và sẽ vẫn siêu sắc nét ở mọi độ phân giải

Thức ăn cho suy nghĩ. Bất chấp thực tế này, các SVG nhỏ chứa một ít chi tiết, chẳng hạn như biểu tượng trên thanh điều hướng, có thể trông không phù hợp hoặc quá đơn giản nếu được phóng to để sử dụng trên biểu ngữ cửa hàng hoặc bảng quảng cáo. Mỗi trường hợp đều khác nhau, nhưng bối cảnh và con mắt tinh tường là rất quan trọng khi quyết định có nên mở rộng quy mô SVG hay không

Kích thước tệp nhỏ hơn

Đây là một lợi thế đáng kể khác. Do tính chất của hình ảnh vector, dữ liệu xác định kích thước tệp là các lớp, hiệu ứng, mặt nạ, màu sắc và độ dốc được sử dụng

Để so sánh, hình ảnh dựa trên bitmap ghi lại từng pixel trong hình ảnh cũng như số lượng màu được sử dụng. Phải thừa nhận rằng, nó phức tạp hơn thế một chút, nhưng điều cần rút ra từ điều này là phần lớn, một tệp hình ảnh dựa trên bitmap sẽ đắt hơn so với đối tác SVG

Trên hết, bạn có thể giảm thiểu kích thước tệp SVG của mình bằng cách nén chúng bằng gzip. Điều này có nghĩa là cần gửi ít byte hơn từ máy chủ hoặc CDN nếu tính năng nén gzip được bật

Bạn có thể tạo kiểu SVG bằng CSS

Đúng rồi. Và điều này có nghĩa là bạn không cần phải biết cách sử dụng bất kỳ phần mềm thiết kế nào để thực hiện một sửa đổi nhỏ như thay đổi màu sắc. Trên thực tế, nếu bạn đã thực hiện bất kỳ loại thiết kế web hoặc phát triển giao diện người dùng nào, bạn sẽ không gặp khó khăn gì khi thêm độ dốc vào hình dạng hoặc tăng độ dày của nét vẽ.

Thân thiện với SEO

Như tôi đã chỉ ra ở phần đầu của bài đăng này, các SVG dựa trên XML biểu thị rằng các từ khóa, mô tả và liên kết có thể được đưa vào để làm cho nội dung dễ nhận biết hơn đối với các công cụ tìm kiếm và cải thiện khả năng truy cập tổng thể

Với các hình ảnh dựa trên bitmap, bạn chỉ có các thuộc tính “tiêu đề” và “alt” tùy ý sử dụng cho SEO

SVG có thể được nhúng vào HTML

Không giống như các loại hình ảnh khác phải được tải xuống từ máy chủ dưới dạng tài nguyên bên ngoài, SVG có thể được nhúng vào mã HTML. Vậy tại sao điều này lại thuận lợi?

Điều đó có nghĩa là chúng có thể được tìm kiếm và lập chỉ mục, điều này rất tốt cho khả năng truy cập. Bạn cũng có thể sửa đổi kiểu dáng của SVG đó bằng CSS. Ngoài ra, nếu bạn đang lưu vào bộ đệm các trang HTML của mình thì điều này có nghĩa là các SVG được nhúng cũng sẽ tự động được lưu vào bộ đệm

SVG là bằng chứng trong tương lai

Tôi nghĩ rằng đây là điều bị bỏ qua đáng kể, đặc biệt khi nói đến khả năng mở rộng. Tôi nhớ một thời gian trước SVG khi mật độ điểm ảnh là một chủ đề nóng trong cộng đồng thiết kế khi điện thoại di động và máy tính bảng mới xuất hiện với màn hình phong phú đẹp mắt

tất cả đều tuyệt vời. Nhưng điều đó có nghĩa là hầu hết các hình ảnh JPEG hoặc PNG được sử dụng trên các trang web không còn có độ phân giải đủ cao nữa và trông giống như rác trên các thiết bị cầm tay

Giải pháp? . Bây giờ hình ảnh trông đẹp và sắc nét trên iPhone mới nhất

Nếu bạn nhạy cảm, bạn cũng đã phát hiện trước độ phân giải của người dùng và chỉ cung cấp hình ảnh “@2x” nếu được yêu cầu vì làm như vậy sẽ tốn kém hơn về kích thước tệp

Tôi đang lạc đề, nhưng các màn hình mới hơn với mật độ điểm ảnh cao hơn đang khiến cả nhà thiết kế và nhà phát triển thêm đau đầu. Bản chất của SVG có nghĩa là điều này không còn tạo ra sự phức tạp khi các thiết bị cao cấp đạt độ phân giải từ 8K trở lên

Chúng có thể hoạt hình

Đây là nơi SVG thực sự nổi trội. Có khả năng chỉnh sửa SVG trực tiếp bằng trình soạn thảo văn bản có nghĩa là chúng có thể được tạo hoạt ảnh, giúp việc đưa một số tương tác vào trang web của bạn trở nên cực kỳ dễ dàng. Những hình ảnh động này có thể đơn giản hoặc phức tạp như bạn muốn. Tương tự như HTML, SVG cũng được đại diện bởi DOM (mô hình đối tượng tài liệu) có nghĩa là chúng cũng có thể được thao tác bằng JavaScript

Nếu bạn quan tâm đến việc tạo hoạt ảnh SVG, tôi đã đề cập đến chủ đề này trong một bài viết khác cùng với hướng dẫn về cách sử dụng khung hoạt hình Lottie phổ biến của Airbnb để đưa SVG của bạn vào cuộc sống

Đây là một hình ảnh động ví dụ mà tôi đã tạo cho bài viết cụ thể đó dựa trên thương hiệu của chúng tôi cho WP Migrate DB Pro

Xem Pen MDB Bird Animation của Deliciousbrains (@deliciousbrains) trên CodePen

Phần tốt nhất?

Nhược điểm của SVG

Không có gì là hoàn hảo. Và có một số trường hợp bạn nên chọn hình ảnh raster thay vì SVG

Hình ảnh phức tạp

Nếu bạn đang xử lý các bức ảnh, thì chắc chắn bạn nên chọn một hình ảnh dựa trên bitmap. Không có nhiều trường hợp, nếu có, mà bạn sẽ bắt gặp một bức ảnh SVG, vì vậy rất có thể bạn sẽ phải đưa ra quyết định này

Tương tự, có một số trường hợp trong đó một SVG phức tạp chứa quá nhiều hình dạng, màu sắc, độ dốc và mặt nạ đến mức nó thực sự bắt đầu vượt trội so với một tệp JPEG hoặc PNG tương đương về kích thước tệp. Tôi đã không gặp phải điều này quá thường xuyên, nhưng đó là một khả năng nhất định

Nếu bạn cần sử dụng hình ảnh bitmap, hãy nhớ sử dụng PNG nếu hình ảnh của bạn có độ trong suốt, JPEG nếu không. Hình ảnh JPEG không hỗ trợ độ trong suốt và do đó phù hợp hơn với ảnh chụp. Ngoài ra, như đã thảo luận ngắn gọn ở đầu bài viết này, bạn có thể đơn giản hóa những điều trên bằng cách sử dụng WebP cho tất cả các hình ảnh dựa trên bitmap

Tối ưu hóa

Điều này phụ thuộc vào một số TLC khi tạo SVG trong một ứng dụng thiết kế như Adobe Illustrator hoặc Inkscape. Các thư mục nhóm trống và các lớp dư thừa, không sử dụng có thể nối thêm rác không cần thiết vào kích thước tệp tổng thể. Ngoài ra, các SVG cũ hơn thường chứa rất nhiều rác trong đánh dấu và đắt hơn đáng kể so với mức cần thiết. Tôi chạy tất cả các SVG của mình thông qua một công cụ khai thác khi tôi xuất trong quá trình thiết kế để tránh những rắc rối như vậy

Có một số công cụ tối ưu hóa bao gồm một Node. js để tối ưu hóa tệp SVG. Và xin cảm ơn Jordan, người đã chia sẻ giải pháp không có nút này có tên là SVGOMG trong các nhận xét

Các SVG có thể lớn hơn rất nhiều so với PNG đối tác nếu không được tạo hoặc tối ưu hóa theo đúng cách. Nhưng thông thường thì dung lượng file sẽ nhỏ hơn. Đừng lo lắng nếu bạn gặp phải một SVG riêng lẻ có kích thước tệp gấp đôi kích thước tệp tương đương PNG

Hỗ trợ trình duyệt

Đây không phải là một vấn đề quá lớn như trước đây. Tuy nhiên, nếu vì lý do nào đó bạn chống lại Chrome hoặc Firefox hoặc cần hỗ trợ các trình duyệt web siêu lỗi thời như Internet Explorer, thì bạn có thể gặp phải một số vấn đề về khả năng tương thích với SVG

Điều đó đang được nói, bạn vẫn có thể sử dụng SVG và tránh sự phức tạp này bằng cách triển khai các dự phòng JPEG hoặc PNG dưới dạng dự phòng

Các biểu tượng SVG là bạn của bạn

Các biểu tượng là nơi tất cả các ưu điểm của định dạng tệp này thực sự trở nên rõ ràng. Không còn yêu cầu nhiều biểu tượng với nhiều màu sắc và kích cỡ, giúp đơn giản hóa quá trình thiết kế và phát triển. Để nói rõ hơn về điều này, tôi muốn xem lại cuộc sống từng như thế nào trước khi SVG xuất hiện…

Một sự nhìn lại và hồi tưởng về quá khứ

Trước khi có SVG, các biểu tượng thực sự là một nỗi đau đối với cả nhà thiết kế và nhà phát triển. Thông thường, một sản phẩm sẽ có hơn 20 biểu tượng và mỗi biểu tượng sẽ yêu cầu trạng thái hoạt động (thường là màu chính), trạng thái không hoạt động/tắt và đôi khi cũng có các trạng thái bổ sung (chẳng hạn như trạng thái di chuột)

Như đã thảo luận trước đây, hình ảnh bitmap không thể chỉnh sửa bằng CSS nên mỗi trạng thái biểu tượng yêu cầu tệp riêng của nó

Tôi cũng đã đề cập rằng khi màn hình có mật độ điểm ảnh cao hơn trở thành một thứ, chúng tôi cũng phải tạo phiên bản “@2x” và “@3x” cho nội dung hình ảnh của mình để hiển thị có độ phân giải cao hơn

Tôi không có ý định làm bất cứ điều gì thiết thực với thông tin này, nhưng trong khi viết phần này, tôi đã quyết định kiểm tra kích thước tệp mà tôi có thể khôi phục bằng cách sử dụng bộ biểu tượng SVG trên các phiên bản bitmap

Tôi có biểu tượng SVG trái tim từ Thiết kế Vật liệu mà tôi yêu cầu với 3 màu khác nhau. Đây là trạng thái hoạt động, trạng thái không hoạt động và trạng thái bị vô hiệu hóa

Sử dụng trạng thái hoạt động của biểu tượng của chúng tôi, chúng tôi cũng có thể tạo 2 trạng thái biểu tượng khác bằng cách điều chỉnh kiểu dáng CSS. Vì vậy, chúng tôi chỉ cần một tệp SVG để tạo cả 3 biểu tượng

Để tạo các phiên bản bitmap của các biểu tượng này, chúng tôi sẽ cần một tệp độc lập cho từng trạng thái biểu tượng

Ngoài ra, để đảm bảo các phiên bản bitmap trông sắc nét trên tất cả các loại thiết bị, chúng tôi cần tạo một tập hợp các biểu tượng này với kích thước gấp đôi và gấp ba kích thước của độ phân giải cơ sở (“tương ứng là @2x” và “@3x”)

Điều đó để lại cho chúng tôi 9 biểu tượng PNG để quản lý thay vì một tệp SVG duy nhất mà chúng tôi có thể sử dụng để đạt được kết quả giống hệt nhau

SVG lên tới một kilobyte trong khi tất cả các biểu tượng PNG tính toán tới 29KB

Chắc chắn rồi, 29KB nghe có vẻ không đáng kể, nhưng điều này liên quan đến một biểu tượng duy nhất. Nếu chúng tôi có 30 biểu tượng để sử dụng, sự khác biệt về kích thước tệp sẽ trở nên phức tạp hơn…

SVG. 1KB * 30 = 30KB

PNG. 29KB * 30 = 870KB

Đó là mức tăng 2900% so với SVG đơn lẻ. Tất nhiên, đây là những mức trung bình, nhưng dù sao đó cũng là một sự gia tăng đáng kể về quy mô

Tôi hy vọng điều này đã chứng minh việc sử dụng và quản lý các SVG đơn giản hơn nhiều như thế nào, đặc biệt là với các bộ biểu tượng

Từ kinh nghiệm, bạn thường có thể mong đợi giảm ít nhất 50% kích thước tệp tổng thể khi chọn biểu tượng SVG thay vì PNG. Đặc biệt nếu bạn đang tối ưu hóa các biểu tượng SVG của mình và muốn chúng hiển thị hoàn hảo trên bất kỳ loại độ phân giải hoặc màn hình nào

Sinh vật SVG

Chúng tôi sử dụng toàn bộ SVG trên cả hai bộ não ngon. com và spinupwp. com và đã sử dụng quy trình làm việc SVG gọn gàng để tạo sprite từ một thư mục tệp SVG, chỉ có thể tải một lần khi tải trang, thay vì yêu cầu HTTP cho mỗi tệp SVG. Chúng tôi sử dụng tác vụ Gulp này như một phần của tác vụ xây dựng tài sản của mình để tập hợp tất cả các SVG vào một thư mục, loại bỏ chúng khỏi các hành trình không cần thiết và tạo một SVG lớn trong tệp PHP, với mỗi SVG riêng lẻ là một

gulp.task( 'svg', function() {
    return gulp.src( 'assets/svg/*.svg' )
        .pipe( svgmin( {
            plugins: [
                { removeViewBox: false },
                { removeUselessStrokeAndFill: true },
                { removeEmptyAttrs: false },
                { removeUnknownsAndDefaults: false },
                { cleanupIDs: false },
                { removeUselessStrokeAndFill: true }
            ]
        } ) )
    .pipe( rename( { prefix: 'icon-' } ) )
    .pipe( svgstore( { inlineSvg: true } ) )
    .pipe( rename( 'svgs.php' ) )
    .pipe( gulp.dest( 'template-parts' ) );
} );

Sau đó, chúng tôi bao gồm tệp svgs.php mà tác vụ này xuất ra ở đầu thẻ trong chủ đề của chúng tôi

add_action( ‘wp_body_open’, function() { get_template_part( ‘template-parts/svgs’ ); });

Và ẩn SVG khổng lồ bằng CSS, để nó ẩn hoàn toàn cho đến khi được gọi vào hoạt động

body > svg {
    display: none;
}

Bây giờ đến phần thú vị. Ví dụ: chúng tôi có biểu trưng dưới dạng SVG là /assets/svgs/logo.svg được đính kèm với sprite là , vì vậy để hiển thị biểu trưng, ​​chúng ta chỉ cần thêm biểu trưng này vào HTML trong các tệp mẫu của chủ đề

Nó khá tuyệt vời

Nơi nhận các biểu tượng SVG miễn phí

Dưới đây là một số nguồn khác nhau mà tôi sử dụng để có được các SVG và bộ biểu tượng. Một số yêu cầu bạn ghi công tác giả tùy thuộc vào cách biểu tượng được sử dụng, vì vậy hãy lưu ý điều đó

Flaticon Thiết Kế Vật Liệu Biểu Tượng Biểu Tượng8 FreeIcons IconStore

Tóm tắt lại

Hy vọng rằng đến thời điểm này, tôi đã trình bày bằng chứng đáng kể về lý do tại sao bạn nên nghĩ đến việc sử dụng loại tệp SVG nếu bạn chưa. Chúng dễ quản lý hơn, sẽ cải thiện tốc độ tải trang web của bạn và không yêu cầu cập nhật mỗi khi màn hình có độ phân giải mới xuất hiện trên thị trường với PPI (pixel trên inch) cao hơn

Ngoài ra, bạn có thể tạo hiệu ứng động và thực hiện các sửa đổi đối với kiểu dáng SVG của mình mà không cần hoặc không biết cách sử dụng ứng dụng thiết kế như Photoshop hoặc Sketch (Hoặc CorelDRAW nếu bạn là một OG vector)

Bạn có bất kỳ mẹo hoặc cách sử dụng thú vị nào khác cho SVG mà bạn muốn chia sẻ không?

Mục nhập này đã được đăng trong WP Migrate DB Pro, Side Hustle và được gắn thẻ Phát triển, svg, lợi thế, nhà phát triển, biểu tượng, có thể mở rộng, vector, đồ họa, jpeg, png, bitmap

Giới thiệu về tác giả

Lewis Warren

Lewis là Nhà thiết kế sản phẩm đến từ London, yêu cà phê và không thích ảnh bitmap. Từ trang web đến trò chơi di động, Lewis có nhiều năm kinh nghiệm đại lý làm việc trên tất cả các loại sản phẩm

@pixels4lyf lewiswarren. đồng. vương quốc anh