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

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

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

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

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

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

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

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

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

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

Illustratorに精通している場(chǎng)合、これは2つの別々の線を描畫し、それらを形狀に変換し、2つをパスファインダーと組み合わせて複合形狀を作成することに相當(dāng)します。

<path></path>要素により複雑な形狀を描くことができますが、この場(chǎng)合、同じ外観を維持しながら2つの線で同じ數(shù)字を作成できます。

<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は、定義するあらゆる幅と高さまで常に十分にスケーリングされます。操作を簡(jiǎn)素化するために、この場(chǎng)合は50単位のインライン幅と高さも定義しました。これにより、図面の追加の計(jì)算が回避されます。

使用する<line></line>要素、行の最初のポイントの座標(biāo)と最後のポイントの座標(biāo)を宣言する必要があります。この例では、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単位の幅を提供し、ストロークリネカップを円値に設(shè)定して、元のデザインの丸い角をコピーします。これらのプロパティは直接追加されます<svg></svg>タグでは、両方の行がそれらを継承します。

ストロークはデフォルトのサイズ1ユニットよりも10ユニット大きいため、ビューボックスはラインをトリミングする場(chǎng)合があります。ポイント10ユニットをViewBoxに移動(dòng)するか、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ファイルを作成するだけでなく、よりセマンティックで制御可能なコードブロックを作成するため、將來(lái)のメンテナンスが容易になります。視覚効果は、元の畫像とまったく同じです。

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

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

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

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

シンプルなコマンドを備えた?jī)窑去靴工蚴褂盲筏?、これをゼロから再作成しましょう。繰り返しますが、今回は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>

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

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

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

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

V（Vertical）コマンドの後、負(fù)の數(shù)値または正の數(shù)を使用して上下することしかできないため、1つの値のみが必要です。正の數(shù)は下方に移動(dòng)します。同じことがH（レベル）にも當(dāng)てはまり、その後に正の75が続き、右側(cè)に描畫されます。すべてのコマンドは大文字であるため、選択した番號(hào)はグリッドのポイントになります。小文字（相対コマンド）を使用することにした場(chǎng)合、數(shù)は座標(biāo)系の絶対ポイントではなく、一方向に移動(dòng)する?yún)g位の數(shù)になります。

同じ時(shí)計(jì)、異なるコード。

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

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

Illustratorは、グラフィックをエクスポートするためのいくつかのSVGオプションを提供します。 「CSSプロパテ?！攻丧恁氓抓昆Ε螗幞衰濠`で「スタイル要素」を選択して、CSSファイルに移動(dòng)したいカテゴリにタグを作成できるようにしました。もちろん、SVGスタイルを適用するには多くの方法があります。

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

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

<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>

本當(dāng)に非常に攻撃的になりたい場(chǎng)合は、CSSスタイルを別のスタイルシートに移動(dòng)できます。

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

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

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

要約します

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

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

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

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

以上が基本的な形狀を使用してSVGコードを簡(jiǎn)素化する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。