6 lỗi SVG phổ biến (và cách khắc phục chúng)

Gần đây, có người đã hỏi tôi cách tiếp cận gỡ lỗi SVG nội tuyến. Bởi vì nó là một phần của DOM, chúng tôi có thể kiểm tra bất kỳ SVG nội tuyến nào trong bất kỳ DevTools của trình duyệt nào. Và do đó, chúng tôi có khả năng mở rộng phạm vi mọi thứ và phát hiện ra bất kỳ vấn đề hoặc cơ hội tiềm ẩn nào để tối ưu hóa SVG.

Nhưng đôi khi, chúng tôi thậm chí không thể nhìn thấy các SVG của mình. Trong những trường hợp đó, có sáu điều cụ thể mà tôi tìm kiếm khi gỡ lỗi.

1. Các viewBox giá trị

Sản phẩm viewBox là một điểm nhầm lẫn phổ biến khi làm việc với SVG. Về mặt kỹ thuật, việc sử dụng SVG nội tuyến mà không có nó vẫn ổn, nhưng chúng ta sẽ mất đi một trong những lợi ích quan trọng nhất của nó: mở rộng quy mô với vùng chứa. Đồng thời, nó có thể hoạt động chống lại chúng tôi khi được định cấu hình không đúng cách, dẫn đến việc cắt xén không mong muốn.

Các phần tử ở đó khi chúng được cắt bớt — chúng chỉ nằm trong một phần của hệ tọa độ mà chúng ta không nhìn thấy. Nếu chúng ta mở tệp trong một số chương trình chỉnh sửa đồ họa, nó có thể trông như thế này:

Cách dễ nhất để khắc phục điều này? Thêm vào overflow="visible" đến SVG, cho dù đó là trong biểu định kiểu của chúng tôi, nội tuyến trên style thuộc tính hoặc trực tiếp dưới dạng thuộc tính trình bày SVG. Nhưng nếu chúng ta cũng áp dụng một background-color với SVG hoặc nếu chúng ta có các yếu tố khác xung quanh nó, mọi thứ có thể hơi khác một chút. Trong trường hợp này, tùy chọn tốt nhất sẽ là chỉnh sửa viewBox để hiển thị một phần của hệ tọa độ đã bị ẩn:

Có một vài điều bổ sung về viewBox đáng để trình bày khi chúng ta đang nói về chủ đề này:

Làm thế nào để viewBox làm việc?

SVG là một canvas vô hạn, nhưng chúng ta có thể kiểm soát những gì chúng ta nhìn thấy và cách chúng ta nhìn thấy nó thông qua chế độ xem và viewBox.

Sản phẩm khung nhìn là một khung cửa sổ trên canvas vô hạn. kích thước của nó được xác định bởi width và height các thuộc tính hoặc trong CSS với các thuộc tính tương ứng width và height của cải. Chúng tôi có thể chỉ định bất kỳ đơn vị độ dài nào mà chúng tôi muốn, nhưng nếu chúng tôi cung cấp các số không có đơn vị, chúng sẽ mặc định là pixel.

Sản phẩm viewBox được xác định bởi bốn giá trị. Hai cái đầu tiên là điểm bắt đầu ở góc trên bên trái (x và y giá trị, cho phép số âm). Tôi đang chỉnh sửa những thứ này để sắp xếp lại hình ảnh. Hai giá trị cuối cùng là chiều rộng và chiều cao của hệ tọa độ bên trong khung nhìn — đây là nơi chúng ta có thể chỉnh sửa tỷ lệ của lưới (mà chúng ta sẽ đề cập trong phần trên Phóng to).

Đây là đánh dấu đơn giản hóa hiển thị SVG viewBox và width và height cả hai thuộc tính được đặt trên <svg>:

<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>

sắp xếp lại

Vì vậy, điều này:

<svg viewBox="0 0 700 700">

… ánh xạ tới đây:

<svg viewBox="start-x-axis start-y-axis width height">

Khung nhìn chúng ta thấy bắt đầu từ đâu 0 trên trục x và 0 trên trục y đáp ứng.

Bằng cách thay đổi điều này:

<svg viewBox="0 0 700 700">

… Đến đây:

<svg viewBox="300 200 700 700">

…chiều rộng và chiều cao vẫn giữ nguyên (700 mỗi đơn vị), nhưng điểm bắt đầu của hệ tọa độ bây giờ là tại 300 điểm trên trục x và 200 trên trục y.

Trong video sau đây tôi đang thêm một màu đỏ <circle> đến SVG với trung tâm của nó tại 300 điểm trên trục x và 200 trên trục y. Lưu ý cách thay đổi viewBox tọa độ thành cùng một giá trị cũng thay đổi vị trí của vòng tròn thành góc trên bên trái của khung trong khi kích thước được hiển thị của SVG vẫn giữ nguyên (700×700). Tất cả những gì tôi làm là “điều chỉnh lại” mọi thứ với viewBox.

Phóng to

Chúng ta có thể thay đổi hai giá trị cuối cùng bên trong viewBox để phóng to hoặc thu nhỏ hình ảnh. Các giá trị càng lớn, càng có nhiều đơn vị SVG được thêm vào để vừa với khung nhìn, dẫn đến hình ảnh nhỏ hơn. Nếu chúng tôi muốn giữ tỷ lệ 1:1, viewBox chiều rộng và chiều cao phải khớp với các giá trị chiều rộng và chiều cao của chế độ xem của chúng tôi.

Hãy xem điều gì xảy ra trong Illustrator khi chúng ta thay đổi các tham số này. bảng vẽ là viewport được biểu thị bằng một hình vuông 700px màu trắng. Mọi thứ khác bên ngoài khu vực đó là canvas SVG vô hạn của chúng tôi và được cắt bớt theo mặc định.

Hình 1 dưới đây cho thấy một dấu chấm màu xanh ở 900 dọc theo trục x và 900 dọc theo trục y. Nếu tôi thay đổi hai cái cuối cùng viewBox giá trị từ 700 đến 900 như thế này:

<svg viewBox="300 200 900 900" width="700" height="700">

…sau đó chấm màu xanh lam gần như hoàn toàn xuất hiện trở lại, như thể hiện trong Hình 2 bên dưới. Hình ảnh của chúng tôi được thu nhỏ lại vì chúng tôi đã tăng các giá trị của viewBox, nhưng kích thước chiều rộng và chiều cao thực tế của SVG vẫn giữ nguyên và chấm màu xanh lam quay trở lại gần khu vực chưa cắt.

Có một hình vuông màu hồng làm bằng chứng về cách lưới tỷ lệ để phù hợp với khung nhìn: đơn vị nhỏ hơn và nhiều đường lưới hơn phù hợp với cùng một khu vực khung nhìn. Bạn có thể thử với các giá trị tương tự trong Bút sau để xem nó hoạt động như thế nào:

2. Mất tích width và height

Một điều phổ biến khác mà tôi xem xét khi gỡ lỗi SVG nội tuyến là liệu phần đánh dấu có chứa width or height thuộc tính. Đây không phải là vấn đề lớn trong nhiều trường hợp trừ khi SVG nằm trong vùng chứa có định vị tuyệt đối hoặc vùng chứa linh hoạt (vì Safari tính SVG width giá trị với 0px thay vì auto). loại trừ width or height trong những trường hợp này ngăn chúng ta nhìn thấy hình ảnh đầy đủ, như chúng ta có thể thấy bằng cách mở bản demo CodePen này và so sánh nó trong Chrome, Safari và Firefox (nhấn vào hình ảnh để xem lớn hơn).

Giải pháp? Thêm chiều rộng hoặc chiều cao, cho dù dưới dạng thuộc tính bản trình bày, nội tuyến trong thuộc tính kiểu hoặc trong CSS. Tránh sử dụng chiều cao một mình, đặc biệt khi nó được đặt thành 100% or auto. Một cách giải quyết khác là đặt bên phải và giá trị trái.

Bạn có thể chơi với cây bút sau và kết hợp các tùy chọn khác nhau.

3. Vô tình fill và stroke màu sắc

Cũng có thể là chúng tôi đang áp dụng màu sắc cho <svg> thẻ, cho dù đó là kiểu nội tuyến hay đến từ CSS. Điều đó tốt, nhưng có thể có các giá trị màu khác trong quá trình đánh dấu hoặc các kiểu xung đột với màu được đặt trên <svg>, khiến các bộ phận trở nên vô hình.

Đó là lý do tại sao tôi có xu hướng tìm kiếm fill và stroke các thuộc tính trong đánh dấu của SVG và xóa sạch chúng. Video sau đây hiển thị một SVG mà tôi đã tạo kiểu bằng CSS với màu đỏ fill. Có một vài trường hợp trong đó các phần của SVG được tô trực tiếp bằng màu trắng trong phần đánh dấu mà tôi đã xóa để hiển thị các phần còn thiếu.

4. Thiếu ID

Điều này có vẻ rất rõ ràng, nhưng bạn sẽ ngạc nhiên về tần suất tôi thấy nó xuất hiện. Giả sử chúng ta đã tạo một tệp SVG trong Illustrator và rất siêng năng trong việc đặt tên cho các lớp của mình để bạn có được các ID phù hợp đẹp mắt trong phần đánh dấu khi xuất tệp. Và giả sử chúng ta định tạo kiểu cho SVG đó trong CSS bằng cách nối vào các ID đó.

Đó là một cách hay để làm mọi việc. Nhưng có rất nhiều lần tôi thấy cùng một tệp SVG được xuất lần thứ hai đến cùng một vị trí và các ID khác nhau, thường là khi sao chép/dán trực tiếp các vectơ. Có thể một lớp mới đã được thêm vào hoặc một trong những lớp hiện có đã được đổi tên hay gì đó. Dù thế nào đi chăng nữa, các quy tắc CSS không còn khớp với ID trong phần đánh dấu SVG, khiến SVG hiển thị khác với mong đợi của bạn.

Trong các tệp SVG lớn, chúng tôi có thể khó tìm thấy các ID đó. Đây là thời điểm tốt để mở DevTools, kiểm tra phần đồ họa không hoạt động và xem liệu các ID đó có còn khớp hay không.

Vì vậy, tôi muốn nói rằng bạn nên mở tệp SVG đã xuất trong trình chỉnh sửa mã và so sánh nó với tệp gốc trước khi tráo đổi mọi thứ. Các ứng dụng như Illustrator, Figma và Sketch rất thông minh, nhưng điều đó không có nghĩa là chúng tôi không chịu trách nhiệm kiểm tra chúng.

5. Danh sách kiểm tra để cắt và tạo mặt nạ

Nếu một SVG bị cắt bất ngờ và viewBox kiểm tra được không, tôi thường xem CSS cho clip-path or mask thuộc tính có thể can thiệp vào hình ảnh. Thật hấp dẫn khi tiếp tục xem đánh dấu nội tuyến, nhưng thật tốt khi nhớ rằng kiểu dáng của SVG có thể xảy ra ở nơi khác.

Cắt và tạo mặt nạ CSS cho phép chúng tôi "ẩn" các phần của hình ảnh hoặc phần tử. Trong SVG, <clipPath> là một phép toán vectơ cắt các phần của hình ảnh mà không có kết quả giữa chừng. Các <mask> thẻ là một thao tác pixel cho phép các hiệu ứng trong suốt, bán trong suốt và làm mờ các cạnh.

Đây là một danh sách kiểm tra nhỏ để gỡ lỗi các trường hợp có liên quan đến cắt và tạo mặt nạ:

• Đảm bảo đường cắt (hoặc mặt nạ) và đồ họa chồng lên nhau. Các phần chồng chéo là những gì được hiển thị.
• Nếu bạn có một đường dẫn phức tạp không giao nhau với đồ họa của mình, hãy thử áp dụng các phép biến đổi cho đến khi chúng khớp nhau.
• Bạn vẫn có thể kiểm tra mã bên trong bằng DevTools mặc dù <clipPath> or <mask> không được kết xuất, vì vậy hãy sử dụng nó!
• Sao chép đánh dấu bên trong <clipPath> và <mask> và dán nó trước khi đóng </svg> nhãn. Sau đó thêm một fill với những hình dạng đó và kiểm tra tọa độ và kích thước của SVG. Nếu bạn vẫn không nhìn thấy hình ảnh, hãy thử thêm overflow="hidden" đến <svg> tag.
• Kiểm tra xem một độc đáo ID được sử dụng cho <clipPath> or <mask>và rằng cùng một ID được áp dụng cho các hình dạng hoặc nhóm hình dạng được cắt bớt hoặc tạo mặt nạ. ID không khớp sẽ phá vỡ giao diện.
• Kiểm tra lỗi chính tả trong đánh dấu giữa <clipPath> or <mask> thẻ.
• fill, stroke, opacityhoặc một số kiểu khác được áp dụng cho các phần tử bên trong <clipPath> là vô ích - phần hữu ích duy nhất là hình học vùng lấp đầy của các phần tử đó. Đó là lý do tại sao nếu bạn sử dụng một <polyline> nó sẽ hành xử như một <polygon> và nếu bạn sử dụng một <line> bạn sẽ không thấy bất kỳ hiệu ứng cắt nào.
• Nếu bạn không nhìn thấy hình ảnh của mình sau khi áp dụng <mask>, hãy chắc chắn rằng fill của nội dung mặt nạ không hoàn toàn là màu đen. Độ chói của phần tử mặt nạ xác định độ mờ của đồ họa cuối cùng. Bạn sẽ có thể nhìn xuyên qua các phần sáng hơn và các phần tối hơn sẽ ẩn nội dung hình ảnh của bạn.

Bạn có thể chơi với các phần tử được che và cắt bớt trong cái bút này.

6. Không gian tên

Bạn có biết rằng SVG là một ngôn ngữ đánh dấu dựa trên XML? Vâng, nó là! Không gian tên cho SVG được đặt trên xmlns thuộc tính:

<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>

Có rất nhiều điều cần biết về không gian tên trong XML và MDN có một phần mở đầu tuyệt vời về nó. Đủ để nói, không gian tên cung cấp ngữ cảnh cho trình duyệt, thông báo cho trình duyệt biết rằng phần đánh dấu dành riêng cho SVG. Ý tưởng là các không gian tên giúp ngăn xung đột khi có nhiều loại XML trong cùng một tệp, chẳng hạn như SVG và XHTML. Đây là sự cố ít phổ biến hơn nhiều trong các trình duyệt hiện đại nhưng có thể giúp giải thích các sự cố kết xuất SVG trong các trình duyệt cũ hơn hoặc các trình duyệt nghiêm ngặt như Gecko khi xác định các loại tài liệu và không gian tên.

Thông số SVG 2 không yêu cầu không gian tên khi sử dụng cú pháp HTML. Nhưng mà nó rất quan trọng nếu ưu tiên hỗ trợ cho các trình duyệt cũ — ngoài ra, việc thêm trình duyệt đó cũng không ảnh hưởng gì. Bằng cách đó, khi <html> nguyên tố của xmlns thuộc tính được xác định, nó sẽ không xung đột trong những trường hợp hiếm hoi đó.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px"> <!-- etc. --> </svg> </body>
</html>

Điều này cũng đúng khi sử dụng SVG nội tuyến trong CSS, chẳng hạn như đặt nó làm hình nền. Trong ví dụ sau, biểu tượng dấu kiểm xuất hiện trên đầu vào sau khi xác thực thành công. Đây là giao diện của CSS:

textarea:valid { background: white url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"> <circle cx="13" cy="13" r="13" fill="%23abedd8"/> <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/> </svg>') no-repeat 98% 5px;
}

Khi chúng tôi xóa không gian tên bên trong SVG trong thuộc tính nền, hình ảnh sẽ biến mất:

Một tiền tố không gian tên phổ biến khác là xlink:href. Chúng tôi sử dụng nó rất nhiều khi tham khảo các phần khác của SVG như: mẫu, bộ lọc, hoạt ảnh hoặc độ dốc. Khuyến nghị là bắt đầu thay thế nó bằng href vì cái kia không được dùng nữa kể từ SVG 2, nhưng có thể có vấn đề về khả năng tương thích với các trình duyệt cũ hơn. Trong trường hợp đó, chúng ta có thể sử dụng cả hai. Chỉ cần nhớ bao gồm không gian tên xmlns:xlink="http://www.w3.org/1999/xlink" nếu bạn vẫn đang sử dụng xlink:href.

Tăng cấp kỹ năng SVG của bạn!

Tôi hy vọng những mẹo này sẽ giúp bạn tiết kiệm rất nhiều thời gian nếu bạn thấy mình đang khắc phục sự cố các SVG nội tuyến được hiển thị không đúng cách. Đây chỉ là những điều tôi tìm kiếm. Có thể bạn có những lá cờ đỏ khác nhau mà bạn theo dõi - nếu vậy, hãy cho tôi biết trong phần bình luận!

Điểm mấu chốt là bạn phải có ít nhất một sự hiểu biết cơ bản về các cách khác nhau SVG có thể được sử dụng. Thử thách CodePen thường kết hợp SVG và cung cấp thông lệ tốt. Dưới đây là một số tài nguyên khác để tăng cấp:

Có một vài người tôi khuyên bạn nên theo dõi vì sự tốt đẹp liên quan đến SVG:

• Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
• Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến ​​thức. Truy cập Tại đây.
• nguồn: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/