Hướng dẫn SVG

Tóm tắt hướng dẫn SVG

• Đây là hướng dẫn SVG do Hunor Márton Borbély tạo ra, bắt đầu từ các hình dạng cơ bản và đi đến các hoạt ảnh phức tạp, giúp người học từng bước nắm được cách viết mã cho hình ảnh SVG.
• Nội dung bao quát nhiều chủ đề như vẽ hình cơ bản, cây thông Noel, người bánh gừng, làm ngôi nhà, đồng thời giới thiệu nhiều tính năng của SVG như clip path, gradient, đường cong Bézier và vẽ văn bản theo đường dẫn.
• Ngoài ra còn bao gồm cách kết hợp SVG với các công nghệ khác, chẳng hạn như vẽ đồng hồ bằng JavaScript, thêm tương tác vào các phần tử SVG và tạo sơ đồ SVG bằng JavaScript.

Ý kiến của GN⁺

• Hướng dẫn này là một tài liệu tốt để các kỹ sư phần mềm mới vào nghề có thể học một cách bài bản từ nền tảng đến kỹ thuật nâng cao trong việc viết mã cho hình ảnh SVG.
• Đặc biệt, các ví dụ thực tiễn như tạo đồng hồ hiển thị thời gian thực hay thêm tương tác vào các phần tử SVG dường như sẽ mang lại trải nghiệm học tập rất hữu ích và thú vị cho người học.
• Với những ai muốn học SVG, hướng dẫn này sẽ là một tài liệu học tập hấp dẫn, giúp mở rộng hiểu biết về thiết kế web đồ họa và nâng cao khả năng thêm các yếu tố hình ảnh độc đáo vào trang web.

[GN⁺]

Ý kiến trên Hacker News

• Sự kết hợp giữa SVG và React đang bị đánh giá thấp. Bạn có thể tận dụng mọi tính năng và lớp trừu tượng của React, đồng thời render đồ họa tùy ý thay vì DOM. Khi dùng để render đồ thị và biểu đồ, trong một số tình huống nó vượt trội hơn hẳn Canvas. Ví dụ, nó hữu ích khi cần tương tác đơn giản nhưng không cần đồ họa phức tạp như thao tác ở mức pixel.
• SVG là một định dạng linh hoạt, đáng để dành thời gian học qua các tutorial liên quan. Khi kết hợp SVG với các component React, bạn có thể tạo ra những UI ấn tượng mà chỉ với HTML thì khó làm được.
• Tôi đã dùng một component "Circle of Fifths" tương tác viết bằng React cho một side project về lý thuyết âm nhạc. Component đó hiện có thể sử dụng được, và bài blog về quá trình xây dựng Circle of Fifths bằng SVG khá hữu ích.
• Trong ví dụ sử dụng <clip-path> của SVG, việc định nghĩa vòng tròn lớn hai lần là không hiệu quả. Khi thay đổi kích thước, bạn phải sửa ở cả hai chỗ, vì vậy nếu đã dùng defs thì tốt hơn là chỉ định nghĩa vòng tròn một lần rồi tái sử dụng.
• Việc code SVG inline bằng SVG và React rất thú vị, và với thẻ <foreignObject>, bạn có thể tận dụng SVG bên trong HTML, rất hữu ích cho những việc HTML làm tốt hơn (liên kết, hình ảnh, styling flexbox cơ bản, v.v.).
• Vài năm trước, khi dùng SVG trong lúc làm giao diện, tôi đã khiến nhà thiết kế ngạc nhiên khi chỉ đơn giản tìm và thay mã màu trong file SVG để tạo ra hai bảng màu khác nhau.
• Tác giả bày tỏ lời cảm ơn trước phản hồi tích cực về tutorial và đã sửa các lỗi được phát hiện. Vẫn đang tinh chỉnh thêm, và ví dụ đang tự hỏi có ai biết vì sao phần xem trước thumbnail trên Twitter không hoạt động hay không.
• Có một chút khó chịu với cách gọi là "thẻ" SVG. Khi mới bắt đầu với HTML, tôi gọi mọi thứ là "thẻ", nhưng sau khi XHTML xuất hiện thì bắt đầu gọi là "phần tử". Trong đầu tôi vẫn nghĩ là "thẻ", nhưng giờ thì nói là "phần tử".
• Tôi đặc biệt thích các ví dụ về đường cong và clipping. Tôi thích path hơn vì nó làm được gần như mọi thứ và ít dài dòng hơn các cách khác. Vì tôi vẽ kém và ghét hình ảnh, tôi đã xây dựng cả một side project hoàn toàn bằng SVG để có hiệu năng và sự tiện lợi. Qua tutorial này, tôi nhận ra có khá nhiều chỗ cần refactor.
• Tôi muốn xem ví dụ dùng cả văn bản và hình ảnh cùng nhau. Hiện tôi đang vật lộn với đúng vấn đề này, và căn chỉnh là một bài toán khó. Tôi từng dùng Inkscape, nhưng cuối cùng vẫn thiên về phía tự viết XML để tạo ra thứ mình cần.
• Tôi tự hỏi việc trực tiếp code SVG có phải là thông lệ phổ biến hay không, hay thông thường mọi người sẽ vẽ trong Figma chẳng hạn rồi xuất ra file SVG.