「ReskinNable」SVGシンボル：それらの作り方（..そしてなぜ）

SVGアイコンは、スケーラビリティ、小さなファイルサイズ、CSSスタイリング機能のおかげで、最新のWebデザインでますます使用されており、レスポンシブWebサイトに最適です。

SVGはCSSを使用してスタイリングできますが、これはSVGコードがHTMLページに埋め込まれている場合にのみ機能します。これは、SVGが埋め込まれない限り、SVGの単一の部分を変更できないことを意味します。

この記事では、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ファイルを使用すると同じ結果が得られます）。

codepen link 1

codepen link 2

大規模なプロジェクトでは、多くのそのような要素があり、メンテナンスの問題が重要な要素であるため、プロジェクトリソースをより適切に整理する方法を常に探しています。

私の目標は純粋な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」を出力形式に設定し、ターゲットフォルダーを選択します。

各アートボードは単一のSVGファイルとしてエクスポートされます：

ここで、すべてのファイルをSVGシンボルに結合し、不要なSVGプロパティを削除する必要があります。

gulp を使用しています

次のセクションは少し技術的ですが、必要に応じて、このような多用途のSVGを生成するための迅速で簡潔な方法が得られます。

とにかく、Gulpが気に入らない場合は、次のすべての手順を手動で完了することもできます。 Gulpを使用する前に何度かこれをしました。それは間違いなく学ぶのに最適な方法であり、継続的な編集とメンテナンスが必要ない小さなプロジェクトや場所で十分です。

.top { fill: #356BA5; }
.right { fill: #357FD9; }
/* and so on... */

私たちの目標は、すべての不要なプロパティを削除しながら、すべての画像を単一のファイルの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>

gulp以外では、私たちの仕事には他の拡張機能が必要です。

まず、gulp-svgstoreとgulp-svgminは、SVGファイルを結合して圧縮するために使用されます

• gulp-renameは、ID名を調整し、ターゲットファイルの名前を指定するために使用されます。このモジュールは、以前のIllustrator SVGエクスポートコマンドを使用する場合に特に必要です。これについては後で説明します。
gulpfileをアレンジすることができます（コードはパブリックギストとして取得することもできます）：

モジュールを読み込んだ後、ファイルに説明するよう指示します（svg_files/*。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>

のシンボルになります）。新しいIllustratorのエクスポートを画面パネルとして使用する場合、ファイルは属するアートボードとまったく同じ名前が付けられるため、最初の

rename

コマンドを回避できます。 id="umbrella" しかし、Illustratorの古いバージョンは、Illustratorファイル名をアートボード名に接続してファイル名を作成するため、イラストレーターのファイル名を削除するにはファイルの名前を変更する必要があります。

ファイルをクリーニングできます。 Gulp-Svgminは、「SVGベクターグラフィックスファイルを最適化するためのNodeJSに基づくツール」のSVGOのGulpバージョンです（Jake ArchibaldはSVGOのオンラインバージョンをリリースしました。これは、ファイルを手動で配置する場合に非常に便利です）。

SVGOには多くの設定可能なオプションがあります（プロジェクトページでそれらすべてを閲覧できます）が、いくつかのみが必要です（もちろん、必要に応じてスクリプトをカスタマイズできます）：

<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：すべてのドキュメントタイプの宣言、コメント、

要素を削除します
removedimensions：viewboxが存在する場合、すべての幅と高さのプロパティが削除されます
• <style></style>cleanupnumericValues：値を合理的なレベルの精度に回す
• removeattrs：指定されたすべての属性を削除
次に、ファイルをsvgstoreに渡して一意のファイルに結合し、名前を変更して保存します。
数回使用した後、各プロジェクトのスケジュールを分でスケジュールできるはずです。必要に応じてSVGシンボルファイルをすばやく再構築できるようになります。

ここに結果の例があります（このペンであっても、便利なためにSVGファイルを埋め込みましたが、外部ファイルとして安全にリンクできます）：

codepen link 4

警告はありますか？

この方法はスタイルの使用要素に基づいているため、ポリフィル（SVG4Everybodyなど）がそれらを削除する場合に問題があります。

外部シンボリックリンク（すべてのIE）をサポートしていないブラウザでは、svg4Everybodyすべての使用要素を一致するシンボルのコンテンツに置き換えます。したがって、使用に適用されるすべてのCSSルールは有効になりません。

これは、内部シンボリック要素（パス、円など）に適合するようにCSSセレクターを調整することで解決できますが、これは少し難しい場合があります。

ボーナス

このワークフローには無制限のバリエーションがあります。ストローク、テキストなどを処理できます。

探索する価値のあるもう1つの興味深い機能は、イラストレーターのシンボルの使用です。それらはSVGシンボルとしてエクスポートされ、多くの可能性をもたらします。

お読みいただきありがとうございます。

スキン可能なSVGシンボルに関するよくある質問

Webデザインに他の画像形式ではなく、SVGシンボルを使用することの利点は何ですか？

SVGシンボルには、JPEG、PNG、GIFなどの他の画像形式と比較して多くの利点があります。まず、SVGはスケーラブルなベクトルグラフィックスです。つまり、品質を失うことなくサイズ変更できます。これは、同じ画像をさまざまなサイズのさまざまなデバイスに表示する必要があるレスポンシブWebデザインに特に役立ちます。第二に、SVGシンボルはCSSを使用してスタイリングできるため、設計の柔軟性が向上します。最後に、SVGのファイルサイズは通常、ビットマップのカウンターパートよりも小さく、ロードをスピードアップしてウェブサイトのパフォーマンスを向上させることができます。

fill属性を使用してアウトラインの色を変更できます。 stroke

すべてのWebブラウザーでSVGシンボルを使用できますか？

SVGシンボルは、Chrome、Firefox、Safari、Edgeなどのすべての最新のWebブラウザーで広くサポートされています。ただし、インターネットエクスプローラーの古いバージョン（IE8以下）はSVGをサポートしていません。これらの古いブラウザをサポートする必要がある場合は、PNGまたはJPEG画像をフォールバックとして提供する必要がある場合があります。

SVGシンボルをアニメーション化する方法は？

HTMLでSVGシンボルを使用できますか？

はい、SVGシンボルはHTMLに直接埋め込むことができます。これは、

および

タグを使用して実行できます。 <svg></svg>タグは、SVGシンボルを定義するために使用され、<symbol></symbol>タグはインスタンス化するために使用されます。これにより、SVGシンボルを一度に定義し、HTML全体で複数回再利用できます。 <symbol></symbol> <use></use> SVGシンボルをよりアクセスしやすくするにはどうすればよいですか？

SVGシンボルをよりアクセスしやすくするには、svgの

>および

タグを使用して、代替テキストを提供する必要があります。

タグは、SVGの短い説明的なタイトルを提供し、<title></title>タグはより長い説明を提供します。これらのタグはスクリーンリーダーによって読み取られ、視覚障害のあるユーザーに重要なコンテキストを提供します。 <desc></desc>

CSSでSVGシンボルを使用できますか？

はい、SVGシンボルはCSSの背景画像として使用できます。これは、SVGをデータURLとしてエンコードし、それをbackground-image属性の値として使用することで実行できます。ただし、この方法では、SVGをCSSでスタイリングまたはアニメーション化することはできません。

パフォーマンスのためにSVGシンボルを最適化する方法は？

SVGシンボルをパフォーマンスのために最適化する方法はいくつかあります。まず、SVGコードを圧縮してファイルサイズを縮小できます。次に、GZIP圧縮を使用してファイルサイズをさらに削減できます。最後に、HTTP/2を使用してSVGを提供することができます。これにより、より高速で効率的なデータ転送が可能になります。

JavaScriptでSVGシンボルを使用できますか？

はい、SVGシンボルはJavaScriptで操作できます。これにより、色、サイズ、場所、視認性など、SVGのプロパティを動的に変更できます。 JavaScriptを使用して、SVGをアニメーション化したり、インタラクティブSVGを作成したり、SVGを動的にロードすることもできます。

レスポンシブSVGシンボルを作成する方法は？

レスポンシブSVGシンボルを作成するには、絶対ユニット（ピクセルなど）ではなく、SVGの幅と高さに相対単位（割合など）を使用する必要があります。これにより、SVGは親要素でスケーリングできます。また、

属性を使用して、SVGのアスペクト比と座標系を指定することもできます。これにより、スケーリングすることができます。 viewBox

以上が「ReskinNable」SVGシンボル：それらの作り方（..そしてなぜ）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。