SVG ファイルとは何ですか?
SVG (Scalable Vector Graphics) は他の画像形式とは根本的に異なります。JPEG、PNG、および WEBP は画像を色付きピクセルのグリッド (ラスター) として保存しますが、SVG は画像を XML コードで定義された数学的形状 (円、長方形、パス、曲線、テキスト) として記述します。
これは SVG 画像を意味します。
- 無限に拡大縮小 — ピクセル化やぼやけなしで 10,000% までズームします
- ファイル サイズが小さい — PNG として 500 KB のロゴは、SVG として 5 KB になる可能性があります
- テキストとして編集可能 - 任意のテキスト エディターで開いて、色、サイズ、形状を変更できます
- 解像度に依存しません — あらゆる画面密度 (携帯電話、タブレット、4K TV) で完璧に表示されます
SVG は、ロゴ、アイコン、イラスト、チャート、地図、およびあらゆるサイズで鮮明に見える必要があるグラフィックの標準形式です。
SVG ファイルの出所
デザイン ツール: Figma、Adobe Illustrator、Sketch、Inkscape、Canva は、Web およびアプリで使用できるようにデザインを SVG としてエクスポートします。
アイコン ライブラリ: マテリアル アイコン、Font Awesome、Heroicons、および数千のアイコン パックが SVG ファイルとして配布されます。
Web ダウンロード: Web サイトからダウンロードされるロゴ、イラスト、グラフィックスは、多くの場合 SVG (右クリック → 名前を付けて保存) です。
開発者アセット: Android アプリ開発者は、アプリのアイコンと UI 要素に SVG (VectorDrawable に変換) を使用します。
データの視覚化: D3.js、Chart.js、Tableau などのツールからのチャート、グラフ、インフォグラフィックを SVG としてエクスポートします。
マップ: OpenStreetMap のエクスポート、カスタム マップ、および地理視覚化では SVG を使用します。
印刷デザイン: ロゴとブランド資産は、スケーラブルな複製のために SVG として配布されます。
Android で SVG を表示する
AnExplorer は SVG ファイルを次の 2 つの方法で処理します。
ビジュアルレンダリング (写真ビューア):
- AnExplorer の SVG ファイルに移動します。
- タップして開きます - ベクター グラフィックがビューアに表示されます
- ズームイン — 画像はどの倍率でも完璧に鮮明なままです
- どこまでズームしてもピクセル化やぼやけはありません
コード ビュー (テキスト エディター):
- SVGファイルを長押し→「プログラムから開く」→「テキストエディタ」
- XML ソース コードを表示する
- 色の編集 (
fill="#FF0000"を任意の 16 進色に変更) - サイズ、位置の変更、要素の追加/削除
- 保存 — 再度表示すると変更がすぐに反映されます
AnExplorer を使用した SVG ファイルの管理
閲覧と整理:
- SVG ファイルはファイルリストにベクターグラフィックアイコンとともに表示されます
- 名前、日付、またはサイズで並べ替えます
- フォルダーを作成してプロジェクトごとに整理 (ロゴ、アイコン、イラスト)
- 整理しやすくするためにファイルの名前を変更します
転送と共有:
- Device Connect 経由で SVG ファイルを PC に送信 (デザイナーはデスクトップで作業することが多い)
- チームコラボレーションのためにGoogle Drive、Dropboxにアップロード
- 設計資産をアーカイブするために NAS にコピー
- 電子メールまたはメッセージングで共有 (SVG ファイルは小さいため、通常は 100 KB 未満です)
アーカイブ操作:
- アイコン パック アーカイブから SVG ファイルを抽出します (数百の SVG を含む ZIP)
- SVG コレクションを ZIP に圧縮して共有します
- SVG ファイルを含むアーカイブを解凍せずに参照
コードとして編集:
- AnExplorer の組み込みテキスト エディタで開きます
- SVG は XML であり、人間が判読可能で編集可能です
- 色の変更:
fill="..."またはstroke="..."属性を見つけます - サイズの変更:
widthおよびheight属性を変更します - 要素の削除:
<path>、<circle>、または<rect>タグを削除します。
グラフィックスの SVG、PNG、PDF の比較
| 側面 | SVG | PNG | |
|---|---|---|---|
| タイプ | ベクトル (数学) | ラスター (ピクセル) | 両方 (いずれかを含めることができます) |
| スケーラビリティ | ✅ 無限 | ❌ 固定解像度 | ✅ ベクターコンテンツの場合 |
| ファイルサイズ (ロゴ) | ~5 ～ 50 KB | ~50 ～ 500 KB | ~10 ～ 100 KB |
| 透明性 | ✅ | ✅ | ✅ |
| 写真の内容 | ❌ 不適切 | ✅ | ✅ |
| テキストとして編集可能 | ✅ (XML) | ❌ | ❌ |
| Android サポート | ✅ | ✅ | ✅ (PDF ビューア) |
| ウェブ標準 | ✅ (ブラウザでネイティブ) | ✅ | ❌ (ビューアが必要) |
SVG を使用する場合: ロゴ、アイコン、イラスト、グラフ、UI 要素など、写真以外のものすべて。 PNG を使用する場合: スクリーンショット、透明度のある写真、固定サイズのラスター グラフィック。 PDF を使用する場合: ドキュメント、複数ページのコンテンツ、印刷可能なファイル。
Android での一般的な使用例
アイコン パックの管理
デザイナーと開発者は、アイコン ライブラリを使用して作業します。
- アイコン パックをダウンロードします (通常は数百の SVG を含む ZIP)
- AnExplorer のアーカイブマネージャーで解凍します
- SVG ファイルを参照する — サムネイルを表示して適切なアイコンを見つけます
- 必要なアイコンをプロジェクトフォルダーにコピーします
- または、使用前にテキストエディタを開いて色をカスタマイズします
チームからのデザイン資産の表示
共同作業者が設計ファイルを共有する場合:
- 電子メール、クラウド共有、またはデバイス接続経由で SVG ファイルを受信します
- AnExplorer で開いてデザインをプレビューします 3.色・レイアウト・内容の確認
- 必要に応じて、詳細な編集のためにデスクトップに転送します。
モバイルでの SVG カラーの編集
デザインツールを使わずに素早く色を変更:
- AnExplorer のテキスト エディタで SVG を開きます
fill="#を検索して色の定義を見つけます。- 16 進カラー コードを置き換えます (例:
#FF0000→#0066CC) - 保存 — ビューアで開いて変更を確認します
- 変更したSVGを共有する
開発者のワークフロー
ベクター アセットを扱う Android 開発者:
- マテリアル デザインまたはその他のライブラリから SVG アイコンをダウンロードします。
- AnExplorer でプレビューして、それらが正しいことを確認します
- Device Connect経由で開発マシンに転送
- Android アプリで使用するために VectorDrawable XML に変換する
SVG ファイルのサイズ
SVG ファイルは、同等のラスター ファイルと比較して著しく小さいです。
| コンテンツ | SVG サイズ | PNG 相当 (1024px) |
|---|---|---|
| シンプルなロゴ | 2～10KB | 50 ～ 200 KB |
| 複雑なアイコン | 5 ～ 30 KB | 100 ～ 500 KB |
| 詳細図 | 50 ～ 500 KB | 1～5MB |
| 地図・チャート | 100 KB - 2 MB | 2～10MB |
このため、SVG は大規模なアイコン ライブラリを保存するのに最適です。1,000 個の SVG アイコンは合計 10 MB になる可能性がありますが、PNG と同じ場合は 500 MB 以上になります。
関連ガイド
- Android で PNG ファイルを開く — ラスター画像形式
- Android で PDF ファイルを開く — ドキュメント形式
- テキスト エディター — SVG コードを直接編集します
- アーカイブ マネージャー — アイコン パック アーカイブの抽出