Softonic

SVG形状ジェネレータ

ステップ 1 / 2

ほとんどのデザインシステムには、数少ない形状のみが必要です：アバターには円、ステータスチップには正方形、ゲームアイコンには三角形、評価マークには星、バッジには六角形がそれぞれ対応します。このジェネレーターは、円、正方形、三角形、星、六角形、五角形、心形の7種類の標準形状をすべて、正確に調整された幾何学的配置で生成します、星は正しい内半径で配置され、六角形と五角形は頂点が上を向いており、心形はキャンバス中央に配置されます、そして、貼り付ける準備が整った<svg>データを出力します。

形状を生成する方法

  1. 1

    形状を選択してください

    円、正方形、三角形、星形、五角形、六角形またはハート形。

  2. 2

    サイズとストロークを設定します

    キャンバスサイズ（ピクセル単位）。ストロークの太さは輪郭の太さを制御します。0では輪郭が消去されます。

  3. 3

    塗りつぶしと線の色を選択してください

    任意の六角形色。中空形状では塗りつぶし色を`none`に設定します。

  4. 4

    スター用の設定ポイント

    スター・プリミティブは3～12個のポイントを受け入れます。5個はクラシックなデザインで、7個では保安官のバッジ風の効果が発揮されます。

  5. 5

    SVGをコピーします

    Markupは、最小限のバイト数を確保するために対応する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のスケールに基づき、星を満たした状態、半分満たした状態、および輪郭付きの状態で表示します。
  • バッジおよび crest、内側にテキストまたはアイコンが配置された六角形。
  • アフィッションボタン、「いいね」、「ウィッシュリスト」、「保存」を示す心形のボタン

なぜ汎用パス上でSVGプリミティブを使用するのか

同等の<path>に代えて、<circle>または<polygon>を使用してください：

– 簡易な形状の場合、バイト数が少ない（10～30バイト）。 – アニメーション化がより簡単です、r、cx、cy、pointsといった属性は、CSSまたはGSAPを使用して直接トゥインできます。

  • 検査項目および差異項目をより明確に読み取れます。

複雑な形状（ブロブ、アイコン、ロゴ）の場合、パスが優れています。なぜなら、パスは単一の要素内で曲線や複数のセグメントを表現できるからです。

アクセシビリティ

生成されたすべてのSVGはデフォルトで装飾的なものです。形状に意味がある場合（赤の円＝エラー、緑のチェックマーク＝成功）、role="img"およびaria-labelを持つ親要素に配置するか、SVG内に<title>の子要素を追加してください。

よくある質問

内半径は各アームの「肥満度」を決定します。このジェネレータでは、バランスの取れた見た目を得るために内半径を外半径の40％に設定しています。より鋭い星を取得するには、出力されるSVGファイル内の比率を下げて（例：25％）；より丸みを帯びた、レゴブロック風の星を取得するには、比率を60％まで上げてください。

このジェネレータは標準の<rect>を出力します。角を丸めるにはrectにrx="8" ry="8"を追加してください。または、SVGを折り返す場合はCSSのborder-radiusプロパティを使用してください。

はい、SVGをtransform: rotate(30deg)を持つ親要素に包み込むか、パスを編集して開始角度を30°変更してください。ジェネレータはデフォルトで上向きに設定されており、ほとんどのバッジデザインに適合しています。

はい。SVGは適切な視界範囲、フルピクセル座標、および最小長のマークアップを使用しています。変更することなく、React、Vue、Astro、メール、または標準HTMLに直接使用できます。

いいえ。形状パラメータは現在のリクエスト用のSVGをレンダリングするために使用され、その後廃棄されます。

関連ツール

マテリアルデザイン カラーピッカー

Material Designのカラーパレットを閲覧できます。任意の色調（50からA700）を1タップでHEX、RGB、HSL形式でコピーできます。

方眼紙ジェネレーター

印刷できる方眼紙をオンラインで作成：方眼またはドット罫を選び、間隔をmmで設定し、A4かLetterと好きな線の色を指定して、印刷または鮮明なSVGでダウンロードできます。

旗作成ツール

6種類のレイアウト、色、文字、シンボルで、シンプルな3:2のカスタム旗をブラウザ内でデザインします。SVGまたはPNGをダウンロードするか、ブラウザの印刷ダイアログを開けます。

画像アップスケーラー

AI超解像または従来の補間処理で、低解像度画像を2×、3×、4×に拡大しながら重要なディテールを保ちます。

罫線入り用紙ジェネレーター

印刷できる罫線入り用紙を無料で作成。カレッジ罫、広め罫、狭め罫を選び、行間をmmで設定し、用紙サイズとマージン線を決めて、印刷またはSVGでダウンロードできます。

画像ピクセルレーター

調整可能なブロックサイズで画像全体または選択した領域をピクセル化し、顔、ナンバープレート、またはレトロな8ビットアートの遮蔽に使用できます。

このツールは他の言語でも利用できます