SVGアイコンは、スケーラビリティ、小さなファイルサイズ、CSSスタイリング機能のおかげで、最新のWebデザインでますます使用されており、レスポンシブWebサイトに最適です。
この記事では、SVG画像の「スケルトン」が変更されたままですが、表面の外観を簡単に変更できます。
この記事は、SVGの単一の部分を変更できないという問題の解決策を提案しています。これには、SVGの各形状のシンボルを作成し、各シンボルが同じViewboxに作成され、必要に応じて各要素のスタイルが可能になります。
著者は、Adobe IllustratorとGulpを使用してSVGシンボルの構築のワークフローを詳述し、この方法はすべての最新のブラウザと互換性があることに注意してください。
ファイルサイズ、スケーラビリティ、CSSスタイリング機能のおかげで、2016年には、最新のWebページでのSVGの広範な使用が大幅に改善されました。アイコンシステムで使用できます（独自のSVGアイコンの構築を参照）が、場合によってはアイコンフォントが望ましい場合があります（アイコンWARS：FONTSおよびSVGを参照）。
しかし、SVGはロゴまたはグラフィック要素（少なくとも過度に複雑な要素ではない）にも使用できます。また、その自然な柔軟性により、レスポンシブWebサイトに最適なソリューションになります（サラソウライダンの「CSSを使用したレスポンシブSVGの作成」を参照）。
SVGを使用すると、CSSを活用して要素全体のサイズと色を見つけて変更できますが、SVGコードがHTMLページに埋め込まれていない限り、この方法で個々の部分を変更することはできません。
質問
より簡単な例を見てみましょう。これは、複数の色で表示する必要がある画像です。
伝統的に、3つの別々の画像を作成します。しかし、単一のSVGファイルを使用してレンダリング時にスタイルを整える場合はどうなりますか？
また、ブラウザキャッシュを活用するために「SVGシンボル」に画像を作成する方法はありますか？
私はそれを「スキン可能なSVGシンボル」と呼びます - SVG画像の「スケルトン」は同じままですが、表面の外観は簡単に変更されます。
理想的な解決策は、CSSセレクターを介してシンボリック要素にアクセスし、いくつかのルールを追加することです（埋め込みSVGで使用する方法と同じ）。
以下の例では、各三角形にクラス（上、右、下、左）を追加し、画像をシンボルとして配置し、次のようにCSSを介して変更しようとしました。
.top { fill: #356BA5; }
.right { fill: #357FD9; }
/* and so on... */残念ながら、現時点では、これは以下のCodepenデモに示すように、Firefoxでのみ機能します。 Firefoxでのみ2番目の画像が青い色合いに表示されます（便宜上、ペンにシンボリックコードを埋め込みましたが、外部SVGファイルを使用すると同じ結果が得られます）。
大規模なプロジェクトでは、多くのそのような要素があり、メンテナンスの問題が重要な要素であるため、プロジェクトリソースをより適切に整理する方法を常に探しています。
私の目標は純粋なCSSソリューションです。前の例は、CSSを介して回転、移動、およびシェーディングできる単一の三角形SVGを使用して書き直すことができます。
しかし、私はこの解決策が好きではありません。問題を変えるだけで問題を解決しないように思えます。同じ形状の現実世界のロゴコンポーネントはいくつありますか？
Sara Soueidanは、この問題を私よりもよく説明し、CSS変数を使用する巧妙なソリューションを提供します。残念ながら、CSS変数は依然として実験的な手法であり、Microsoftブラウザーはそれらをサポートしていません。
solution
頻繁に起こるように、解決策は非常に単純なので、以前は期待していなかったので愚かに感じるでしょう。
数ヶ月前に新しいミディアムロゴを見たときに発見しました（メディアがロゴコードを変更したようです - あなたは私を信じなければなりません）。
中程度のロゴは、それぞれ異なる固体で満たされた4つの「形」で構成されていることがわかります。白黒バージョンは、緑色のバージョンと同じです（もちろん色を除く）。
単一のファイルの両方のバージョンを所有するソリューションは、各シンボルのシンボルを単純に構築することです。 それを例に適用し、画像内の各形状のシンボルを作成しましょう。それらはすべて、画像全体と同じビューボックス（0 0 54 54）を共有するため、追加の指示なしに正しい位置に配置されます。シンボルコードで塗りつぶし、ストローク、スタイル、その他の属性を使用しないように注意してください）。
これで、それらを単一のSVGコンテナに結合することができます：
<svg xmlns="https://www.w3.org/2000/svg">
<symbol id="top" viewBox="0 0 54 54">
<polygon points="54 0 0 0 27 27 54 0"></polygon>
</symbol>
<symbol id="right" viewBox="0 0 54 54">
<polygon points="54 54 54 0 27 27 54 54"></polygon>
</symbol>
<symbol id="bottom" viewBox="0 0 54 54">
<polygon points="0 54 54 54 27 27 0 54"></polygon>
</symbol>
<symbol id="left" viewBox="0 0 54 54">
<polygon points="0 0 0 54 27 27 0 0"></polygon>
</symbol>
</svg>各使用要素は必要に応じてスタイリングでき、最も重要なことは、すべての最新のブラウザーと互換性があります。
<svg>
<use class="top" xlink:href="#top"></use>
<use class="right" xlink:href="#right"></use>
<use class="bottom" xlink:href="#bottom"></use>
<use class="left" xlink:href="#left"></use>
</svg>codepen link 3
このようなSVGファイルをアレンジするだけです。もちろん、手動で行うことはできますが、多くのグラフィック要素を管理する必要がある場合、またはより多くのプロジェクトでそれらをすばやく編集および再利用する必要がある場合は、よりスマートでより速いワークフローが必要です。 Adobe IllustratorといくつかのGulpを使用したソリューションを見つけました。svgシンボル構造ワークフロー
この手法の原則は、「独自のSVGアイコンを作成する」と「IllustratorとIcomoonを使用してアイコンフォントを作成する」記事で紹介したのと同じですので、最初のステップについてはチェックしてください。
下の画像のように、2つの要素があるとします。各要素は、特定のアートボードに配置されています：
便宜上、いくつかの色を追加しましたが、充填色（もしあれば、ストロークカラー、ストロークサイズなど）がCSSを介して編集されることがわかっています。
各シンボルにはアートボードが必要なので、各画像を各色の部分と同じくらい多くのアートボードにセグメント化する必要があります。
これは、Illustratorで非常に迅速に実行でき、各要素を切断し、ターゲットアートボードを選択し、[所有権]コマンドのペーストを選択できます。
各アートボードには特定の名前があることに注意してください。シンボリックIDに使用されます。
新しい「ファイル→エクスポート→画面としてエクスポート」コマンドを使用して、SVGとしてアートボードをエクスポートできます。
これは、最新のIllustratorバージョンの非常に便利な新しいツールです。単一のコマンドを使用して、各アートボードまたはユーザー定義のリソースを複数の形式で保存できます。
エクスポートパネルから「アートボード」を選択し、「SVG」を出力形式に設定し、ターゲットフォルダーを選択します。
gulp を使用しています
次のセクションは少し技術的ですが、必要に応じて、このような多用途のSVGを生成するための迅速で簡潔な方法が得られます。
私たちの目標は、すべての不要なプロパティを削除しながら、すべての画像を単一のファイルのSVG記号に配置することです。
コマンドを回避できます。
.top { fill: #356BA5; }
.right { fill: #357FD9; }
/* and so on... */<svg xmlns="https://www.w3.org/2000/svg">
<symbol id="top" viewBox="0 0 54 54">
<polygon points="54 0 0 0 27 27 54 0"></polygon>
</symbol>
<symbol id="right" viewBox="0 0 54 54">
<polygon points="54 54 54 0 27 27 54 54"></polygon>
</symbol>
<symbol id="bottom" viewBox="0 0 54 54">
<polygon points="0 54 54 54 27 27 0 54"></polygon>
</symbol>
<symbol id="left" viewBox="0 0 54 54">
<polygon points="0 0 0 54 27 27 0 0"></polygon>
</symbol>
</svg>
<svg>
<use class="top" xlink:href="#top"></use>
<use class="right" xlink:href="#right"></use>
<use class="bottom" xlink:href="#bottom"></use>
<use class="left" xlink:href="#left"></use>
</svg>id="umbrella"
しかし、Illustratorの古いバージョンは、Illustratorファイル名をアートボード名に接続してファイル名を作成するため、イラストレーターのファイル名を削除するにはファイルの名前を変更する必要があります。
<svg id="Layer_1" data-name="Layer 1" xmlns="https://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54">
<title>umbrella-handle</title>
<path d="..." fill="#603813"></path>
</svg>
cleanupids：ファイルからすべてのIDを削除します
removedoctype、RemoveComments、およびRemovestyleElement：すべてのドキュメントタイプの宣言、コメント、
<style></style>cleanupnumericValues：値を合理的なレベルの精度に回すここに結果の例があります（このペンであっても、便利なためにSVGファイルを埋め込みましたが、外部ファイルとして安全にリンクできます）：
codepen link 4 この方法はスタイルの使用要素に基づいているため、ポリフィル（SVG4Everybodyなど）がそれらを削除する場合に問題があります。外部シンボリックリンク（すべてのIE）をサポートしていないブラウザでは、svg4Everybodyすべての使用要素を一致するシンボルのコンテンツに置き換えます。したがって、使用に適用されるすべてのCSSルールは有効になりません。
これは、内部シンボリック要素（パス、円など）に適合するようにCSSセレクターを調整することで解決できますが、これは少し難しい場合があります。
ボーナス
このワークフローには無制限のバリエーションがあります。ストローク、テキストなどを処理できます。
探索する価値のあるもう1つの興味深い機能は、イラストレーターのシンボルの使用です。それらはSVGシンボルとしてエクスポートされ、多くの可能性をもたらします。
お読みいただきありがとうございます。
スキン可能なSVGシンボルに関するよくある質問
SVGシンボルには、JPEG、PNG、GIFなどの他の画像形式と比較して多くの利点があります。まず、SVGはスケーラブルなベクトルグラフィックスです。つまり、品質を失うことなくサイズ変更できます。これは、同じ画像をさまざまなサイズのさまざまなデバイスに表示する必要があるレスポンシブWebデザインに特に役立ちます。第二に、SVGシンボルはCSSを使用してスタイリングできるため、設計の柔軟性が向上します。最後に、SVGのファイルサイズは通常、ビットマップのカウンターパートよりも小さく、ロードをスピードアップしてウェブサイトのパフォーマンスを向上させることができます。
以上が「ReskinNable」SVGシンボル：それらの作り方（..そしてなぜ）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
