Softonic

SVG 형태 생성기

단계 1 / 2

대부분의 디자인 시스템은 소수의 기본 형태만으로도 충분합니다. 아바타에는 원, 상태 표시용에는 정사각형, 게임 아이콘에는 삼각형, 평가 점수에는 별표, 배지에는 육각형이 사용됩니다. 이 생성기는 원, 정사각형, 삼각형, 별표, 육각형, 오각형, 심장 등 7가지 표준 형태를 모두 정밀하게 조정된 기하학적 형태로 출력하며, 별표는 정확한 내부 반경을 가지고, 육각형과 오각형은 꼭짓점이 위를 향하도록 배치되며, 심장은 캔버스 중심에 위치합니다. 생성된 결과물은 <svg> 형식으로 출력되어 바로 붙여 사용할 수 있습니다.

형상을 생성하는 방법

  1. 1

    형식을 선택하세요

    원, 정사각형, 삼각형, 별자리, 오각형, 육각형 또는 심장 모양.

  2. 2

    크기와 스트로크 설정

    캔버스 크기(픽셀 단위). 스트로크 너비는 윤곽의 두께를 제어하며, 0은 윤곽을 제거합니다.

  3. 3

    채우기 색상과 선색을 선택하세요

    어떤 윤곽색이든 사용할 수 있습니다. 중공 형태의 경우 채우기 색상을 `none`로 설정하세요.

  4. 4

    별에 대해 설정값을 지정하세요

    스타 프리미티브는 3개에서 12개의 점을 수용합니다. 5개는 기본적인 형태이며, 7개를 사용하면 셰리프 배지와 같은 외관이 나타납니다.

  5. 5

    SVG를 복사하세요

    마크업은 최소 바이트 사용을 위해 일치하는 SVG 프리미티브(`<circle>`, `<rect>`, `<polygon>`, `<path>`)를 사용합니다.

형태 기하학을 한눈에 확인하기

형태 SVG 원시형 중요한 매개변수들
원 <circle> 반경, 채우기, 선폭
사각형 <rect> 너비, 높이, 스트로크(여기서 rx은 포함되지 않음)
삼각형 <polygon> (3점) 등변형이며 위를 향해 있습니다
항목 <polygon> (N × 2) 점(3–12), 내반지름 대 외반지름 비율
펜타곤 <polygon> (5점) 위로 방향 설정
육각형 <polygon> (6점) 위로 방향 설정 (평면 상태에서는 30° 회전 가능)
심장 베지에르 곡선을 사용한 <path> 캔버스 위에 중심 배치된 대칭 구조

샘플 출력: 5점별

<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>

내부 반경은 외부 반경의 40%로 고정되어 있으며, 이는 깃발 및 트로피 스타에 사용되는 전통적인 비율과 일치합니다.

사용 사례

  • 아바타 및 마스크, 프로필 사진용 클립 경로로 사용할 원형입니다.
  • 스테이트 칩: 단순한 플래그 표시기로 사용되며, 정사각형 형태이며(CSS의 border-radius 또는 후속 버전의 rx 기능을 이용해 둥글게 처리됨).
  • 평가용 UI 요소: 0~5점 척도에 따라 별 모양으로 채워진 형태, 반쯤 채워진 형태, 그리고 선으로 표시된 형태로 구분됩니다.
  • 버지 및 크레스트, 내부에 텍스트 또는 아이콘이 표시된 육각형입니다.
  • 친애 버튼, 좋아요, 원하는 목록 및 저장용으로 사용되는 심장 모양 버튼입니다.

일반적인 경로를 사용할 때 SVG 프리미티브의 이유

동등한 <path> 대신 <circle> 또는 <polygon>를 사용하십시오:

  • 간단한 도형의 경우 바이트 단위로는 더 작습니다(10~30바이트).
  • 애니메이션 처리가 더 간편하다, r, cx, cy, points과 같은 속성은 CSS 또는 GSAP를 사용하여 직접 트윈할 수 있습니다.
  • 검사 항목 및 차이점(Diffs)에서 보다 명확하게 읽을 수 있습니다.

복잡한 형태(블로브, 아이콘, 로고)의 경우 경로가 더 적합합니다. 왜냐하면 경로는 단일 요소 내에서 곡선 및 다양한 형태의 구간을 모두 표현할 수 있기 때문입니다.

접근성

생성된 모든 SVG는 기본적으로 장식용입니다. 도형에 의미가 부여되어 있는 경우(빨간 원 = 오류, 녹색 체크 = 성공)에는 role="img" 및 aria-label를 포함하는 부모 요소에 포함시키거나, SVG 내부에 <title> 자식 요소를 추가해야 합니다.

자주 묻는 질문

내부 반경은 각 팔의 ‘두꺼움’을 결정합니다. 이 생성기는 균형 잡힌 외관을 얻기 위해 내부 반경을 외부 반경의 40%로 설정합니다. 더 선명한 별 모양을 원할 경우 출력된 SVG 파일에서 비율을 낮추세요(예: 25%); 반면에 더 부드럽고 레고 블록처럼 생긴 별 모양을 원할 경우에는 비율을 60%로 높여야 합니다.

이 생성기는 일반적인 <rect> 값을 출력합니다. 모서리를 둥글게 만들려면 rx="8" ry="8" 값을 직선에 추가하거나, SVG를 감싸는 경우에는 CSS 속성 border-radius을 사용하세요.

네, SVG 파일을 transform: rotate(30deg)를 사용하는 부모 요소 안에 포함시키거나, 경로를 수정하세요. 시작 각도를 30° 조정하세요. 생성기는 대부분의 배지 디자인과 일치하기 때문에 기본적으로 위를 향하도록 설정되어 있습니다.

네. SVG는 적절한 viewBox, 전체 픽셀 좌표, 그리고 최소 길이 마크업을 사용합니다. 수정 없이도 React, Vue, Astro, 이메일 또는 일반 HTML에 바로 사용할 수 있습니다.

아니요. 형태 매개변수는 현재 요청에 대한 SVG를 렌더링하는 데 사용된 후 폐기됩니다.

관련 도구

Material Design 색상 선택기

Material Design 색상 팔레트를 둘러보세요. 어떤 음영(50부터 A700까지)이든 HEX, RGB, HSL로 한 번에 복사합니다.

십자수 도안 만들기

JPEG, PNG, WebP를 10–150칸, 2–40가지 전용 색상, 기호, 정확한 스티치 수와 원단 크기가 포함된 인쇄용 십자수 도안으로 변환하세요.

이미지 포맷 변환기

브라우저에서 바로 이미지를 JPG, PNG, WebP로 변환하세요. 손실 형식의 품질을 조절하고 PNG와 WebP의 투명도는 그대로 유지됩니다.

모눈종이 생성기

인쇄용 모눈종이를 온라인으로 만드세요: 사각 또는 점 격자를 선택하고 간격을 mm로 설정하며 A4 또는 Letter와 원하는 선 색을 지정한 뒤, 인쇄하거나 선명한 SVG로 내려받으세요.

Pantone to HEX 변환기

화면과 인쇄 매칭을 위해 Pantone PMS 색상을 가장 가까운 HEX, RGB, CMYK 값으로 변환하고 견본 미리보기를 제공합니다.

이미지 색상 반전

이미지의 모든 RGB 채널을 반전시켜 네거티브를 생성합니다. 창의적인 편집이나 필름 스캔본을 확인하는 데 유용합니다.

이 도구는 다른 언어로도 제공됩니다