devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Kiểm tra website

SVG sang Webflow — Sao chép & dán icon thành phần tử

Dán SVG từ Figma và sao chép sang Webflow dưới dạng Custom Elements thật. Mỗi <svg>, <path> và <g> sẽ thành một phần tử bạn có thể chọn, gắn class và chỉnh sửa trong Navigator. Ngoài ra còn có tùy chọn Code Embed.

Cập nhật
Thả file .svg vào đây hoặc nhấp để chọn
Xem trước & SVG đã làm sạch

    






  
  
  


  

  
  
Để trống nếu muốn dán không có class.

  

  






Sau đó chọn một phần tử trên canvas Webflow hoặc trong Navigator rồi nhấn Ctrl/⌘+V.
Webflow đang mở ở trình duyệt khác? Trình duyệt không chia sẻ dữ liệu clipboard của Webflow với nhau. Hãy dán vào Webflow Clipboard Bridge trong trình duyệt đó, rồi sao chép lại.


Dán không còn hoạt động? Hiệu chỉnh lại với Webflow của bạn

  1. Trong Webflow Designer, mở bảng Add và kéo một Custom Element lên canvas.
  2. Đặt thẻ của nó là svg và thêm một thuộc tính bất kỳ (ví dụ viewBox = 0 0 24 24).
  3. Chọn phần tử đó và nhấn Ctrl/⌘+C.
  4. Nhấp vào ô bên dưới và nhấn Ctrl/⌘+V. Công cụ sẽ học định dạng phần tử hiện tại của Webflow và ghi nhớ trong trình duyệt này.


Nhấp vào đây, rồi dán phần tử Webflow đã sao chép



    
 Dữ liệu của bạn không bao giờ rời khỏi máy tính. Mọi xử lý diễn ra 100% cục bộ trong trình duyệt của bạn.
Công cụ này có hữu ích không?0.0 0 lượt đánh giá

    
    
devpack.app là tiện ích độc lập, không liên kết, không được tài trợ hay xác nhận bởi Webflow, Inc. hoặc Figma, Inc. Webflow và Figma là nhãn hiệu thuộc về chủ sở hữu tương ứng.

    Mô tả một section và nhận ngay cấu trúc class gọn gàng theo Client-FirstBEM hoặc kebab-case, kèm khung HTML, CSS mẫu và sao chép vào Webflow chỉ với một cú nhấp.Tạo tên class Webflow →
    
    

      
Cách dùng SVG sang Webflow
  1. Trong Figma, nhấp chuột phải vào layer icon và chọn Copy as → Copy as SVG (hoặc xuất file .svg).
  2. Dán vào ô bên trái. Công cụ sẽ xóa metadata và chú thích của Figma, đồng thời mặc định đổi màu sang currentColor.
  3. Chọn Custom Elements (phần tử svg/path gốc) hoặc Code Embed, đặt kích thước (và tên class nếu cần), rồi nhấn Copy to Webflow.
  4. Trong Webflow Designer, chọn vị trí muốn đặt icon và nhấn Ctrl/⌘+V. Nếu Webflow không nhận dữ liệu dán, hãy dùng ô hiệu chỉnh một lần (sao chép một Custom Element từ Webflow rồi dán vào công cụ), sau đó thử lại.


Vì sao nên dán icon SVG dưới dạng embed trong Webflow?


Tải icon lên như một image asset thì vẫn hoạt động, nhưng màu của SVG khi đó bị cố định: bạn không thể đổi màu khi rê chuột, ở chế độ tối hay theo từng component. Đặt mã SVG vào một Code Embed sẽ biến nó thành một phần của trang, nên icon kế thừa CSS. Với fill="currentColor", icon sẽ tự lấy màu chữ của phần tử, và các Interactions hoặc trạng thái hover của Webflow có thể đổi màu nó.


Công cụ làm sạch những gì?


    

  • Xóa khai báo XML, chú thích, <metadata> và các thuộc tính của trình chỉnh sửa từ Figma, Illustrator, Inkscape và Sketch.
    • 

  • Thay màu fill/stroke viết cứng bằng currentColor (giữ nguyên none và các tham chiếu gradient).
    • 

  • Thêm viewBox nếu thiếu và đặt width/height là 100% để div bao ngoài kiểm soát kích thước.
    • 

  • Đánh dấu icon trang trí bằng aria-hidden="true", hoặc thêm role="img" và nhãn cho icon có ý nghĩa.
    • 

  • Loại bỏ script và event handler nội tuyến để đảm bảo an toàn, sau đó rút gọn kết quả.
    • 



Custom Elements hay Code Embed?


Custom Element của Webflow cho phép tạo bất kỳ thẻ HTML nào, gồm svg, path, g, circle và linearGradient, rồi gán thuộc tính cho chúng. Làm theo cách này, icon được tạo từ các phần tử Designer thật: bạn có thể thấy từng path trong Navigator, thêm class cho từng phần, tạo animation bằng Interactions, gắn thuộc tính với trường CMS và chỉnh giá trị mà không cần mở code. Code Embed là một khối HTML duy nhất: đơn giản hơn, nhưng là một hộp đen trong Designer.


Custom ElementsCode Embed


Chỉnh sửa trong NavigatorCó, với mọi thẻKhông, phải sửa code


Class & interactions cho từng pathCóChỉ qua CSS/JS tùy chỉnh


Minh họa phức tạpNhiều phần tử — có thể nặngLựa chọn tốt hơn




“Copy to Webflow” hoạt động thế nào?


Khi bạn sao chép phần tử trong Webflow Designer, Webflow đưa một mô tả JSON của chúng vào clipboard. Công cụ này tạo ra cùng loại dữ liệu từ SVG của bạn: mỗi thẻ là một Custom Element với đầy đủ thuộc tính, kích thước bạn chọn được đặt trên thẻ svg gốc (hoặc trên một class tùy chọn). Nhờ vậy, khi dán sẽ tạo ra các phần tử gốc. Webflow không chính thức công bố định dạng clipboard này. Vì vậy, nếu một bản cập nhật Webflow thay đổi nó, công cụ có sẵn cơ chế hiệu chỉnh dự phòng: sao chép một Custom Element bất kỳ từ Webflow Designer, dán vào ô hiệu chỉnh, và công cụ sẽ học định dạng hiện tại để dùng từ đó trở đi (chỉ được lưu trong trình duyệt của bạn).


Mẹo dùng icon trong Webflow


    

  • Mặc định không có class nào được thêm. Nếu muốn dùng chung kích thước, hãy nhập tên class và tái sử dụng; dùng đơn vị linh hoạt nếu icon cần co giãn theo chữ.
    • 

  • SVG quá lớn hoặc phức tạp (minh họa, bản đồ) nên dùng làm image asset, vì Embed có giới hạn ký tự (hiện là 50.000).
    • 

  • Với nền hoặc mask SVG, hãy dùng công cụ SVG sang CSS; với dự án React, dùng SVG sang JSX.
    • 

Cũng được tìm dưới tên: nhúng svg webflow, figma sang webflow, icon webflow, currentcolor, webflow clipboard, dán svg webflow, code embed svg.
Các công cụ dùng kèm tốt với SVG sang Webflow
  • Figma CSS sang Webflow — Biến đầu ra “Copy as CSS” của Figma thành các giá trị gọn gàng, bạn có thể nhập trực tiếp vào Style panel của Webflow.
  • Markdown sang Webflow Rich Text — Dán Markdown, xem trước và sao chép dưới dạng rich text có định dạng.
  • Máy tính CSS clamp() — Nhập kích thước tối thiểu, tối đa và dải chiều rộng viewport — bạn sẽ nhận được giá trị clamp() thân thiện với phóng to, kèm giải thích công thức, xem trước trực tiếp và thang chữ hoặc thang khoảng cách linh hoạt hoàn chỉnh.
  • Chuyển hướng WordPress sang Webflow — Chuyển website từ WordPress sang Webflow sẽ thay đổi hầu hết các URL: đường dẫn bài viết có ngày tháng, trang lưu trữ /category/, dấu gạch chéo cuối và slug của trang.
Câu hỏi thường gặp
Vì sao dán vào Webflow không hoạt động?
Hãy chọn một phần tử trên canvas hoặc trong Navigator trước khi nhấn Ctrl/⌘+V. Nếu không có gì xuất hiện, định dạng clipboard của Webflow có thể đã thay đổi: hãy dùng ô hiệu chỉnh (sao chép một Custom Element từ Webflow, dán vào công cụ) rồi sao chép lại. “Copy SVG code” dán vào một Embed luôn hoạt động như phương án dự phòng.
Sau khi dán, tôi có thể chỉnh sửa các path của SVG không?
Có. Ở chế độ Custom Elements, mỗi path, g hoặc circle là một phần tử riêng. Hãy chọn nó trong Navigator và chỉnh các thuộc tính (như d hoặc fill) trong phần cài đặt phần tử, hoặc gắn class để định kiểu cho nó.
Làm sao đổi màu icon trong Webflow?
Giữ tùy chọn “Use currentColor” được bật, sau đó đặt Typography → Color cho embed (hoặc phần tử cha của nó). Trạng thái hover và interactions cũng có thể đổi màu icon.
Dán SVG từ nguồn không rõ có an toàn không?
Công cụ đã loại bỏ script, foreignObject và event handler nội tuyến, nhưng bạn vẫn nên chỉ dùng SVG từ nguồn đáng tin cậy.
Công cụ này có hỗ trợ icon nhiều màu không?
Tắt “Use currentColor” để giữ nguyên màu gốc. Sau đó bạn cũng có thể chỉnh các path cụ thể và chỉ đặt một số path thành currentColor.
SVG của tôi có được tải lên đâu đó không?
Không. Mọi thứ đều chạy trong trình duyệt của bạn.
Tôi có thể cài SVG sang Webflow như một ứng dụng web và dùng khi không có mạng không?
Có. SVG sang Webflow là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.

      
    

    
    
Công cụ liên quan
localFigma CSS sang WebflowBiến đầu ra “Copy as CSS” của Figma thành các giá trị gọn gàng, bạn có thể nhập trực tiếp vào Style panel…localSVG sang CSSDán SVG vào để nhận data URI gọn đã mã hóa URL, cùng sẵn CSS background-image và mask-image có thể đổi màu.localSVG sang JSXDán SVG từ Figma, Illustrator hoặc bộ icon và nhận ngay một React component (JSX hoặc TSX) sẵn sàng sử…localMarkdown sang Webflow Rich TextDán Markdown, xem trước và sao chép dưới dạng rich text có định dạng. Tiêu đề, danh sách, liên kết và chữ…localMáy tính CSS clamp()Nhập kích thước tối thiểu, tối đa và dải chiều rộng viewport — bạn sẽ nhận được giá trị clamp() thân thiện…localTạo Type ScaleChọn cỡ chữ gốc và một tỷ lệ như Minor Third, Major Third, Perfect Fourth hay Golden Ratio, bạn sẽ có bộ…