Softonic

Thiết lập Hình dạng SVG

Bước 1 / 2

Hầu hết các hệ thống thiết kế chỉ cần một bộ hình dạng cơ bản nhỏ: tròn cho avatar, vuông cho thẻ trạng thái, tam giác cho biểu tượng trò chơi, sao cho điểm đánh giá và lục giác cho huy hiệu. Bộ tạo này hiển thị cả bảy hình dạng tiêu chuẩn (tròn, vuông, tam giác, sao, lục giác, ngũ giác, trái tim) với kích thước và hình dạng được hiệu chỉnh chính xác – điểm sao nằm đúng bán kính trong, các hình lục giác và ngũ giác được đặt đỉnh nhọn hướng lên, trái tim nằm chính giữa khung hình – và xuất ra file <svg> sẵn sàng dán.

Cách tạo hình dạng

  1. 1

    Chọn một hình dạng

    Vòng tròn, hình vuông, tam giác, sao, ngũ giác, lục giác hoặc hình tim.

  2. 2

    Kích thước bộ và độ dày nét

    Kích thước canvas tính bằng pixel. Chiều rộng nét điều chỉnh độ đậm của đường viền; giá trị 0 sẽ loại bỏ hoàn toàn đường viền.

  3. 3

    Chọn màu lấp và màu nét

    Bất kỳ màu hình chữ nhật đều được chấp nhận. Hãy thiết lập giá trị điền là `none` cho các hình dạng rỗng.

  4. 4

    Đối với sao, thiết lập các điểm

    Phương thức thiết lập hình sao chấp nhận từ 3 đến 12 điểm. Năm điểm là lựa chọn tiêu chuẩn; bảy điểm tạo nên hình dạng giống hệt biểu tượng cảnh sát trưởng.

  5. 5

    Sao chép file SVG

    Markup sử dụng các nguyên tố SVG tương ứng (`<circle>`, `<rect>`, `<polygon>`, `<path>`) để đạt lượng byte tối thiểu.

Hình học hình dạng một cách tổng quan

Hình dạng Nguyên tố SVG Các tham số quan trọng
Vòng tròn <circle> bán kính, màu lấp, độ dày nét
Tương tự như <rect> chiều rộng, chiều cao, độ dày nét (không có thông số rx ở đây)
Tam giác <polygon> (3 điểm) tam giác đều, hướng lên trên
Sao <polygon> (N × 2) số điểm (3–12), tỷ lệ bán kính trong/bán kính ngoài
Pentagon <polygon> (5 điểm) hướng thẳng đứng lên trên
Lục giác <polygon> (6 điểm) hướng thẳng đứng (vặn 30° để nằm phẳng)
Tim <path> với đường nét Beziers đặt ở giữa tấm vải vẽ, đối xứng

Ví dụ về kết quả đầu ra: ngôi sao năm điểm

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <polygon points="100,2 118.65,73.57 191.98,73.57 132.66,117.86 151.31,189.43 100,145.14 48.69,189.43 67.34,117.86 8.02,73.57 81.35,73.57"
    fill="#6366f1" stroke="#312e81" stroke-width="2"/>
</svg>

Bán kính trong được cố định ở 40% của bán kính ngoài, phù hợp với các tỷ lệ kinh điển thường dùng trong hình ảnh ngôi sao cờ và ngôi sao cúp.

Các trường hợp sử dụng

  • Avatar và mặt nạ, sử dụng hình tròn làm đường dẫn cắt (clip-path) cho ảnh hồ sơ.
  • Các chip trạng thái – hình vuông (được làm tròn bằng thuộc tính border-radius trong CSS hoặc các phiên bản mới hơn của rx) dùng để biểu thị trạng thái một cách đơn giản.
  • Các giao diện đánh giá – các sao được biểu thị bằng hình đầy, bán đầy hoặc viền rìa theo thang điểm từ 0 đến 5.
  • Biểu tượng và huy hiệu, hình lục giác với văn bản hoặc biểu tượng bên trong.
  • Các nút biểu tượng yêu thích – hình trái tim dùng để đánh dấu “thích”, danh sách mong muốn và các mục đã lưu.

Vì sao các nguyên tố SVG lại được sử dụng trên một đường dẫn tổng quát

Sử dụng <circle> hoặc <polygon> thay vì phiên bản tương đương <path>:

– Dung lượng nhỏ hơn theo đơn vị byte đối với các hình dạng đơn giản (10–30 byte). – Dễ thực hiện hoạt ảnh hơn, các thuộc tính như r, cx, cy và points có thể được điều chỉnh bằng tween trực tiếp thông qua CSS hoặc GSAP. – Đọc rõ hơn trong các thông tin kiểm tra và sự khác biệt (Diff).

Đối với các hình dạng phức tạp (như khối màu, biểu tượng hay logo), đường cong là lựa chọn lý tưởng vì chúng có thể mô tả cả các đường cong lẫn các đoạn kết hợp trong cùng một phần tử.

Tính khả dụng

Tất cả các file SVG được tạo ra đều có tính chất trang trí mặc định. Nếu hình dạng mang ý nghĩa cụ thể (vòng tròn màu đỏ = lỗi, dấu chấm x màu xanh lá cây = thành công), hãy bao quanh nó bằng một đối tượng cha chứa các mã role="img" và aria-label, hoặc thêm một đối tượng con có mã <title> bên trong file SVG đó.

Câu hỏi thường gặp

Bán kính trong quyết định mức độ “mập” của mỗi cánh. Bộ tạo hình này sử dụng tỷ lệ bán kính trong bằng 40% so với bán kính ngoài để đạt hiệu ứng cân đối. Để tạo ra ngôi sao sắc nét hơn, hãy giảm tỷ lệ này trong tệp SVG đầu ra (ví dụ: 25%); nếu muốn ngôi sao mập mạp như những viên gạch Lego, hãy tăng tỷ lệ lên 60%.

Bộ phát này xuất ra định dạng <rect> thông thường. Hãy thêm rx="8" ry="8" vào đoạn thẳng để làm tròn các góc, hoặc sử dụng thuộc tính CSS border-radius nếu bạn cần lồng nội dung SVG.

Vâng – hãy bao quanh file SVG trong một file cha có tên transform: rotate(30deg), hoặc chỉnh sửa đường dẫn bằng cách dịch chuyển góc khởi điểm 30°. Bộ tạo hình mặc định đặt hướng lên trên vì phù hợp với hầu hết các thiết kế biểu tượng.

Đúng vậy. SVG sử dụng khung hình (viewbox) đúng quy định, tọa độ toàn pixel và mã định dạng có độ dài tối thiểu. Bạn có thể sử dụng nó trực tiếp trong React, Vue, Astro, email hoặc HTML thông thường mà không cần chỉnh sửa.

Không. Các tham số hình dạng được sử dụng để hiển thị SVG cho yêu cầu hiện tại và sau đó sẽ bị loại bỏ.

Công cụ liên quan

Trình tạo giấy kẻ ngang

Tạo giấy kẻ ngang in được miễn phí. Chọn kẻ college, rộng hoặc hẹp, đặt khoảng cách dòng theo mm, khổ giấy và một đường lề, rồi in hoặc tải xuống tệp SVG.

Trình tạo giấy kẻ ô

Tạo giấy kẻ ô để in trực tuyến: chọn lưới ô vuông hoặc chấm, đặt khoảng cách theo mm, chọn A4 hoặc Letter và màu nét tùy chỉnh, rồi in hoặc tải xuống tệp SVG sắc nét.

Bộ chọn màu Material Design

Duyệt bảng màu Material Design. Sao chép bất kỳ sắc độ nào (từ 50 đến A700) dưới dạng HEX, RGB hoặc HSL chỉ với một thao tác chạm.

Thay đổi kích thước GIF

Thay đổi kích thước GIF động trực tuyến, miễn phí. Đặt kích thước pixel mới, giữ tỉ lệ khung hình và tải về một GIF mới với mọi khung hình đã được co giãn. Mọi thứ chạy trong trình duyệt của bạn, không có gì được tải lên.

Trình thay đổi kích thước ảnh hàng loạt

Kéo thả nhiều ảnh, căn vừa hoặc kéo giãn theo kích thước mục tiêu, rồi xuất JPG, PNG hoặc WebP trong một file ZIP. Mọi xử lý ở lại trong trình duyệt.

Ảnh sang Word

Trích xuất văn bản cục bộ từ ảnh PNG, JPG hoặc WebP bằng OCR 18 ngôn ngữ. Xem lại trong trình duyệt rồi tải file DOCX hoặc TXT có thể chỉnh sửa.

Công cụ này có phiên bản bằng các ngôn ngữ khác