Hướng dẫn SVG

• Đây là tài liệu học SVG để vẽ hình ảnh trực tiếp bằng mã trong HTML, có thể theo dõi từng bước từ các hình cơ bản đến tương tác
• Lộ trình học đi từ các phần tử nền tảng như viewBox, polygon, polyline, rồi mở rộng sang path, đường cong Bézier và arc
• Phần biến đổi đề cập đến xoay, di chuyển, tái sử dụng, scale và biến đổi tổng quát; phần CSS kết nối đến animation, hover, animation dựa trên đường dẫn và SVG inline trong CSS
• Các chủ đề nâng cao bao gồm văn bản, clip-path, gradient; phần JavaScript cho thực hành với đồng hồ hiển thị thời gian thực, tương tác, sơ đồ dựa trên dữ liệu và tách thành nhiều component
• Cũng cung cấp liên kết trình chỉnh sửa cho line, circle, rect, polyline, polygon, text cùng quadratic/cubic Bézier curve và arc, giúp thử nghiệm ngay theo từng phần tử

---

Cấu trúc hướng dẫn

• TLDR: SVG Tutorial Summary: Tóm tắt toàn bộ hướng dẫn

• Cơ bản về SVG

  • How to Draw Basic Shapes with SVG
  • How to use the viewBox property
  • How to Make a Gingerbread Figure with SVG
  • How to use the Polygon and Polyline elements

• Phần tử path

  • How to Draw Basic Paths with SVG
  • How to Draw Quadratic Bézier Curves with SVG
  • How to Draw Cubic Bézier Curves with SVG
  • How to Draw a Bear with SVG
  • How to Draw an Arc with SVG

• Biến đổi

  • How to Rotate and Translate SVG Elements
  • How to Reuse Image Elements in SVG
  • How to Scale SVG Elements
  • How to Transform SVG Elements

• SVG và CSS

  • How to Animate an SVG with CSS
  • How to Add Animation on Hover for an SVG Element
  • How to Animate Along a Path with SVG
  • How to Inline SVG in CSS

• Chủ đề nâng cao

  • How to Add Text to SVG Images
  • How to use clip-path with SVG
  • How to Use Gradients with SVG

• SVG và JavaScript

  • How to Draw a Clock with SVG and JavaScript that Shows the Actual Time
  • How to Add Interaction to SVG elements with JavaScript
  • How to Generate an SVG Diagram from JavaScript
  • How to Break Down an SVG Image into Multiple Components

Các phần tử SVG và path segment để thực hành

• Có thể thử nghiệm ngay các hình cơ bản bằng trình chỉnh sửa theo từng phần tử SVG
  • Line Element
  • Circle Element
  • Rectangle Element
  • Polyline Element
  • Polygon Element
  • Text Element
• Phần tử path tạo nên các hình dạng phức tạp từ nhiều path segment
  • Quadratic Bézier Curve
  • Cubic Bézier Curve
  • Arc

[GN⁺]

Ý kiến trên Hacker News

• Sự kết hợp SVG + React đang bị đánh giá thấp. Bạn có thể tận dụng nguyên vẹn lớp trừu tượng và sức mạnh của React, nhưng thay vì render DOM thì render đồ họa tùy ý; với một số mục đích như render đồ thị hay biểu đồ, tôi nghĩ nó tốt hơn Canvas rất nhiều
  Đặc biệt phù hợp khi bạn không cần những thứ phức tạp về đồ họa như thao tác từng pixel mà chỉ cần một chút tương tác. Trong Canvas, để tạo hiệu ứng hover, bạn phải tự tính xem chuột đang ở trên phần tử nào nên khá phiền, còn với SVG thì chỉ cần dùng các tính năng tích hợp sẵn như onmouseover

  • Đúng vậy. Việc có thể gắn click listener vào SVG và styling bằng CSS như HTML thông thường đôi khi tạo cảm giác như phép màu, và React / JSX khiến việc dùng nó trở nên dễ dàng
  • Có tài liệu nhập môn nào hay về chủ đề này không? Tôi cũng gần như mới bắt đầu với React, nhưng có vẻ đây là thứ khá thú vị để đào sâu
    Sẽ rất tốt nếu có ví dụ hoạt động nào đó để định hướng hoặc truyền cảm hứng
  • Tôi từng dùng Preact.js và SVG cho phía client để tạo một component phân đoạn + gắn thẻ ảnh, và kết quả khá ổn. Với kiểu ứng dụng như vậy thì rất đáng khuyến nghị
  • Đúng. HTML Canvas trong nhiều trường hợp có hiệu năng tốt hơn nhiều, nhưng nếu bạn không định tạo ra Figma tiếp theo thì làm việc với SVG tiện hơn rất nhiều
  • Tôi đang code các pattern để cắt bằng GlowForge bằng React & SVG, và nó hoạt động rất tốt

• Nhìn chung đây là tài liệu tuyệt vời và các ví dụ thật sự rõ ràng. Tuy nhiên, ở phần clip-path, đoạn code được đề xuất mô tả vòng tròn lớn hai lần, nên nếu muốn đổi kích thước vòng tròn thì phải sửa ở hai chỗ
  Vì đã dùng defs, tôi nghĩ viết theo kiểu tái sử dụng cùng một định nghĩa sẽ tốt hơn

  • Thậm chí không cần phần tử thứ hai; chỉ cần render vòng tròn bình thường rồi tham chiếu nó bên trong clipPath là được
    Cá nhân tôi cũng muốn bỏ cả việc bọc bằng <g>. Tôi chưa bao giờ hiểu lý do khuyến nghị cấu trúc như vậy, và ngoài những trường hợp cực hiếm khi muốn đặt vào một phần tử sẽ được render nếu không nằm trong <defs>, tôi không thấy nó mang lại gì. Với tình huống như defs/circle trong ví dụ thì thường nên dùng <symbol>
  • Nói đúng, và đó là một ý hay. Có thể thêm ghi chú liên quan

• Thật tuyệt. SVG là một định dạng gọn gàng và linh hoạt; nó liên quan trực tiếp đến side project tôi đang làm nên tôi định dành thời gian làm theo tutorial này
  Giống như những người khác, tôi thấy việc tạo component React dựa trên SVG khá thú vị. React và JSX giúp dễ thêm tương tác, còn SVG cho phép tạo những UI mà chỉ với HTML thì không dễ làm được
  Tôi từng công khai một component React để render Circle of Fifths tương tác cho side project về nhạc lý. Vẫn còn nhiều việc phải làm nhưng đã dùng được: https://github.com/epiccoleman/react-circle-of-fifths
  Tôi cũng viết một bài về quá trình tạo Circle of Fifths bằng SVG, và đặc biệt thích phần giải thích trung gian khi đi qua quá trình vẽ các phần tử phức tạp: https://epiccoleman.com/posts/2023-04-05-svg-circle-of-fifth...
  Hiện tôi đang làm một trình tạo sơ đồ cần đàn theo cách tương tự, và việc có thể xem lại bài viết cũ như tài liệu tham khảo rất hữu ích. Điểm hay của việc ghi lại quá trình làm là bạn có thể “phát lại” cách mình đã giải quyết vấn đề

• Tôi thích tài liệu này. Tôi đã tạo vài SVG inline trong React và thêm tương tác, chơi với nó thật sự rất vui
  Đặc biệt thẻ <foreignObject> rất hữu ích. Nó cho phép đưa HTML thông thường vào trong SVG, nên bạn có thể xử lý trong một dự án nghệ thuật SVG những việc mà HTML làm tốt hơn, như liên kết, hình ảnh và styling flexbox cơ bản
  Gửi thêm tới tác giả: một số liên kết trên site không hoạt động. bio.link ở cuối trang và liên kết demo đường cong Bézier tương tác trong Day 11 “How to Draw Quadratic Bézier Curves with SVG” đều đang chết

  • Tôi đã sửa liên kết demo tương tác. Site đó có lẽ được làm bằng Vue nên deep link dường như không phải lúc nào cũng hoạt động tốt
    Còn phía bio.link thì tôi không thấy vấn đề; tôi tò mò bạn thấy lỗi gì
  • Liên kết “next example” ở cuối trang https://svg-tutorial.com/svg/transform cũng đang trỏ tới /svg/path nên bị 404; có vẻ liên kết đúng là /svg/use
  • Lúc nào cũng có cái gì đó hỏng nhỉ. Tôi sẽ kiểm tra
    Tôi cũng không biết foreignObject, mà nó thật sự hay

• Vài năm trước, khi làm giao diện, tôi có dùng SVG cho một phần đồ họa. Có hai color scheme, nhưng một đồ họa chỉ có ở một scheme, nên tôi đi sang bên kia hành lang để lấy mã hex của màu còn lại
  Tôi đã rất ngạc nhiên khi thấy designer mở file SVG và chỉ cần tìm rồi thay toàn bộ màu để tạo ra phiên bản màu thứ hai

  • Tôi hoàn toàn chưa nghĩ đến chuyện đó. Đây là một mẹo hay có thể tiết kiệm rất nhiều thời gian một ngày nào đó
  • Thú vị đấy, bạn có thể giải thích thêm đoạn “đi sang bên kia hành lang để lấy mã hex của màu còn lại” không?

• Tuyệt vời. Tôi đặc biệt thích các ví dụ về đường cong và clipping, những thứ tôi vẫn còn thấy khó
  Cá nhân tôi thích path, vì nó có thể làm gần như mọi thứ và ít dài dòng hơn các cách khác
  Tôi đã học khá lâu nhưng vẫn cảm thấy còn nhiều thứ phải học. Vì tôi vẽ rất tệ và cũng không thích ảnh lắm, nên vì sự tiện lợi và hiệu năng, tôi đã làm toàn bộ side project bằng SVG
  Sau khi xem tài liệu hôm nay, có lẽ tôi sẽ phải refactor khá nhiều: https://eddiots.com/1

  • Rất vui vì nó có ích. Truyện tranh cũng hay

• Cảm ơn những phản hồi tốt, và tôi đã sửa vài lỗi được chỉ ra. Nếu vẫn còn chỗ nào chưa ổn thì mong mọi người cho biết. Hiện vẫn đang tinh chỉnh nốt phần cuối
  Chẳng hạn có ai biết vì sao phần xem trước thumbnail trên Twitter không hoạt động không? Ở các trang con thì hoạt động tốt

  • Nếu đang nói về xem trước liên kết, Elon gần đây đã đụng tới phần đó: https://www.socialmediatoday.com/news/x-changing-how-link-pr...

• Rất hay. Vấn đề tôi đang vật lộn hiện giờ là văn bản + hình ảnh, nên nếu có một hai ví dụ liên quan thì tốt
  Căn chỉnh thật sự rất đau đầu. Tôi cũng đã thử Inkscape, nhưng để tạo thứ mình cần thì rõ ràng gần với việc “tự viết XML” hơn

  • Tôi chưa thử nghiệm nhiều với văn bản, ngoài ví dụ cho văn bản chạy theo đường
    Tôi biết text-anchor: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/t...
    Và có người gợi ý rằng thẻ foreignObject có thể hữu ích ở đây: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
  • Văn bản đúng là phiền phức. Tôi từng vội làm một đoạn mã Python tạo bảng bằng svgwrite, và việc đặt văn bản vào đúng vị trí mình muốn đúng là địa ngục
    Cuối cùng tôi chỉ hiệu chỉnh đại khái nhiều giá trị rồi chốt kiểu “thế này là đủ”. Tôi đồng ý với yêu cầu cần có ví dụ về bố cục văn bản không tầm thường
    [0] Liên kết GitHub nằm trong hồ sơ
  • Tính năng căn chỉnh của Inkscape thì hợp với tôi. Khi cần chính xác hơn, tôi nhấn ctrl+shift+x rồi nhập tọa độ trực tiếp
    Trình chỉnh sửa XML của Inkscape trên môi trường của tôi khá hay bị crash, nhưng nếu nhớ lưu mỗi lần chỉnh sửa thì vẫn dùng được

• Thường thì mọi người làm thế nào? Người ta code SVG trực tiếp, hay vẽ ở Figma chẳng hạn rồi tạo tệp SVG?

  • Vì được đào tạo làm nhà thiết kế đồ họa, tôi thường vẽ trực tiếp trong Inkscape hoặc nhập từ chương trình khác
    Để giảm kích thước tệp ở http://shapeoko.github.io/Docs/ xuống mức hợp lý thì cần khá nhiều công sức
    Về sau tôi cũng tạo cơ chế để khi bấm vào hình ảnh thì nó mở trong cửa sổ mới: http://shapeoko.github.io/Docs/content/tPictures/PS20028-100...
    Và còn có thể làm cho khi bấm tên linh kiện trong danh sách linh kiện thì linh kiện tương ứng được tô nổi bật trong sơ đồ
  • Người làm thiết kế chắc sẽ dùng trình chỉnh sửa ưa thích như Illustrator, Sketch, Inkscape. Lập trình viên cũng có thể chỉnh sửa chút ít bằng các phần mềm đó, nhưng nếu có tương tác thì thường sẽ chỉnh SVG trực tiếp
    Với các hình dạng hoặc đường cong phức tạp, thỉnh thoảng tôi đưa vào trình chỉnh sửa online để trực quan hóa; công cụ này khá tốt: https://yqnn.github.io/svg-path-editor/
  • Với đồ họa phức tạp hơn thì có lẽ vẫn nên dùng công cụ của designer. Nhưng đồ họa đơn giản thì có thể code trực tiếp
    Nếu cần mũi tên hay biểu tượng menu hamburger, tôi có thể đi thẳng vào code. Đôi khi bắt đầu bằng giấy và bút, rồi chỉnh tọa độ cho đến khi nhìn đủ ổn
  • Với các mô hình vector dựa trên transformer mới như của Adobe, việc tạo SVG sẽ dễ hơn bao giờ hết: https://www.adobe.com/products/illustrator/text-to-vector-gr...
  • Trong các dự án tôi làm, tôi tạo hoặc chỉnh sửa tệp bằng Inkscape rồi liên kết nó như ảnh thông thường
    Thỉnh thoảng một trang tĩnh cụ thể cần đồ họa riêng nên tôi nhúng vào trong trang, nhưng đồ họa trong những trường hợp đó cũng không quá phức tạp

• Một điều gần đây tôi nhận ra là trong ứng dụng React có thể đặt thẻ SVG inline như thẻ JSX
  Tôi không biết chính xác đây có phải hỗ trợ hạng nhất hay do Webpack xử lý, nhưng trong một số trường hợp cảm giác tạo component SVG có logic bên trong rất tuyệt. Giờ có thể thay đổi hình dạng, màu sắc và việc lược bỏ một số phần của SVG bằng logic dựa trên React

  • Rất hợp nếu đó là SVG đơn giản hoặc cần nhiều biến thể
    Nhưng nếu đưa mã SVG inline, trình duyệt không thể cache hình ảnh. Nếu SVG lớn hoặc chỉ có vài biến thể, có thể tốt hơn là tạo endpoint riêng cho từng biến thể ảnh
    https://chat.openai.com/share/49e91be6-bdef-4f4d-a263-80a884...
  • Đúng vậy. Từ sau HTML5 đã có thể nhúng SVG inline, không cần thứ như Webpack. Nó cứ thế hoạt động
    Một trong các ví dụ của tutorial này cũng là sơ đồ dựa trên dữ liệu được tạo trong React. Kết hợp hai thứ này có thể làm được khá nhiều điều thú vị