10 quy tắc vàng để đáp ứng SVGS

Nhiều lợi thế của SVG - bao gồm hình ảnh vector vô hạn có thể mở rộng, kích thước tệp nhỏ và tích hợp trực tiếp với DOM - làm cho nó phù hợp với thiết kế web đáp ứng . Bất chấp đặc điểm kỹ thuật của SVG là một thập kỷ cũ, nó là hỗ trợ tương đối gần đây trong nhiều trình duyệt và công cụ có nghĩa là vẫn còn một số thủ thuật, sơ hở và gotchas bắt đầu thậm chí có kinh nghiệm các nhà thiết kế và nhà phát triển web.

Ở đây, tôi đã tóm tắt quan trọng nhất trong số này là 10 quy tắc vàng.

01. Thiết lập đúng công cụ của bạn

Giống như một thợ thủ công làm sắc nét các công cụ của mình trước khi bắt đầu công việc, bất kỳ ai cũng làm việc với SVG phải đặt ứng dụng của họ lên để cung cấp định dạng vector theo phương thức hiệu quả và tối ưu hóa nhất có thể. Có một số cài đặt để thực hiện.

Đầu tiên, trừ khi có những lý do hấp dẫn để làm khác, đặt các phép đo thành 'pixel' trong công cụ vector của bạn. Trong khi nó không thành vấn đề với SVG (sẽ đo lường Viewbox. và các yếu tố hạnh phúc trong hầu hết mọi hệ thống đo lường) nó có ý nghĩa để phát triển bản vẽ SVG bằng các đơn vị CSS phổ biến, thay vì mặc định in của inch; và nó cũng làm cho nó dễ dàng hơn nhiều để thêm @phương tiện truyền thông truy vấn và các can thiệp khác sau này.

Đừng làm cho khu vực vải lớn hơn so với nó cần. Giống như hình ảnh bitmap, bất kỳ 'không gian trống' trong SVG sẽ không được sử dụng và được thay thế tốt nhất với lề CSS. Lưu ý rằng nhiều công cụ vector, chẳng hạn như Phác thảo, sẽ tự động 'cắt' vùng Canvas để chọn các phần tử.

Đồng thời, không cắt vùng Canvas vào các cạnh chính xác của các yếu tố. Khử huyết áp vẫn sẽ được áp dụng cho SVG và cắt quá gần có thể cắt giảm khử răng cưa. Thay vào đó, hãy để lại ít nhất 2px rõ ràng bất cứ nơi nào cạnh của khung vẽ đến gần một yếu tố.

Phản ứng và hiệu suất có liên quan chặt chẽ, do đó, đặt độ chính xác thập phân là không quá hai điểm. SVG không nghĩ trong số nguyên, vì vậy một điểm vectơ có thể có giá trị 1.45882721px. Độ chính xác cực đoan này hoàn toàn không cần thiết và chỉ thêm vào mã phình to và kích thước tệp, vì vậy tốt hơn là cắt ngắn nó vào thời điểm này.

Tương tự, vẽ các hình dạng vector bằng cách sử dụng càng ít điểm càng tốt. Nhiều nhà thiết kế mới cho rằng nhiều điểm hơn là tốt hơn, khi ngược lại thực sự đúng: một vài điểm, được đặt tốt, cung cấp quyền kiểm soát lớn hơn đối với một yếu tố, đồng thời giảm kích thước tệp.

Nếu bạn đã đưa các tệp vectơ không tuân theo quy tắc này, đừng lo lắng - hầu hết Vector nghệ thuật Các ứng dụng có tùy chọn 'Đơn giản hóa' bạn có thể sử dụng để giảm số điểm trong một phần tử mà không thay đổi hình dạng của nó. Ngoài ra, để làm việc chi tiết, tôi sẽ đề xuất một plugin như VectorScribe của Graphics Astute.

02. Xóa các thuộc tính chiều cao và chiều rộng

Hầu hết các ứng dụng thêm rất nhiều quyền sở hữu, mã không cần thiết trong xuất khẩu SVG của họ. Mã yêu cầu duy nhất khi bắt đầu hầu hết các tệp SVG là như sau:

 & lt; svg xmlns = "http://www.w3.org/2000/svg" ViewBox = "0 0 500 500" & GT;
& lt;! - Mã SVG tại đây - & gt;
& lt; / svg & gt; 

Đối với mục đích của chúng tôi, khía cạnh quan trọng nhất là loại bỏ chiều rộng và Chiều cao Các thuộc tính mà hầu hết các ứng dụng bao gồm tự động. Điều này làm cho SVG đáp ứng đầy đủ trong các trình duyệt hiện đại.

Nếu bạn đang xử lý nhiều SVG, hoặc đang vội vàng, bạn không cần phải hoàn thành từng bước này. Thay vào đó, bạn có thể làm theo các đề xuất được đặt trong quy tắc vàng thứ ba ...

03. Tối ưu hóa và thu nhỏ đầu ra SVG

Bất cứ công cụ nào bạn sử dụng để tạo nội dung SVG của mình, nó vẫn đáng để xử lý đầu ra của nó thông qua một công cụ như Svgomg. , sẽ cắt mã rõ rệt. Thông thường, bạn có thể tiết kiệm khoảng 20 đến 80 phần trăm trong kích thước tệp. Cùng một mã có thể được tích hợp cục bộ cục bộ như một nhiệm vụ Gulp hoặc Grunt .

04. Sửa đổi mã cho IE

Quy tắc 2 đã đề cập rằng SVG được tối ưu hóa chính xác hoàn toàn đáp ứng trong các trình duyệt hiện đại. Điều đó đúng nếu chúng ta đếm Microsoft Edge như một trình duyệt hiện đại. Đối với IE 9-11, chúng tôi có một vài vấn đề để giải quyết. Nếu chúng ta đang sử dụng SVG như một hình ảnh:

 & lt; img src = "đếm ngược.svg alt =" đếm ngược "& gt; 

Chúng ta có thể buộc IE9-11 hiển thị chính xác hình ảnh bằng cách sử dụng bộ chọn thuộc tính CSS:

 IMG [src $ = ". Svg"] {width: 100%;} 

Hình ảnh SVG hoạt động tốt trong sản xuất nói chung, nhưng có khả năng tương tác hạn chế: Hầu hết các trình duyệt sẽ bỏ qua tính tương tác và hình ảnh động bên trong SVG được đặt trên một trang dưới dạng . Ngoài ra, hình ảnh SVG là một yêu cầu HTTP bổ sung cho trình duyệt.

Đối với những lý do này và các lý do khác, SVG ngày càng được sử dụng nội tuyến. Trong trường hợp đó, mã SVG cần thêm một chút cách điều trị cho IE:

 & lt; body & gt;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 525 365" ProServeasPectratio = "XmidyMin Slice" & GT; 

Ngoài bảo tỉ lệ Thuộc tính, IE cần thêm một chút hướng dẫn để duy trì quy mô chính xác của hình ảnh: Lấy chiều rộng của SVG ( 365. Trong trường hợp này), chia nó theo chiều cao ( 525. ) và nhân kết quả 100%. Điều này sẽ trở thành đệm đáy Giá trị cho SVG, 'Propping' Nó đủ mở trong IE để hiển thị SVG theo tỷ lệ khung hình chính xác của nó:

 & lt; body & gt;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 525 365"
ProServeasPectratio = "XmidyMin Slice"
Phong cách = "Chiều rộng: 100%; Đệm dưới cùng: 69,52%; Chiều cao: 1px; Overflow: Hiển thị" & GT; 

Lưu ý rằng, để giữ cho mọi thứ ngắn gọn và rõ ràng, các mẫu mã trong phần còn lại của bài viết này không bao gồm những thay đổi này. Amelia Bellamy-Royds đã viết một Bài viết tuyệt vời về tỷ lệ SVG .

05. Xem xét SVG cho văn bản anh hùng

Hiện tại không có tiêu chuẩn CSS để định cỡ văn bản với container của nó. Có thể chia tỷ lệ văn bản bằng các đơn vị VW, nhưng điều đó hầu như sẽ luôn yêu cầu ít nhất hai can thiệp truy vấn phương tiện để 'kẹp' văn ​​bản ở một số giới hạn viewport nhất định. Tuy nhiên, văn bản SVG sẽ tự động thay đổi kích thước vào một thùng chứa:

 & lt; tiêu đề & gt;
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 285 80" & gt;
& lt; văn bản x = "0" y = "66" & gt; kauai & lt; / text & gt;
& lt; / svg & gt;
& lt; / tiêu đề & gt; 

CSS:

 văn bản tiêu đề svg {
Trọng lượng phông chữ: 900; Kích thước phông chữ: 90px; Điền: màu xanh;
} 

Giữ cho SVG nội tuyến bảo tồn khả năng truy cập và giá trị SEO và cho phép văn bản được tạo kiểu bằng bất kỳ phông chữ nào đã được nhúng trong trang. Xem đây để biết thêm thông tin.

06. Để chiều rộng và chiều cao tại chỗ cho các biểu tượng tiến bộ

Một ngoại lệ đối với Quy tắc 2 là các biểu tượng và logo nhỏ, cần giữ lại chiều rộng và Chiều cao Thuộc tính Nếu bạn muốn chúng được nâng cao dần dần:

 & lt; a href = "http://codepen.io" & gt;
    & lt; vai trò svg = "img" aria-nhãn = "codepen" width = "50" Chiều cao = "50" & GT;
        & lt; Tiêu đề & GT; CodePen & Lt; / Tiêu đề & GT;
        & lt; sử dụng xlink: href = "# codepen" / & gt;
    & lt; / svg & gt;
& lt; / a & gt;
...
& lt; svg style = "display: none;" & gt;
    & lt; biểu tượng id = "codepen" viewbox = "0 0 50 50" & gt;
        & lt; path d = "..." / & gt;
    & lt; / biểu tượng & gt;
& lt; / svg & gt; 

Bạn có thể thấy một ví dụ về kỹ thuật này trong hành động đây .

Nếu chúng ta chỉ kích thước các biểu tượng SVG với CSS và bảng kiểu của trang web không tải, các biểu tượng sẽ xuất hiện ở kích thước mặc định của phần tử được thay thế: 300px x 150px. Bằng cách giữ chiều cao và chiều rộng như các thuộc tính, chúng ta có thể kích thước chúng vào kích thước cảm ứng hợp lý gần nhất theo mặc định và sử dụng CSS của chúng tôi để tăng cường cách chúng được trình bày.

07. Sử dụng hiệu ứng vector để giữ cho sợi điện mỏng

Theo mặc định, SVG vảy mọi thứ với chế độ xem, bao gồm độ dày đột quỵ. Thông thường, điều này hoạt động tốt, nhưng trong một số trường hợp - sơ đồ và đột quỵ được áp dụng như các tác động trên bên ngoài văn bản đặc biệt - bạn có thể muốn giữ các nét cùng độ dày, bất kể kích thước của bản vẽ. Đây là miền của ít được biết đến Vector hiệu ứng tài sản, có thể được áp dụng như một thuộc tính thuyết trình hoặc trong CSS:

 Đường dẫn {
    Điền: #fff; Đột quỵ: # 111;
    Chiều rộng đột quỵ: 2;
    Vector hiệu ứng: hành trình không mở rộng;
} 

Hãy xem Một ví dụ đầy đủ về kỹ thuật này .

08. Nhớ bitmap

Nhiều nhà phát triển giả định SVG chỉ có thể sử dụng các vectơ, nhưng JPEG và PNG cũng có thể được áp dụng cho bản vẽ SVG. Và miễn là bạn đã theo dõi các quy tắc của mình cho đến nay, những hình ảnh đó sẽ phản hồi khi bạn thêm một bitmap thông qua nhãn:

 & lt; hình ảnh chiều rộng = "1024" Chiều cao = "768" Xlink: href = "Lake-louise.jpg" x = "1300" Y = "150" Vai trò = "Hình ảnh" Tiêu đề = "Crowsnest Pass" & GT; & lt; / image & gt; 

09. Xem xét các giải pháp thích ứng

Làm cho mọi thứ đi 'Squish' chỉ là một phần của thiết kế đáp ứng. Những gì RWD là về, trong ý thức lớn hơn của thiết kế thích ứng, đang trình bày nội dung phù hợp ở tất cả các kích thước khung nhìn.

Điều này có thể đạt được theo nhiều cách khác nhau. assinationVelogos.co.uk cung cấp một loạt các ví dụ sử dụng SVG spites, nhưng tôi thích tích hợp các truy vấn phương tiện vào SVG để tạo những gì tôi gọi là 'mô-đun thương hiệu'. Cách tiếp cận này cho phép tôi thêm, xóa và sửa đổi khả năng hiển thị của các thành phần. Tìm hiểu thêm về các mô-đun thương hiệu thích ứng Trong bài viết của tôi .

Kỹ thuật tương tự này có thể được sử dụng cho sơ đồ, minh họa, bản đồ và nhiều hơn nữa. Trong các mô-đun đơn giản nhất, chính CSS có thể được viết bên trong SVG, khiến nó có thể sử dụng ở mọi nơi, như được nêu trong quy tắc trước đó.

10. Tích hợp các truy vấn phương tiện vào SVG

Nhiều người không biết rằng các truy vấn truyền thông CSS có thể được viết bên trong chính SVG:

 & lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "14 82 272 139" & gt;
& lt; defs & gt;
& lt; phong cách & gt;
svg g {chuyển đổi: 1s; Không thể
@Media tất cả và (chiều rộng tối đa: 90rem) {
#drink, #coke {Opacity: 0; Không thể
Không thể
& lt; / style & gt;
& lt; / defs & gt;
& lt; g id = "coca-cola" & gt;
& lt; path d = "m109.6 ... & gt; 

Điều quan trọng cần lưu ý là truy vấn phương tiện chỉ có thể 'xem' phần tử đó nằm trong: nghĩa là, bất kỳ phép đo nào liên quan đến chính phần tử chứ không phải trang. Một nhược điểm tiềm năng của phương pháp này là khu vực vải của SVG sẽ luôn giữ nguyên, so với các yếu tố bên trong nó.

Điều này có thể dẫn đến các yếu tố rất nhỏ ở kích thước viewport nhỏ, đóng khung bên trong một khu vực vải tương đối lớn. Có một số giải pháp cho việc này, bao gồm Thay đổi kích thước hộp xem và nhân rộng các yếu tố để bù đắp .

Phần kết luận

Khả năng mở rộng vô hạn của SVG là tài sản lớn nhất của nó, nhưng một tính năng vẫn còn phần nào được giám sát bởi các trình duyệt và trình chỉnh sửa đồ họa vector. Bằng cách tích hợp các nguyên tắc này vào quy trình sản xuất của bạn và truyền đạt chúng cho những người khác trong nhóm của bạn, bạn có thể tạo SVG đáp ứng suôn sẻ cho Web, làm cho nó một phần tài sản bạn sử dụng trong phát triển mỗi ngày.

Bài viết này ban đầu xuất hiện trong Tạp chí Net. vấn đề 283; Mua nó ở đây !

Những bài viết liên quan:

• 12 công cụ kiểm tra mã phải có
• Mài giũa kỹ năng phác thảo của bạn
• Hoạt hình SVG SVG với GSAP