SVGオンラインプレビュー

ツール概要：SVGオンラインプレビューツール

SVG（Scalable Vector Graphics）は、W3Cによって開発されたXMLベースのベクターグラフィック形式です。このツールは、オンラインSVGコード編集とリアルタイムプレビュー機能を提供し、シンタックスハイライト、エラーチェック、画像ダウンロード機能を備えています - デザイナーと開発者に最適です。

SVGオンラインプレビューツールとは？

SVGオンラインプレビューツールはSVG をオンラインでプレビューするし、素早くプレビューと出力ができます。

使い方

1. ファイルをアップロードするか内容を入力します。
2. サイズ・品質・形式・効果を調整します。
3. プレビューしてダウンロードします。

よくある利用シーン

• Webやアプリ用素材の最適化
• デザイン/開発向けの形式変換
• SNSやEC向けの簡易編集

❓ よくある質問

Q1: 圧縮後にぼやける？
A: 品質を上げるか圧縮率を下げてください。

Q2: 透明背景を保持したい？
A: PNG/WebP など対応形式を使ってください。

Q3: 一括処理は？
A: 安定のため小分け処理を推奨します。

✨ 主な機能

• 🎨 リアルタイムプレビュー: SVGコードを入力しながら即座に視覚的フィードバック
• 🖥️ シンタックスハイライト: 読みやすさを向上させるXML/SVGシンタックスハイライト
• 📱 レスポンシブレイアウト: モバイルフレンドリーなインターフェースの分割パネルデザイン
• 💾 マルチフォーマットダウンロード: SVGまたはPNG形式でエクスポート
• 🔍 シンタックス検証: SVGコードのシンタックスエラーの自動検出
• 🎯 サンプルコード: クイックスタート用の組み込みサンプル
• 🔒 プライバシー保護: ローカル処理、データのアップロードなし

📖 使用例

基本図形

円の例:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="#3b82f6" stroke="#1e40af" stroke-width="4"/>
  <text x="100" y="110" text-anchor="middle" fill="white" font-family="Arial" font-size="16">SVG</text>
</svg>

矩形の例:

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="20" width="160" height="110" rx="10" ry="10" 
        fill="#10b981" stroke="#059669" stroke-width="2"/>
  <text x="100" y="85" text-anchor="middle" fill="white" font-size="18">矩形</text>
</svg>

パス描画

ハート形:

<svg width="200" height="180" xmlns="http://www.w3.org/2000/svg">
  <path d="M100,150 C100,150 50,100 50,75 C50,50 75,50 100,75 C125,50 150,50 150,75 C150,100 100,150 100,150 Z" 
        fill="#ef4444" stroke="#dc2626" stroke-width="2"/>
</svg>

星形:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,20 120,70 170,70 130,100 150,150 100,120 50,150 70,100 30,70 80,70" 
           fill="#fbbf24" stroke="#f59e0b" stroke-width="2"/>
</svg>

グラデーション効果

線形グラデーション:

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="200" height="100" fill="url(#grad1)" />
</svg>

🎯 使用ケース

1. アイコンデザイン

スケーラブルなベクターアイコンの作成:

<!-- 設定アイコン -->
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2Z" 
        fill="currentColor"/>
</svg>

2. ロゴデザイン

企業やブランドのロゴデザイン:

<svg width="200" height="80" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#3b82f6"/>
      <stop offset="100%" style="stop-color:#8b5cf6"/>
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="60" height="60" rx="10" fill="url(#logoGrad)"/>
  <text x="85" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#374151">ツールミ</text>
</svg>

3. データ可視化

チャートとデータ表示の作成:

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 軸 -->
  <line x1="50" y1="150" x2="250" y2="150" stroke="#374151" stroke-width="2"/>
  <line x1="50" y1="150" x2="50" y2="50" stroke="#374151" stroke-width="2"/>
  
  <!-- 棒グラフ -->
  <rect x="70" y="120" width="30" height="30" fill="#3b82f6"/>
  <rect x="120" y="100" width="30" height="50" fill="#10b981"/>
  <rect x="170" y="80" width="30" height="70" fill="#f59e0b"/>
  <rect x="220" y="90" width="30" height="60" fill="#ef4444"/>
</svg>

🔧 技術詳細

SVG基本構文

基本構造:

<svg width="幅" height="高さ" xmlns="http://www.w3.org/2000/svg">
  <!-- SVGコンテンツ -->
</svg>

一般的な要素:

• <rect>: 矩形
• <circle>: 円
• <ellipse>: 楕円
• <line>: 線
• <path>: パス
• <text>: テキスト

座標系

SVGはデカルト座標系を使用:

• 原点(0,0)は左上角
• X軸の正方向は右
• Y軸の正方向は下
• デフォルト単位はピクセル(px)

💡 ヒントとコツ

• viewBox属性: レスポンシブスケーリングにviewBoxを使用
• 要素のグループ化: 関連要素をグループ化するために<g>タグを使用
• 要素の再利用: 要素の再利用のために<defs>と<use>を使用
• コードの最適化: 不要な属性と空白を削除
• アクセシビリティ: より良いアクセシビリティのために<title>と<desc>を追加

⚠️ 重要な注意事項

• 名前空間: 正しいxmlns属性が含まれていることを確認
• 単位の一貫性: 寸法単位の一貫性を保つ
• ブラウザ互換性: 異なるブラウザでテスト
• ファイルサイズ: 複雑なグラフィックは大きなファイルになる可能性
• セキュリティ: SVGに悪意のあるスクリプトを含めることを避ける

🚀 始める

1. コード入力: 左のエディターにSVGコードを入力または貼り付け
2. リアルタイムプレビュー: 右側でSVG画像効果をリアルタイムで表示
3. デバッグと修正: プレビューフィードバックに基づいてコードを調整
4. ダウンロード: 画像をダウンロードするためにSVGまたはPNG形式を選択
5. 適用: 生成されたSVGをプロジェクトで使用

注意: このツールは完全にブラウザ内でローカルに動作します。あなたのSVGコードは決してサーバーにアップロードされることはなく、データセキュリティとプライバシー保護を確保します。