Skip to content
VECTOSOLVE
Technical

高度なSVGグラデーションとパターン：複雑なエフェクトの作成

洗練されたビジュアルエフェクトのためにSVGグラデーションとパターンをマスターしましょう。リニア、ラジアルグラデーションとパターン技法を学びます。

Robin Monteiro2026年1月26日2026年10月10日6 min
Use this article with an AI assistant:
.md
高度なSVGグラデーションとパターン：複雑なエフェクトの作成
R
Robin Monteiro

Founder of VectoSolve

Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.

How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author

Image vectorizationCutting machine filesEmbroidery filesSVG
Free previewNo signupFull-quality output

Key Takeaways

  • SVGはリニアグラデーション、ラジアルグラデーション、繰り返しタイルパターンをサポートします — すべてXMLで定義
  • 透明度付きマルチストップグラデーションにより、スムーズなフェード、スポットライト、グローエフェクトが可能
  • パターンはpatternUnitsとpatternTransformを使用してタイリングと回転を完全制御
  • グラデーションはパターン内にネストでき、SMILまたはCSSでアニメーション化してダイナミックなビジュアルを実現
  • グラデーションストップを制限し、アニメーションコンテキストで複雑なパターンを避けることで最適化

フラットカラーを超えて

SVGグラデーションとパターンはベクターグラフィックスに深みと視覚的な面白さを加えます。このガイドではプロフェッショナルなエフェクトを作成する高度なテクニックを探ります。

SVGグラフィックスにおけるベクターパターンとグラデーションテクニック
グラデーションとパターンがフラットなSVG形状をリッチでテクスチャのあるビジュアルに変換

リニアグラデーション

基本構造

xml 
<defs>
  <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#ff0000"/>
    <stop offset="100%" stop-color="#0000ff"/>
  </linearGradient>
</defs>

<rect fill="url(#gradient1)" width="200" height="100"/>

方向制御

xml 
<!-- 水平 -->
<linearGradient x1="0%" y1="0%" x2="100%" y2="0%">

<!-- 垂直 -->
<linearGradient x1="0%" y1="0%" x2="0%" y2="100%">

<!-- 対角線 -->
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%">

<!-- カスタム角度（45度） -->
<linearGradient gradientTransform="rotate(45)">

マルチストップグラデーション

xml 
<linearGradient id="rainbow">
  <stop offset="0%" stop-color="#ff0000"/>
  <stop offset="17%" stop-color="#ff8000"/>
  <stop offset="33%" stop-color="#ffff00"/>
  <stop offset="50%" stop-color="#00ff00"/>
  <stop offset="67%" stop-color="#0000ff"/>
  <stop offset="83%" stop-color="#4b0082"/>
  <stop offset="100%" stop-color="#8f00ff"/>
</linearGradient>

Pro Tip: 角度付きグラデーションにはx1/y1/x2/y2を手動で計算する代わりにgradientTransform="rotate(45)"を使用しましょう。より読みやすく、後から調整も簡単です。

ラジアルグラデーション

基本ラジアル

xml 
<radialGradient id="radial1" cx="50%" cy="50%" r="50%">
  <stop offset="0%" stop-color="#ffffff"/>
  <stop offset="100%" stop-color="#000000"/>
</radialGradient>

オフセットセンター（スポットライトエフェクト）

xml 
<radialGradient id="spotlight"
                cx="30%" cy="30%"
                fx="25%" fy="25%"
                r="50%">
  <stop offset="0%" stop-color="#ffffff"/>
  <stop offset="100%" stop-color="#333333"/>
</radialGradient>

楕円グラデーション

xml 
<radialGradient id="ellipse"
                cx="50%" cy="50%"
                rx="50%" ry="25%">
  <stop offset="0%" stop-color="#ff0000"/>
  <stop offset="100%" stop-color="#000000"/>
</radialGradient>

A Full Year of Conversions for $49

Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime

Get the Annual Deal

グラデーションの透明度

フェードエフェクト

xml 
<linearGradient id="fade-out">
  <stop offset="0%" stop-color="#000000" stop-opacity="1"/>
  <stop offset="100%" stop-color="#000000" stop-opacity="0"/>
</linearGradient>

透明な中心

xml 
<radialGradient id="glow">
  <stop offset="0%" stop-color="#00ff00" stop-opacity="0.8"/>
  <stop offset="50%" stop-color="#00ff00" stop-opacity="0.3"/>
  <stop offset="100%" stop-color="#00ff00" stop-opacity="0"/>
</radialGradient>

「グラデーションとパターンは、ベクターグラフィックスにおけるフラットデザインとフォトリアリズムの架け橋です — 適切に配置されたstop-opacityの繊細さがコンポジションを左右します。」 - Lea Verou、CSS/SVG著者

パターンの基本

シンプルなパターン

xml 
<defs>
  <pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse">
    <circle cx="10" cy="10" r="3" fill="#333"/>
  </pattern>
</defs>

<rect fill="url(#dots)" width="200" height="200"/>

ストライプパターン

xml 
<pattern id="stripes" width="10" height="10" patternUnits="userSpaceOnUse">
  <rect width="5" height="10" fill="#ff0000"/>
  <rect x="5" width="5" height="10" fill="#ffffff"/>
</pattern>

複雑なパターン

xml 
<pattern id="plaid" width="40" height="40" patternUnits="userSpaceOnUse">
  <!-- ベース -->
  <rect width="40" height="40" fill="#e0e0e0"/>

  <!-- 水平ストライプ -->
  <rect width="40" height="10" fill="#c0c0c0"/>
  <rect y="20" width="40" height="10" fill="#c0c0c0"/>

  <!-- 垂直ストライプ -->
  <rect width="10" height="40" fill="#a0a0a0" opacity="0.5"/>
  <rect x="20" width="10" height="40" fill="#a0a0a0" opacity="0.5"/>
</pattern>

パターン変換

回転パターン

xml 
<pattern id="diagonal"
         width="10" height="10"
         patternTransform="rotate(45)"
         patternUnits="userSpaceOnUse">
  <line x1="0" y1="0" x2="0" y2="10" stroke="#000" stroke-width="2"/>
</pattern>

スケーリングパターン

xml 
<pattern id="scaled"
         width="20" height="20"
         patternTransform="scale(0.5)"
         patternUnits="userSpaceOnUse">
  <!-- 2xのパターンコンテンツ、1xで表示 -->
</pattern>
SVGフィルターエフェクトと高度なグラデーションコンポジション
レイヤード・ビジュアルエフェクトのためにフィルターとグラデーション、パターンを組み合わせる

Free SVG Tools for Crafters

Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG

Check Your SVG Free

高度なテクニック

パターン内のグラデーション

xml 
<defs>
  <linearGradient id="grad">
    <stop offset="0%" stop-color="#ff0000"/>
    <stop offset="100%" stop-color="#00ff00"/>
  </linearGradient>

  <pattern id="gradient-dots" width="20" height="20" patternUnits="userSpaceOnUse">
    <circle cx="10" cy="10" r="8" fill="url(#grad)"/>
  </pattern>
</defs>

グラデーション背景のパターン

xml 
<defs>
  <radialGradient id="bg-grad">
    <stop offset="0%" stop-color="#ffffff"/>
    <stop offset="100%" stop-color="#cccccc"/>
  </radialGradient>

  <pattern id="textured" width="4" height="4" patternUnits="userSpaceOnUse">
    <rect width="4" height="4" fill="url(#bg-grad)"/>
    <circle cx="2" cy="2" r="1" fill="#000" opacity="0.1"/>
  </pattern>
</defs>

ノイズ/グレインエフェクト

xml 
<filter id="noise">
  <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4"/>
  <feColorMatrix type="saturate" values="0"/>
</filter>

<rect filter="url(#noise)" opacity="0.1" width="100%" height="100%"/>

グラデーションのCSSアニメーション

アニメーショングラデーション

html 
<svg>
  <defs>
    <linearGradient id="animated-grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff0000">
        <animate attributeName="stop-color"
                 values="#ff0000;#00ff00;#0000ff;#ff0000"
                 dur="4s" repeatCount="indefinite"/>
      </stop>
      <stop offset="100%" stop-color="#0000ff">
        <animate attributeName="stop-color"
                 values="#0000ff;#ff0000;#00ff00;#0000ff"
                 dur="4s" repeatCount="indefinite"/>
      </stop>
    </linearGradient>
  </defs>
</svg>

SMIL (<animate>) によるアニメーショングラデーションは、JavaScriptなしで全てのモダンブラウザでネイティブに動作します。より複雑なグラデーションアニメーション — ストップ位置の時間経過による移動など — にはSMILと親要素のCSSトランジションを組み合わせてください。

パフォーマンスの考慮事項

最適化のヒント

  1. グラデーションストップを制限する
  2. アニメーションで複雑なパターンを避ける
  3. will-changeを控えめに使用する
  4. フォールバックカラーを検討する
  5. モバイルデバイスでテストする

ラスタライズすべきとき

以下の場合にラスタライズを検討:

  • 極めて複雑なパターン
  • 重いフィルターエフェクト
  • パフォーマンスが重要なアプリケーション
  • 静的グラフィックス

A Full Year of Conversions for $49

Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime

Get the Annual Deal

VectoSolveとグラデーション

グラデーション処理

VectoSolveはグラデーション変換を処理します：

  • グラデーションカラーの抽出
  • カラーストップの保持
  • クリーンなSVG出力

変換後のグラデーション作業

ベクター化後：

  1. 抽出されたグラデーションを確認
  2. 必要に応じてストップを調整
  3. ユースケースに合わせて最適化
  4. パターンを手動で追加

まとめ

SVGグラデーションとパターンは、ラスターの制限なしに洗練されたビジュアルエフェクトを実現します。ベクターグラフィックスに深み、テクスチャ、視覚的な面白さを作り出すためにこれらのテクニックをマスターしましょう。VectoSolveのクリーンなベクターから始めて、必要に応じてグラデーションとパターンで強化してください。

複雑なベクターエフェクトを作成

グラデーション/パターンタイプSVG要素一般的なユースケース
リニアグラデーション<linearGradient>背景、ボタン、空のエフェクト
ラジアルグラデーション<radialGradient>スポットライト、グロー、円形フェード
繰り返しパターン<pattern>テクスチャ、布地、タイリング背景
メッシュグラデーション<meshGradient> (SVG2)フォトリアリスティックな色のブレンド

出典と参考文献

Tags:
SVG
グラデーション
パターン
ビジュアルエフェクト
SVGアニメーション
ベクターデザイン
Share:

Try VectoSolve Now

Convert your images to high-quality SVG vectors with AI

Related articles

Technical

SVG最適化でページ読み込みを70%高速化した方法：実例ケーススタディ

3 min
Technical

Web開発者ガイド：SVG統合のベストプラクティス

6 min
Technical

印刷対応ベクターファイル完全ガイド

3 min

Related Conversion Tools

Free Tool

PNG to SVG Converter

Convert PNG images to scalable SVG vectors

Try free
Free Tool

JPG to SVG Converter

Convert JPG images to scalable SVG vectors

Try free
Free Tool

JPEG to SVG Converter

Convert JPEG images to scalable SVG vectors

Try free

Explore related tools

PNG to SVG ConverterJPG to SVG ConverterImage VectorizerBackground RemoverImage UpscalerAI Logo GeneratorSVG AnimatorHalftone Generator
AI-Powered Vectorization

Ready to vectorize your images?

Convert your PNG, JPG, and other images to high-quality, scalable SVG vectors in seconds.