基本的な形状を使用してSVGコードを簡素化する方法

アイコンを扱うには多くの方法がありますが、最良のアプローチには、インラインまたは画像ファイルへのリンクとして実装されているかどうかにかかわらず、常にSVGが含まれます。これは、それらがコードで「描かれている」ためであり、柔軟性があり、順応性があり、あらゆる環境でスケーラブルであるためです。

ただし、SVGを使用する場合、不要なコードをたくさん含めることが常に可能です。場合によっては、インラインされたSVGのコードは非常に長くなるため、ドキュメントはより長くスクロールし、使用するのが不快であり、必要よりも少し重いです。

使用できます<use></use>要素はコードブロックを再利用するか、ネイティブ変数を適用して、SVGスタイルを1つの場所で管理します。または、サーバー側の環境で作業する場合、直接入力する代わりに、SVGファイルのコンテンツを抽出するためにいつでもPHP（または同様）を追加できます。

これはすべて良いことですが、コードベースのアプローチに頼るのではなく、ファイルレベルでこの問題を解決できればいいのではないでしょうか？別の視点に焦点を合わせたい：基本的な形状を使用してコードを少なくする同じグラフを作成する方法。このようにして、品質や視覚的な変化を犠牲にすることなく、プロジェクトでより小さく、より制御可能でセマンティックなアイコンの利点を得ることができます。さまざまな例をカバーし、共通のアイコンのコードと、作成できる最も単純なSVG形状の一部を使用してそれらを塗り直す方法を調べます。

これが私たちが扱うアイコンです：

コードを小さくシンプルに保つこれらのアイコンを作成するために使用できる基本的な形状を見てみましょう。

shh！ Holasvg.comで作成したシンプルなアイコンの長いリストを次に示します。この記事を読んだ後、それらを変更して自分のものにする方法がわかります。

使用<line></line>Element Simplied Closeアイコン

これは、flaticon.comからダウンロードされ、pixel-perfectによって構築された「クローズ」または「クロス」アイコンのコードです。

この例では、すべてが起こります<path></path>内部には、データ属性（d）には多くのコマンドとパラメーターがあります。このSVGが行うことは、その境界から形状を追跡することです。

Illustratorに精通している場合、これは2つの別々の線を描画し、それらを形状に変換し、2つをパスファインダーと組み合わせて複合形状を作成することに相当します。

<path></path>要素により複雑な形状を描くことができますが、この場合、同じ外観を維持しながら2つの線で同じ数字を作成できます。

<code><svg height="50" overflow="visible" stroke="black" stroke-linecap="round" stroke-width="10" viewbox="0 0 50 50" width="50" xmlns="http://www.w3.org/2000/svg">
<line x1="0" x2="50" y1="0" y2="50"></line>
<line x1="50" x2="0" y1="0" y2="50"></line></svg></code>

最初に0,0〜50,50のViewBoxを定義します。好きなサイズを選択できます。 SVGは、定義するあらゆる幅と高さまで常に十分にスケーリングされます。操作を簡素化するために、この場合は50単位のインライン幅と高さも定義しました。これにより、図面の追加の計算が回避されます。

使用する<line></line>要素、行の最初のポイントの座標と最後のポイントの座標を宣言する必要があります。この例では、x = 0 y = 0で開始し、x = 50 y = 50で終了します。

これがコードがどのように見えるかです：

<code><line x2="50" y2="50"></line></code>

2番目の行はx = 50 y = 0で始まり、x = 0 y = 50で終了します。

<code><line x1="50" y2="50"></line></code>

SVGストロークにはデフォルトで色がありません。そのため、ストローク属性に黒い値を追加します。また、ストローク幅プロパティに10単位の幅を提供し、ストロークリネカップを円値に設定して、元のデザインの丸い角をコピーします。これらのプロパティは直接追加されます<svg></svg>タグでは、両方の行がそれらを継承します。

ストロークはデフォルトのサイズ1ユニットよりも10ユニット大きいため、ビューボックスはラインをトリミングする場合があります。ポイント10ユニットをViewBoxに移動するか、Overflow = visible in the Styleに追加できます。

0がデフォルト値であるため、0に等しい値を削除できます。これは、2つの行が2つの非常に小さなコードの2行のみで終わることを意味します。

<code><line x2="50" y2="50"></line><line x1="50" y2="50"></line></code>

ちょうど<path></path>に変更します<line></line>、より小さなSVGファイルを作成するだけでなく、よりセマンティックで制御可能なコードブロックを作成するため、将来のメンテナンスが容易になります。視覚効果は、元の画像とまったく同じです。

同じクロス、異なるコード。

使用<circle></circle>そして<path></path>要素単純化された時計アイコン

名詞プロジェクトでバラクーダからこの時計アイコンの例を得ました。

この形状も使用されます<path></path>描画しますが、使用されるソフトウェアとファイルライセンスに関連する多くの名前空間とXMLディレクティブもあります。これは、SVGに影響を与えることなく削除できます。アイコンを作成するために使用するイラストエディターを教えてください。

シンプルなコマンドを備えた円とパスを使用して、これをゼロから再作成しましょう。繰り返しますが、今回は0,0〜100,100までのViewBoxから始める必要があり、幅と高さはそれらのユニットと一致します。

<code><svg fill="none" height="100" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" viewbox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40"></circle><path d="M50 25V50 H75"></path></svg></code>

私達はします<svg></svg>ラベルのスタイルは、前のアイコンと同じままです。デフォルトを入力すると黒が入力されるため、削除するためには、削除するために、それに非価値を明示的に割り当てる必要があります。それ以外の場合、円には純粋な黒い塗りつぶしがあり、他の形状を妨げます。

描くために<circle></circle>、半径が配置される中心点を示す必要があります。これをCX（中央X）およびCy（中心Y）で行うことができます。次に、R（半径）が私たちのサークルの大きさを宣言します。この例では、半径はビューボックスよりもわずかに小さいため、ストローク幅が10単位の場合、トリミングされません。

これらすべての手紙で何が起こっているのですか？ SVG文法の紹介については、Chris Coyierのイラストガイドをご覧ください。

クロックポインターを使用できます<path></path>、非常に便利でシンプルな描画コマンドがあるためです。 D（データ）では、M（移動）コマンドから始めて、次に座標を開始する必要があります。

V（Vertical）コマンドの後、負の数値または正の数を使用して上下することしかできないため、1つの値のみが必要です。正の数は下方に移動します。同じことがH（レベル）にも当てはまり、その後に正の75が続き、右側に描画されます。すべてのコマンドは大文字であるため、選択した番号はグリッドのポイントになります。小文字（相対コマンド）を使用することにした場合、数は座標系の絶対ポイントではなく、一方向に移動する単位の数になります。

同じ時計、異なるコード。

使用<rect></rect>そして<polyline></polyline>Element Simplied Envelopeアイコン

元の形状を伸ばすことなく、イラストレーターに封筒アイコンを描きました。エクスポートから取得したコードは次のとおりです。

Illustratorは、グラフィックをエクスポートするためのいくつかのSVGオプションを提供します。 「CSSプロパティ」ドロップダウンメニューで「スタイル要素」を選択して、CSSファイルに移動したいカテゴリにタグを作成できるようにしました。もちろん、SVGスタイルを適用するには多くの方法があります。

このコードにはすでにいくつかの基本的な形状があります！ Illustratorで「Shape to Path」オプションを選択しませんでした。これはここで大いに役立ちます。 SVGOMGを使用してさらに最適化して、コメント、XMLディレクティブ、空の要素などの不要なデータを削除できます。必要に応じて、そこから追加の追加を手動で削除できます。

私たちはすでにより簡単なものを持っています：

<code><svg version="1.1" viewbox="0 0 310 190" x="0" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0">
 .st0 {fill：none; stroke：＃000; stroke-width：10; stroke-linecap：round; stroke-linejoin：round; stroke-miterilimit：10}
<rect height="180" width="300" x="5" y="5"></rect>
<polyline points="5 5 155 110 305 5"></polyline></svg></code>

エンベロープの視覚的な外観に影響を与えることなく、より多くのコンテンツを削除できます。

• version = "1.1"（SVG2以降に非推奨）
• （これには意味も目的もありません）
• x = "0"（これはデフォルト値です）
• y = "0"（これはデフォルト値です）
• XML：Space = "Preserve"（SVG 2以降に非推奨）

<code><svg viewbox="0 0 310 190" xmlns="http://www.w3.org/2000/svg">
 .st0 {fill：none; stroke：＃000; stroke-width：10; stroke-linecap：round; stroke-linejoin：round; stroke-miterilimit：10}
  
<rect height="180" width="300" x="5" y="5"></rect>
<polyline points="5 5 155 110 305 5"></polyline></svg></code>

本当に非常に攻撃的になりたい場合は、CSSスタイルを別のスタイルシートに移動できます。

<rect></rect>そこから幅と高さを拡張する出発点が必要なので、左上のコーナーポイントとしてx = "5"とy = "5"を使用しましょう。そこから、300ユニットの幅と180ユニットの高さで長方形を作成します。クロックアイコンと同じように、座標が0,0の場合にトリミングされる10ユニットのストロークがあるため、5,5を出発点として使用します。

<polyline></polyline>に似ています<line></line>、しかし、この要素は常に囲まれた形状を定義します。 MDNからの直接の例は次のとおりです。

時計のアイコンのために描いたサークルを覚えていますか？ R（半径）をRXとRyに置き換えます。これで、2つの異なる半径値があります。 MDNの別の例を次に示します。

要約します

短期間で多くのコンテンツをカバーしました！例を使用してSVGを最適化するプロセスを実証しますが、この投稿から以下を入手することを願っています。

• 圧縮は、SVGがイラストソフトウェアで描画される方法から始まることを忘れないでください。
• SVOMGなどの利用可能なツールを使用して、SVGを圧縮します。
• 必要に応じて、不要なメタデータを手動で削除します。
• 複雑なパスを基本的な形状に置き換えます。
• <use></use> SVGを「インライン」し、独自の再利用可能なアイコンライブラリを構築する素晴らしい方法です。

これらの基本的な形状を組み合わせることで、いくつのアイコンを作成できますか？

私はholasvg.com/iconsでリストを作成しています。ここでより多くのアイコンと機能をアップロードし続けるつもりです。いくつかの数字を変更して簡単に変更する方法がわかりました。続けて、彼らをあなたのものにしましょう！

以上が基本的な形状を使用してSVGコードを簡素化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。